都立町田高校パソコン同好会公式サイト

列挙!!〜リスト三種〜

リストによる表現

文章表現の手段の一つとしてリストというものがあります。文章としてずらずらつなげるのではなく、 単刀直入に列挙してしまえ、という代物ですね。実際のHTML文書作成においては本文よりも文書の土台となる 構造を作るために使うことの方が多い気がします。たとえばパソコン同好会非公式サイトのナビゲーション リンクは箇条書きのリストを採用しています。もちろん本文でも列挙した方が都合がいい文面というのがあります。 レシピなんかはその典型ですね。シンプルに文章をまとめたいときなんかに便利なもんです。

箇条書きのリスト

ということで、とりあえず一番スタンダードな箇条書きのリストです。書き方はこんな感じ。

記述例

<ul>
 <li>ネギ</li>
 <li>ヒジキ</li>
 <li>レンコン</li>
 <li>タマネギ</li>
 <li>キャベツ</li>
</ul>

表示例

ul要素は箇条書きのリストを意味する要素、li要素はリストの各項目を示す要素です。 ul要素の箱の中に直接入っているli要素が箇条書きのリストになります。両方ともブロック要素です。

ブロックレベルの要素である、ということはli要素の中にブロックレベルの要素を放り込むことができます。 そんなわけでこんな使い方もできます。

記述例

<ul>
 <li>トップページ</li>
 <li>日記
 <ul>
  <li>2007年4月</li>
  <li>2007年5月</li>
  <li>2007年6月</li>
 </ul>
 </li>
 <li>HTML考察</li>
 <li>リンク集</li>
</ul>

表示例

li要素の中にul要素でさらに箇条書きのリストを作ることで、階層的なリストを作ることができます。 こんな感じのリストの中にリンクを入れれば機能的なナビゲーションリンクにすることができます。

番号付リスト

単なる箇条書きじゃなくて序列、順序のあるようなリストが欲しいこともあります。そんなときに使うのがol要素です。

記述例

<ol>
 <li>紙を対角線に沿って折る。</li>
 <li>二等辺三角形の頂点から下ろした垂線にそって折る。</li>
 <li>そのあといろいろグチャグチャやる。</li>
 <li>折鶴の完成!!</li>
</ol>

表示例

  1. 紙を対角線に沿って折る。
  2. 二等辺三角形の頂点から下ろした垂線にそって折る。
  3. そのあといろいろグチャグチャやる。
  4. 折鶴の完成!!

ol要素は番号付きリストを意味する要素、li要素はリストの各項目を示す要素です。li要素は番号付きリストでも 箇条書きリストでもリストの中身として使っています。ol要素はブロックレベルの要素です。ということでul要素の場合と同様に 番号付きリストで階層的な表現ができます。

記述例

<ol>
 <li>天皇は日本の象徴ニダ</li>
 <li>皇位は皇室典範に基づいて継承するニダ</li>
 <li>天皇の国事行為には内閣の助言と承認が必要ニダ</li>
 <li>
 <ol>
  <li>天皇は国事行為のみ行えるニダ</li>
  <li>天皇は国事行為を委任できるニダ</li>
 </ol>
 </li>
</ol>

表示例

  1. 天皇は日本の象徴ニダ
  2. 皇位は皇室典範に基づいて継承するニダ
  3. 天皇の国事行為には内閣の助言と承認が必要ニダ
    1. 天皇は国事行為のみ行えるニダ
    2. 天皇は国事行為を委任できるニダ

定義型リスト

最後に今までにあげたリストとは少し異なるタイプのリストを紹介します。 それが定義型リストです。定義型リストは辞書のようなスタイルのリストです。 とりあえず例を挙げてみた方がわかりやすいでしょう。

記述例

<dl>
 <dt>dl要素</dt>
 <dd>定義型リストの親分的存在。定義型リストの全体を示す。</dd>
 <dt>dt要素</dt>
 <dd>定義する言葉を示す。</dd>
 <dt>dd要素</dt>
 <dd>定義の内容を示す。</dd>
 <dd>定義文はこのように複数記述することができる。</dd>
</dl>

表示例

dl要素
定義型リストの親分的存在。定義型リストの全体を示す。
dt要素
定義する言葉を示す。
dd要素
定義の内容を示す。
定義文はこのように複数記述することができる。

dl要素は定義型リストの全体を示す要素、dt要素は定義する言葉などを示す要素、 dd要素はdt要素に示した言葉などの定義文を示す要素です。 ポジション的にはdl要素はul要素やol要素のような感じ、dt要素やdd要素はli要素のような感じになりますね。 これらは皆ブロックレベル要素です。

定義というと堅い感じがしますが、つまりは、なにか言葉にせよ画像にせよとにかく説明したいなにかがあって、 それに対して説明文をつけた代物ということです。そんなわけで辞書よりくだけた感じの使い方も見てみましょう。

記述例

<dl>
 <dt><a href="http://www.usamimi.info/~geko/">炭色地帯</a></dt>
 <dd>技術的に色々すごいサイト。最近は稀にしか更新していない。</dd>
 <dd>私のHTMLに対する思想はこのサイトの影響をかなり受けている</dd>
 <dt><a href="http://www.machida-h.metro.tokyo.jp/">都立町田高校公式サイト</a></dt>
 <dd>いわゆる我が母校。テーブルレイアウトはネスケ4みたいな旧型ブラウザへの対応上仕方ないとしても、
b要素とかcenter要素とかをふんだんに使っているあたりが許せない。</dd>
 <dd>それ以外にも色々不備があるがあまり言わんでおこう。母校だもの。</dd>
 <dt><a href="http://mazda1micro1vaka.yakiuchi.com/index.html">パソコン同好会非公式サイト</a></dt>
 <dd>文字通りパソコン同好会の非公式サイト。コンテンツはゲームと日記。</dd>
 <dd>日記以外にもコンテンツを広げたいが、実はそういうことをやりづらいサイト
設計だったりするのはここだけのヒ・ミ・ツ!!</dd>
</dl>

表示例

炭色地帯
技術的に色々すごいサイト。最近は稀にしか更新していない。
私のHTMLに対する思想はこのサイトの影響をかなり受けている。
都立町田高校公式サイト
いわゆる我が母校。テーブルレイアウトはネスケ4みたいな旧型ブラウザへの対応上仕方ないとしても、 b要素とかcenter要素とかをふんだんに使っているあたりが許せない。
それ以外にも色々不備があるがあまり言わんでおこう。母校だもの。
パソコン同好会非公式サイト
文字通りパソコン同好会の非公式サイト。コンテンツはゲームと日記。
日記以外にもコンテンツを広げたいが、実はそういうことをやりづらいサイト 設計だったりするのはここだけのヒ・ミ・ツ!!

・・・リンク集のつもりです。dt要素にリンクバナーを入れるというのもありですね。

定義型リストは使い慣れると結構癖になる要素です。パソコン同好会非公式サイトの日記も 当初は定義型リストを採用しようと考えていたくらい癖になります。そんなわけで依存性の高い代物なので(私だけかも)、 論理構造をよく考慮して、定義型リストで表現するか、それとも見出し要素(h1〜h6要素)+p要素で表現するかを見きわめましょう。

今回はこれまで。いままで見出し、段落、リスト、とよく使うブロックレベル要素に触れてきましたが、 次回はこれまでで取りこぼしたブロックレベル要素の中から、使いそうなやつを紹介します。 ・・・手抜きだよな。。


次の講座:06.大きな行李の仲間たち〜その他の主要ブロックレベル要素〜

Copyright© Machida High School Personal Computer Club