初心者のためのホームページ作り:第12号

                   毎週金曜日配信 What's New 2002/8/2
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
           初心者のためのホームページ作り
           http://www.scollabo.com/banban/
                <第12号>

             banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

この講座はタグを覚えてテキストエディタだけでホームページを作るという、ど
ちらかというとやや専門的な作業が中心になります。各種の専用のオーサリング
ソフトとは一線を画して、思い通りのプロ並みのHPを作ることが出来ます。

 時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点があったら遠慮なくメールください。

 当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンは等幅・等長フォントでお読みいただくと快適に読めるようになります。

 今週の課題■ リストを作る

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆その前に、読者から寄せられた質問にお答えします。

●HTMLの記述は大文字、それとも小文字?
HTMLだけに関して述べれば、どちらでもかまいません。大文字小文字が入り乱れ
てもブラウザはサポートしています。
 例えば、
<hTmL>
<head>
<title>大文字小文字</TITLE>

 ただし、XHTML、XMLでは大文字小文字を区別します。基本的に記述は小文字が
推奨されています。いずれ当講座でも XHTMLは取り上げる予定です。

当講座では、将来的な用意の意味を込めて小文字に統一して記述しています。そ
う遠くない将来は、XHTML、XMLに集約されると思われます。

●スタイルシートは必須か?
DTD(文書宣言型)を、Transitional で記述する分には、必ずしもスタイルシー
トを用いなくても、非推奨とされている要素および属性は、すべて使うことがで
きますし、ブラウザも表示してくれます。現在のネット上のほとんどのページが
Transitionalを採用しているのも事実です。

 でも、非推奨とされている要素は、音声、点字、テキストブラウザなどに対応
せず、障害者に対して、正確な情報を伝えることが難しくなります。
 また、そう遠くない将来は、スタイルシートは必須となり、非推奨要素及び属
性は使えなくなります。

 スタイルシートが万能なわけではありません。スタイルシートは単にコンテキ
スト(文書構造)から、視覚的な効果を狙ったビジュアルデザイン(見栄え効果)
を分離するものです。
 スタイルシートでフォントの大きさ、位置、色などが設定されても、ユーザ側
でスタイルシートをオフにする場合も多々あります。そのような場合でも、ユー
ザへ適切に情報が伝わるような文書構造を作るように心がけたいものです。

 当講座では、あらゆるユーザを対象にしたページ作りを理念としている関係上
スタイルシートの利用をすすめ、また非推奨とされる要素・属性をできる限り使
わないように心がけております。この点を十分にご理解ください。
 (現在、当講座のサイトもすべてにわたって改造中です。)


●W3CはWebに関わる技術や仕様などを決定する期間です。
W3C という言葉がよく出てくるがこれは一体何なのか?、という質問多く寄せら
れています。
 W3C とは World Wide Web Consortium の略で、MIT、IETF、そして日本の慶応
大学などが委員を務め、様々な Web上の技術や仕様書、草案などを統括・管理し
ている非営利組織で、その会員にはマイクロソフト社やネットスケープ社、IBM、
Sun、マクロメディア社など、多くのソフトメーカーも名前を連ねています。

 W3Cでは、文法の仕様や勧告、アクセシビリティ、ユーザビリティ、新規技術
に関する制定が行われ、私たち制作者にとってバイブルといっても過言ではない
文書が配布されています。
 また、ここで決められたことは、新しいブラウザにも大きく関わり、いずれ、
どのブラウザでもまったく同じ仕様になるであろうことを目指しています。

MIT  マサチューセッツ工科大学
IETF  Internet Engineering Task Force の略で、エンジニアのボランティア団
   体です。インターネット環境におけるさまざまな技術(ネットワークプロ
   トコルなど)に関する文書(RFC)を数多く発表しています。技術に関
   する草案段階のものも含め、文章として一連の番号のもとに配布しており
   誰もが無料でネット上からダウンロードできます。(ただし英文)


●フィルター効果を狙ったスタイルシートの利用
読者の方から、さまざまな表示が可能なフィルターのスタイルシートを教えて欲
しいというリクエストがありました。

フィルター効果とは、画像に影をつけたり、グラデーション効果を表現したり、
ウェーブをつけたり、ブレさせたり、クロマキーをかけたり、それはそれは大変
魅力的な表示効果を上げられます。

