BlogでHTML日進月歩

HTML及びCSSの理解を深め、Webサイト作成初級者からの脱却を目指します。

エントリー記事

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

このページの一番上へ

テーブル

テキストを表形式で記述したいときには、table要素を用います。

HTMLソース及びスタイルシート
<table>
<tr><td>(a,1)</td> <td>(a,2)</td> <td>(a,3)</td></tr>
<tr><td>(b,1)</td> <td>(b,2)</td> <td>(b,3)</td></tr>
<tr><td>(c,1)</td> <td>(c,2)</td> <td>(c,3)</td></tr>
</table>
table { border:1px solid; }
td { border:1px solid; padding:5px; }
実際の表示
(a,1)(a,2)(a,3)
(b,1)(b,2)(b,3)
(c,1)(c,2)(c,3)

行や列の見出しには、td要素ではなくth要素を用います。

HTMLソース及びスタイルシート
<table>
<tr><th>行a,列1</th> <th>列2</th> <th>列3</th></tr>
<tr><th>行b</th> <td>(b,2)</td> <td>(b,3)</td></tr>
<tr><th>行c</th> <td>(c,2)</td> <td>(c,3)</td></tr>
</table>
table { border:1px solid; }
th,td { border:1px solid; padding:5px; }
実際の表示
行a,列1列2列3
行b(b,2)(b,3)
行c(3,2)(3,3)

caption要素を用いると、表にタイトルをつけることができます。また、音声ブラウザには表形式でデータを伝えることができないため、summary属性を用いて表の概要を記述することを推奨します。

<table summary="表の概要を記述">
<caption>表のタイトル</caption>
<tr><td>(a,1)</td> <td>(a,2)</td> <td>(a,3)</td></tr>
<tr><td>(b,1)</td> <td>(b,2)</td> <td>(b,3)</td></tr>
<tr><td>(c,1)</td> <td>(c,2)</td> <td>(c,3)</td></tr>
</table>

caption要素は、tableタグの直下に記述します。

縦の列に属性やスタイルシートを指定したいときにはcol要素を指定します。次の例では、1列目のclass属性をbold、3列目及び4列目のalign属性(*1)をcenterとしています(*2)

HTMLソース
<table summary="主要都市の天気、降水確率、最高気温及び最低気温の予報">
<caption>主要都市の天気予報</caption>
<col class="bold" />
<col />
<col span="2" align="center" />
<tr><th>都市名</th> <th>天気</th> <th>降水確率</th> <th>気温(最高/最低)</th></tr>
<tr><td>札幌</td> <td>雨</td> <td>80</td> <td>21/14</td></tr>
<tr><td>東京</td> <td>曇</td> <td>60</td> <td>21/18</td></tr>
<tr><td>名古屋</td> <td>曇</td> <td>50</td> <td>25/18</td></tr>
<tr><td>大阪</td> <td>晴</td> <td>30</td> <td>27/20</td></tr>
<tr><td>福岡</td> <td>曇</td> <td>40</td> <td>26/21</td></tr>
</table>
実際の表示
主要都市の天気予報
都市名天気降水確率気温(最高/最低)
札幌8021/14
東京6021/18
名古屋5025/18
大阪3027/20
福岡4026/21

一般的な視覚系ブラウザでは、表の罫線をセルごとに個別に表示します。スタイルシートを用いると、セル間の空白をゼロにして罫線を重ねて表示することができます。

スタイルシート
table { border-collapse:collapse; }
実際の表示
主要都市の天気予報
都市名天気降水確率気温(最高/最低)
札幌8021/14
東京6021/18
名古屋5025/18
大阪3027/20
福岡4026/21

テーブルによるレイアウトは、次のようなアクセス性の問題を抱えています。

表示に時間を要する

一般的な視覚系ブラウザでは、table要素の中身を全て読み込んでからディスプレイに表示されます。言い換えれば、中身を全て読み込むまではディスプレイに何も表示されません。特に、テーブル内に画像やスクリプトを指定している場合に顕著です。訪問者の立場で考えると、長時間全く何も表示されないよりも、少しずつ表示される方が安心できます。

