リストタグを知る
また、書籍を例にお話しますね。
書籍には、目次や索引が付いています。
これをウェブページに当てはめてみると、何にあたると思いますか？
あなたが、インターネットをしていて、あるサイトを見るときに「サイトマップ」という言葉を目にしたことがあると思います。
これが、目次や索引に相当するものですね。
案内図みたいなもんです。
このサイトマップを作るのに、とっても便利かつ有効に作用してくれるのがリストタグです。
他にも利用価値はありますよ。メニューを作ったり、箇条書きにしたり、手順を示したり・・・
でも、ちょっとその話は今回はスルーです。
当サイトにはサイトマップがありませんが、同じ役目を果たしているのが【目次】です。
トップページにドカーン！といる、あのリストです。
サイトマップの例をひとつ見てみましょうか。
んっと、私がよくお世話になっている、All About（オールアバウト）にしましょう。
⇒ All About（オールアバウト）のサイトマップ
どうですか？イメージは掴めましたか？
ただ、残念なことにリストタグでサイトマップが構成されていませんね。
うーん。もうひとつ、紹介しましょう。
私のバイブル「Web標準の教科書」の著者、益子貴寛氏の運営するサイトのサイトマップ！
ここならば、文句あるまい！
⇒ CYBER@GARDEN のサイトマップ
ああ、流石は益子氏です (^^)♪
バッチリ、リストタグで構成されていましたよ。
さて、ちょっとリストタグについて触れてみますね。
これは、dl要素、dt要素、dd要素の３つの要素で構成されるリストタグの例です。
基本ソースコードの<body>〜</body>部分を下のソースコードに書き換えると、下図のような表示になります。
：
略
：
<body>
<dl>
<dt>SEO（サーチエンジン最適化）</dt>
<dd>対策１：ソースコードの簡素化</dd>
<dd>対策２：タグの最適化</dd>
</dl>
</body>
：
略
：
どうですか？うまく表示されたでしょうか？
これもまた、味気ないページですね。
Web標準に準拠した構造で書くと、こうなっちゃいますけれど、CSSで見た目をデザインしてあげれば、素敵なサイトマップができますよ。
目次も同じ要領です。
リストタグには、dl要素、dt要素、dd要素の３つの要素で構成されるものの他に、あとふたつ種類があります。
「箇条書きリスト」と言われるものと「番号付きリスト」と言われるものです。
「箇条書きリスト」は、ul要素、li要素で構成されます。
「番号付きリスト」は、ol要素、li要素で構成されます。
「箇条書きリスト」の例は、当サイトのトップページで使っていますよ。
「●」付きのリストが生成されます。
下のソースコードのように構成してくださいね。
：
略
：
<body>
<ul>
<li>[第０１２号]１カラム（１段組）レイアウト</li>
<li>[第０１３号]２カラム（２段組）レイアウト</li>
<li>[第０１４号]３カラム（３段組）レイアウト</li>
<li>[第０１５号]４カラム（４段組）レイアウト</li>
</ul>
</body>
：
略
：
これをもとに、「番号付きリスト」に書き換えてみますね。
<ul>の部分を<ol>に変えれば、OK!ですよ。
：
略
：
<body>
<ol>
<li>[第０１２号]１カラム（１段組）レイアウト</li>
<li>[第０１３号]２カラム（２段組）レイアウト</li>
<li>[第０１４号]３カラム（３段組）レイアウト</li>
<li>[第０１５号]４カラム（４段組）レイアウト</li>
</ol>
<
/body>
：
略
：
さぁ、どうでしょう。
３つのリストが理解できましたか？
一番最初に紹介したリストは、「サイト作成に便利な無料ツール」と「Interner Explorer以外のブラウザをインストールする」でも使っていますよ。
どこで使っているかわかるでしょうか？
ブラウザの「ソースを表示」で表示して、探ってみると、より理解が深まりますよ♪
[ 追記 ]
これらのリスト要素を使って、もうちょっとオメカシをしたメニューを作ってみました。
ご賞味あれo(*^▽^*)o~♪