しかしながら、このフィルターというスタイルシートの属性は、マイクロソフト
社の Internet Explorer というブラウザで、しかも Windows だけでしか表示で
きない独自のものとなっており、他のブラウザやプラットフォームでは表示でき
ないばかりか、大変重たいページになってしまいます。
 これは、HTML4.01では規格外とされており、W3Cでも認めておりません。

 当講座としては、お奨めできない属性と判断しましたので、掲載を見送りまし
た。あわせてブラウザ固有の独自タグも掲載いたしません。ご理解ください。


●インラインレベル要素はブロックレベル要素の中に記述する
読者からの質問で、下記のHTMLにある<p>要素について、

<body>
<p>
<a href="index.html">Home</a>
</p>

</body>

と、あるが何故、<p> を使わないといけないのか? とありました。
 実は、これについては、まだ講座で解説していませんので、この場で取り上げ
ておきます。

 HTMLの規格ではインラインレベル要素は、必ずブロックレベル要素の中で書く
ように決められています。
 おそらく、HTML1.0 から決められていたと記憶しています。詳しい内容は省き
ますが、基本中の基本です。 <p>要素がいやなら <div>要素でもかまいません。
 つまり、HTMLを論理構造で書け、という決まり事があるためで、必ずブロック
レベル要素(段落などを表わす一つのかたまり)の中にコンテンツを書くことに
なっています。

ブロックレベル要素は下記の通りです。
address、blockquote、dir、div、dl、fieldset、form、h1〜h6、hr、isindex、
menu、noframes、ol、p、pre、table、ul

詳しくは当サイトのHTML4.01リファレンスをご覧ください。
  http://www.scollabo.com/banban/ref/index.html#block

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆リストを作る
箇条書きのようなリストをWeb上で見たことがあると思います。例えば、

 ・Microsoft Internet Explorer
 ・Netscape
 ・iCab
 ・Opera
 ・Mozilla
 ・Lynx
 ・IBM HomePage Reader

これはブラウザの種類をリストにしたものです。 Webページ上でリストを構成す
るための要素として、

 dl、ol、ul、などがあります。早速これらの要素を使ってリストを作ってみま
しょう。
 いつものようにテキストエディタ(メモ帳、SimpleTextなど)を立ち上げて、
下記のようにタイプしてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<title>リストを表示する</title>
</head>

<body>
<div>ブラウザの種類</div>
<ul>
<li>Microsoft Internet Explorer</li>
<li>Netscape</li>
<li>iCab</li>
<li>Opera</li>
<li>Mozilla</li>
<li>Lynx</li>
<li>IBM HomePage Reader</li>
</ul>

</body>
</html>

無事に入力できたら保存します。半角小文字で、
test_11.html と必ず拡張子 .html を忘れないようにします。
 保存後、今作ったHTML文書のアイコンが、あなたがいつも使用しているブラウ
ザのアイコンになっているはずです。ダブルクリックして見てみましょう。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説
 <ul>〜</ul> この範囲がリストであることを示します。通常ブラウザでは黒丸
 の行頭の記号がつけられます。これを「マーカー」といいます。この要素はブ
 ロックレベル要素で、改行されて表示されます。また、多くの一般的なブラウ
 ザではリストの各項目が、インデント(字下げ)されて表示します。

 <li>〜</li> リストの項目をこの範囲に記述します。
 この要素は、<ul> あるいは <ol>と共に使います。これ以外では使えません。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆番号付きリスト
項目のマーカーに数字で連番として表示させる要素は、<ol>〜</ol> を使います。
先ほどのHTML文書、test_11.html の <ul>、</ul> を入れ替えてみてください。

 1  Microsoft Internet Explorer
 2  Netscape
 3  iCab
  4  Opera
 5  Mozilla
 6  Lynx
 7  IBM HomePage Reader

 このように表示されるはずです。順番が重要なリストを作る時は、ol要素を使
います。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆マーカーをアレンジする
既製の黒丸だけでなく、もっと違うマーカーを表示させることもできます。
 また、マーカーに画像を用いて自分だけの独自のマーカー表示も可能です。

それでは違うマーカーを表示しましょう。テキストエディタで新規にHTML文書を
作成します。下記のようにタイプしてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>リストを表示する</title>
<styel type="text/css">
<!--
ul { list-style-type: circle } 
-->
</style>
</head>