ブロードバンドが普及しているとはいえ、地方を中心にナローバンド環境のユーザーも居ます(*3)。例えADSL環境であってもNTT局から遠く離れているために、実際の通信速度は1~2MB程度しかなく通信が不安定な環境も存在します。更に、テーブルには多くのタグを使用するためHTMLファイルの容量が大きくなる傾向があります。携帯電話環境の場合、アクセスしたページの容量で課金されることが多く訪問者に余計な出費をさせてしまうことになります。

文書構造が伝わらない
テーブルによるレイアウトは、table要素が有効な視覚系ブラウザでの閲覧を前提としているため、table関連要素をサポートしない携帯電話環境や、視覚的に閲覧できない音声ブラウザや点字ブラウザには文書構造が伝わらない恐れがあります。見出しリストを用いて記述することにより、これらの環境にも文書構造を的確に伝えることが可能になります。
【注釈】
スポンサーサイト

このページの一番上へ

リスト

テキストを箇条書きで指定する要素には、次の3種類があります。

ol要素

順番のある箇条書きを指定します。
順番のある箇条書きの一例
順番を示す記号には数字アルファベットローマ字の3種類があり、これらはスタイルシートで指定することができます。

ol{list-style-type:decimal;}
ol{list-style-type:lower-alpha;}(*1)
ol{list-style-type:lower-roman;}(*2)

リストの項目を指定するには、li要素を用います。

<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>

ol要素は、直接の子要素にli要素以外の要素を持つことができません。次の記述は間違いとなります。

<ol>
<li>リスト1</li>
<p>リスト1の説明文</p>
<li>リスト2</li>
<p>リスト2の説明文</p>
<li>リスト3</li>
<p>リスト3の説明文</p>
</ol>

このような場合にはdl要素を使うことができます。リストの順番を重要視する場合には、li要素の子要素としてp要素を用いると良いでしょう。

ul要素

順番のない箇条書きを指定します。
順番のない箇条書きの一例
順番を示す記号には白抜き丸四角記号なしの4種類があり、これらはスタイルシートで指定することができます。

ul{list-style-type:disc;}
ul{list-style-type:circle;}
ul{list-style-type:square;}
ul{list-style-type:none;}

リストの項目を指定するには、li要素を用います。

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

ul要素は、直接の子要素にli要素以外の要素を持つことができません。次の記述は間違いとなります。

<ul>
<li>リスト1</li>
<p>リスト1の説明文</p>
<li>リスト2</li>
<p>リスト2の説明文</p>
<li>リスト3</li>
<p>リスト3の説明文</p>
</ul>

このような場合にはdl要素を使うことができます。

dl要素

定義リストを指定します。
定義リストの一例
中身は語句及び語句の定義で構成されます。元来は語句の定義を指定するものでしたが、現在は広義に解釈してテキスト及びテキストの説明のように用いられます。

dt要素で語句を指定し、dd要素で語句の定義を指定します。dl要素は、直接の子要素にdt要素及びdd要素以外の要素を持つことができません。

<dl>
<dt>語句1</dt>
<dd>語句1の定義</dd>
<dt>語句2</dt>
<dd>語句2の定義</dd>
<dt>語句3</dt>
<dd>語句3の定義</dd>
</dl>

マーク付けの観点よりdt要素の中にh1~h6要素を含める事例が見られますが、dt要素は子要素にインライン要素しか含むことができません。また、h1~h6要素の中にdt要素を含むこともできません。

箇条書きの形式で指定可能なものについては、table要素の使用は推奨しません。ファイルの容量が大きくなる傾向があり、一般的な視覚系ブラウザでは要素の中身を全て読み込んでからディスプレイへの表示を開始するため、体感的にページが重く感じられることで訪問者にストレスを与える恐れがあります。

【注釈】

このページの一番上へ

連絡先

連絡先を指定したいときには、<address>タグを用います。

メールアドレスメールフォーム等、サイト管理人のへの問合せ先を示します。特に企業等の団体が管理するサイトの場合、その所在地や電話番号、担当者名等を記述します。

メールアドレスの公開は慎重に行ってください。悪質な業者による迷惑メール等の標的になる恐れがあります。専用のWebメールを取得して公開するか、メールフォーム(*1)を利用して対策を講じておきましょう。

多くの視覚系ブラウザでは斜体文字で表示されますが、日本語テキストの場合、その見栄えがよくありません。次のスタイルを適用すると良いでしょう。

address{font-style:normal;}

【注釈】

このページの一番上へ

連絡先、広告

copyright © 2005-2006 セロリ
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。