情報をわかりやすく整理する

前回の授業では、見出し、段落、改行、インライン画像をWebページで使用するための要素を紹介しました。これらの要素を組み合せて、文章を中心にしたWebページを作成することが可能となりました。

今日の授業では、より情報をわかりやすく表現するための手段として、「箇条書き」によって情報を表現する「リスト」と、表を作成する「テーブル」に関係する要素について紹介したいと思います。これらの要素を正しく効果的に用いることで、文章だけで説明するよりも、よりわかり易く情報を表現するためのバリエーションになるでしょう。

情報の整理 1 – リスト

リストの効果

まず、リストに関係する要素について解説します。リストとは箇条書きで情報を表現する手段です。リストは短い文字量でも、表現したい論旨を的確にわかり易く表現することが可能となります。また、視覚的にも読み易くなるという効果も期待できます。

３種類のリスト

HTMLのリストには大きくわけて3種類のタイプが存在ます。項目の順番にはあまり大きな意味を持たず、並列的に列挙する「並列列挙リスト」と、項目の順番が意味を持たせたり、もしくは項目をあとで参照するための番号をつける「順序付きリスト」、そして辞書のように用語とその定義から構成される「定義型リスト」の3種類です。

「並列列挙リスト」には「ul (= Unorderd List)」要素、「順序付きリスト」には「ol (= Orderd List)」要素、「定義型リスト」には「dl (= Definition List)」要素を用います。

リストの書式 1 – 並列列挙型リスト、順序付きリスト

リストをマークアップするには、まずその箇条書きする要素全体を「ul要素」もしくは「ol要素」としてマークアップします。その上で、列挙するそれぞれの要素を「li要素 (List Item)」といてマークアップします。

並列列挙リスト (ul要素) の例

<ul>
  <li>ドはドーナッツのド</li>
  <li>レはレモンのレ</li>
  <li>ミはみんなのミ</li>
  <li>ファはファイトのファ</li>
  <li>空を仰いで</li>
  <li>ラララララ</li>
  <li>シは幸せよ</li>
</ul>

順序付きリスト (ol要素) の例

<ol>
  <li>一本でも人参</li>
  <li>二足でもサンダル</li>
  <li>三艘でもヨット</li>
  <li>四粒でもごま塩</li>
  <li>五台でもロケット</li>
  <li>六羽でも七面鳥</li>
  <li>七匹でも蜂</li>
  <li>八頭でもクジラ</li>
</ol>

リストの書式 2 – 定義型リスト

定義型リストは、その全体を「dl要素 (= Definition List)」で囲んでマークアップします。その中に、用語をマークアップする「dt要素 (= Definition Title)」と、その用語の定義「dd要素 (= Definition Description)」から構成されます。

定義型リストの例

<dl>
  <dt>HTML</dt>
  <dd>Hyper Text Markup Languageの略。Webページを記述するためのマークアップ言語。</dd>
  <dt>HTTP</dt>
  <dd>Hyper Text Transfer Protcol。Webサーバとクライアントがデータを送受信するのに使われるプロトコル。</dd>
  <dt>URL</dt>
  <dd>Uniform Rosource Locator。インターネット上の情報の場所を指定する。</dd>
</dl>

リストの入れ子構造

リストはまた、複数のレベルを持つことが可能です。リストのレベルを表現するには、リストの項目の中に、新たなリスト(ul要素、またはol要素)を入れ子状にして、多重構造のリストを記述していくことで表現か可能です。

多重構造のリストの例

<ul>
  <li>リスト１
    <ul>
      <li>リスト1.1</li>
      <li>リスト1.2</li>
      <li>リスト1.3</li>
    </ul>
  </li>
  <li>リスト2
    <ul>
      <li>リスト2.1</li>
      <li>リスト2.2</li>
      <li>リスト2.3</li>
    </ul>
  </li>
</ul>

リストが多重構造になると、開始タグと終了タグの関係性が複雑に組み合わされます。必ず開始した要素は終了しているように、またその対応の順番が混乱しないように、インデントを使用しながら整理して記述するように心掛けましょう。

テーブルによる情報の表現

HTMLで行と列から成る「表」で情報を表現する際には「table要素」を使用します。HTMLでは、表(= table要素)の中に1つ以上の「行(縦の並び)」があり、その行の中に1つ以上の項目(セル、データ)があると考えます。

table要素の中の行を「tr (= Table Row) 要素」、セルを「td (= Table Data) 要素」でマークアップします。

tableの書式

では、簡単な表を作成してみましょう。

<table border=”3″ cellpadding=”5″>
  <tr>
    <th>県名</th>
    <th>県庁所在地</th>
    <th>面積</th>
    <th>総人口</th>
  </tr>
  <tr>
    <td>東京都</td>
    <td>東京</td>
    <td>2,187.65km²</td>
    <td>13,044,818人</td>
  </tr>
  <tr>
    <td>千葉県</td>
    <td>千葉市</td>
    <td>5,156.60km²</td>
    <td>6,200,335人</td>
  </tr>
  <tr>
    <td>埼玉県</td>
    <td>さいたま市</td>
    <td>3,797.25km²</td>
    <td>7,189,176人</td>
  </tr>
</table>

県名	県庁所在地	面積	総人口
東京都	東京	2,187.65km²	13,044,818人
千葉県	千葉市	5,156.60km²	6,200,335人
埼玉県	さいたま市	3,797.25km²	7,189,176人

テーブルをレイアウトには使用しない

Webページの体裁(デザイン)やレイアウトをする、スタイルシートという仕組みが整っていなかった時代には、table要素を使用してページのレイアウトを行うことが一般的に行われていました。テーブル要素を用いて、ページヘッダーやフッター、サイドメニューなどの各要素をグリッド状に配置していくというアプローチです。

しかしながら、現在はこのやり方は推奨されておらず、レイアウトにtable要素を用いるべきではないという考え方が一般的です。レイアウトの手段としてtable要素を使用するということは、さまざまなデメリットがあります。

• 表示が遅い：tableを複雑に使用し過ぎると、ページのレンダリングに時間がかかります
• SEOに不向き：サーチエンジンでページの構造を解析することが困難なため、検索ページで上位になりずらい
• ファイルサイズが増える：無駄なタグが多く、HTMLのファイルサイズを無駄に浪費します
• HTMLファイルの判読が困難：凝ったtableレイアウトは、後から人間が判読するのが非常に困難となります

こうした様々なデメリットから、table要素をレイアウトの手段として使用することは、現在では賢いやり方とはいえません。この授業でもtable要素はあくまで「表形式」のデータを表現するための手法として使用するに留め、ページ全体のレイアウトや細かな位置の調整は授業の後半で学ぶCSS(カスケーディング・スタイルシート)という仕組みで一括して行うようにします。

今日のまとめ

今日の授業では、リストと表という形式を用いて、情報を整理して表現する手法について学びました。リストや表をその意味や構造に忠実に、効果的に用いることで、情報を視覚的にわかり易く表現することが可能となります。