<body>
<div>ブラウザの種類</div>
<ul>
<li>Microsoft Internet Explorer</li>
<li>Netscape</li>
<li>iCab</li>
<li>Opera</li>
<li>Mozilla</li>
<li>Lynx</li>
<li>IBM HomePage Reader</li>
</ul>

</body>
</html>

入力が終わりましたら保存します。半角小文字で、
test_12.html と必ず拡張子 .html を忘れないようにします。
保存後、ダブルクリックしてブラウザで見てみましょう。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説
最初に作ったHTMLとほとんど変わりません。単にスタイルシートを追加しただけ
です。別におちょくっているわけではありません。

list-style-type: circle これは白丸を表示するスタイルシートの属性です。

その他に、square(四角)、decimal(10進数の数字)、lower-roman(小文字ロ
ーマ数字)、upper-roman(大文字ローマ数字)、lower-alpha(小文字アルファ
ベット)、upper-alpha(大文字アルファベット)などがあります。

 いろいろとお試しください。なお、カタカナ、ヘブライ語、漢数字などもあり
ますが、ブラウザがサポートしていないものが多いようです。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆画像を利用したマーカーを表示させる
次に、画像を利用しましょう。第10、11号でダウンロードした画像を利用します。
(まだ、入手していない方は当サイトの教材からダウンロードしてください。)

今までのHTMLとほとんど変わらないのでスタイルシートの部分だけ変更します。
下記のようにタイプしてください。

<style type="text/css">
<!--
ul { list-style-image: url("images/maker.gif") }
-->
</style>

<head>〜</head> の中に上記スタイルシートを記述します。
保存後(上書き保存してもかまいません。)ブラウザで見てください。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説
ul { list-style-image: url("images/maker.gif") }

リストのマーカーを画像表示にする属性です。なお、マーカーに使用する画像は
なるべく小さい大きさにしておきましょう。大きいと、リストの項目に隙間がで
きて、みっともなくなります。

 list-style属性は、ol要素にも適用されます。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆定義リストの作成
定義リストとは、定義したい用語とその説明などで形成されたリストのことです。
今まで作っていたリストは単純に箇条書きリストでしたが、項目に説明が必要な
場合に、定義リストを作成します。
 使用するタグは、dl、dt、dd の3つです。

早速作ってみましょう。テキストエディタで新規にHTMLを作ります。下記のよう
にタイプしてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<title>定義リスト</title>
</head>

<body>
<div>ブラウザの種類</div>
<dl>
<dt>Microsoft Internet Explorer</dt>
<dd>マイクロソフト社製で、WindowsのOSに標準でバンドルされています。</dd>

<dt>Netscape</dt>
<dd>Mosicより独立したメーカーです。文法には厳しいブラウザです。</dd>
<dd>最近のWindows版Netscapeは、重くて起動に時間がかかります。</dd>

<dt>iCab</dt>
<dd>Macintosh専用のドイツ製のブラウザで開発途上です。</dd>

<dt>Opera</dt>
<dd>ノルウェー製のブラウザで、今後はIBMと開発する予定。</dd>

<dt>Mozilla</dt>
<dd>このブラウザのエンジンは多くのブラウザをサポートしています。</dd>
<dd>これも軽いのが特徴です。一見Netscape風ですが、中身は違います。</dd>

<dt>Lynx</dt>
<dd>ご存知テキストブラウザの雄、日本語では山猫と訳すらしい。</dd>
<dd>Web制作者は持っていたほうが良いブラウザです</dd>

<dt>IBM HomePage Reader</dt>
<dd>目に障害を持つ方のための音声ブラウザです。</dd>
<dd>このブラウザのためのHTML記述は、正しい文法で可能になります。</dd>
</dl>

</body>
</html>

入力が終わりましたら保存します。半角小文字で、
test_13.html と必ず拡張子 .html を忘れないようにします。
保存後、ダブルクリックしてブラウザで見てみましょう。
(保存するHTML文書名は、ご自分で好きな名前をつけてもかまいません。)

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆解説
<dl>〜</dl> 定義リストであることを表わします。

<dt>〜</dt> 定義リストの項目にあたります。終了タグは省略可能です。

<dd>〜</dd> 項目に対する説明文を挿入する要素です。必ず、<dt>〜</dt> の中
      で記述します。それ以外は認められていません。多くのブラウザで
      は、広い幅を持って字下げして表示します。複数利用できます。
      また、この要素の終了タグは省略可能となっています。

なお、これら3つの要素(dl、dt、dd )には今のところ list-style属性は適用
できません。
 同時に、dt、dd要素は、ul、ol要素中にも使えません。時々混同している人が
いるようですが、これは必ず覚えておきましょう。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆定義つきリストを魅力的なレイアウトに整える
先ほどの定義つきリストのHTMLの実行結果は、味気ないものがあります。そこで
スタイルシートを利用して、もう少し体裁を整えたいものです。

 先ほどのHTML分のヘッダ部、<head>〜</head> を変更します。下記のスタイル
シートを挿入します。コロン「:」、セミコロン「;」を間違えないように。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>定義リスト</title>
<style type="text/css">
<!--
dl { margin-left: 2em }
dt { width: 14em; 
     margin-top: 1em;
     font-weight: bold;
     color:#009;
     border-bottom: 3px double #fc0 }
dd { margin: 0px;
     text-indent: 1em }
-->
</style>
</head>

◆解説
dl要素 左側のマージン(余白)を2文字分取りました。

dt要素 フォントを強調し色を濃い目の青、オレンジ色の二重線を施しました。
    また、この要素の上側に1文字分の空白を取って見やすくしました。
    全体の幅を width属性によって14文字分に設定しました。

dd要素 余計なマージン(余白)を削って、1文字分のインデントを施しました。

上記スタイルシートを挿入してHTML文を保存して実行してみてください。なにも
していない定義付きリストが見違えるほどになります。スタイルシートを色々と
アレンジして自分なりのリストを作ってみてください。楽しくなります。

(注)HTMLの記述中、折り返して表現しています。これは「まぐまぐ」が推奨す
る文字幅おおよそ全角36文字という枠があるためです。ご了承ください。

今回はここまで、ではでは・・
今週のおさらいはWebページにも掲載しましたので、是非見ておいてください。
Webページは画像が使えるので、より分かりやすいと思います。あわせて過去
の記事のおさらいも掲載しています。

(今週のおさらい)
http://www.scollabo.com/banban/magazine/

次回は、いよいよテーブルの作成に入ります。テーブルについては内容が非常に
多いので、3週にわたって解説します。

今後の予定
位置のコントロール、フォームの作成、フレームの作成、FTP、JavaScript、
CGI、FLASH、XHTML、変化に富んだページ作りなど

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆バックナンバーの配布
本誌1号から10号までのバックナンバーを当サイトにて配布します。なお、この
バックナンバーは圧縮されたアーカイブファイルになっています。

 アーカイブは、Macintosh、Windows、UNIX系の各プラットフォーム別にダウン
ロードできるようにしました。途中からご購読いただいた読者には、是非ご利用
ください。
 WindowsとMacintosh版はそれぞれ自己解凍できるアーカイブになっています。

・ダウンロード先
 http://www.scollabo.com/banban/daf/archive.html

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、使っているテキ
ストエディタなど、なるべく分かりやすく制作環境を明記していただけると回答
しやすくなると思います。
 返答はなるべく早く出しますが、平日昼間は会社勤めなので、その点だけ、ご
理解ください。

発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/  (ID 0000090196)

誤字・脱字・変換ミス・表現欠乏などには平に御容赦願います。なお、マガジン
の内容に記述の誤りがある場合、叱咤と罵声と共に私まで突きつけていただくと
幸いに思います。

バックナンバー こちらで公開しています。
プレーンテキスト  http://www.scollabo.com/banban/magazine/magazine.html
各号のおさらい  http://www.scollabo.com/banban/magazine/
まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196

配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/magazine.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

<えでぃた〜ず・るーむ>
現在、当サイトのHTMLを見直し、すべての文書型宣言を Strict に改め、非推奨
となっている要素、属性を取り払う作業を続けています。
 講座を主宰する以上、自ら襟を正してしっかりした文法で表現しなくてはと思
い、一念発起して全ページを書き改めています。完成するには相応の時間が必要
ですが、8月末までには終わらしたいと考えています。

 それにしても時間がない!特にマガジンを発行するようになってからは、1週
間が早くていつも原稿に追われています。書きだめはしているのですが、最終的
なチェックがおざなりになってミスが多く出てしまい、最近はかなり神経質にな
っています。ミスはいけませんよねぇ・・。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆著作権について
個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中のすべての内容について、無断で使用することを固く禁じ
ます。

      Copyright(C) 2002  www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


Copyright(C) 2002-3003 banban@scollabo.com