Home | 第86号 | 第87号 | 第88号 | 目次

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

Web作成支援

メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

＜第87号＞ 今週のおさらい
　　　　　　　　　　　　　 毎週金曜日配信　What's New 2004年3月6日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
　  ■ HTML講座  第30回 --- 上手なテーブルの表現
　　■ CSS講座　第８回 --- 余白 (margin)
◆ HTML講座 --- 上手なテーブルの表現
テーブルは、ある意味では非常に便利な要素です。単純な表組からレイアウトまで構築できるわけですから、使い勝手が良いものです。しかしながら、非視覚系ブラウザにも配慮し、十分に考え抜かれた設計が必要になります。
その点を踏まえて、読みやすく豊かな表現を設計するヒントになるテーブルについて説明します。
■ セルに関わる余白の設定
通常、視覚系 Webブラウザの初期値では、セルとセルの間には幾らかの余白が表示されます。例えば、
セルセルセルセル
セルセルセルセル
セルセルセルセル
セルセルセルセル
このように、各セルとセルの間に、予期しない余白が表示されてしまいます。
これでも普通の表組ならば問題になることはないと思いますが、もっと、はっきりと枠線を表示したい、あるいは線間に余分な隙間を無くしたい場合もあります。
そこで、セルとセルの間の隙間をコントロールする属性、あるいはセル内の余白 (一般的にはセルの上下) をコントロールする属性が用意されています。それを使うと、表現に差が出ます。
具体的な構文は以下のとおりです。
<table cellpadding="2" cellspacing="1" summary="Sample" border="1">
セルセルセルセル
セルセルセルセル
セルセルセルセル
セルセルセルセル
cellpadding --- セルの上下の余白を指定
cellspacing --- セルとセルの間隔を指定
いずれも、指定された数値はピクセル単位でレンダリングされます。各数値は任意に指定することができます。
ここでは、セルとセルの隙間 (線間) を 0 とし、セル内の上下の余白を２ピクセル分としています。先ほどの表組よりもすっきりした形で表現されるでしょう。
なお、各セル内の左右の余白の設定はスタイルシートを利用しないと実現できません。具体的なスタイルシートの構文は、
td { padding-left: 1em; padding-right: 1em }
このような設定で可能です。なお、padding属性については、次回の CSS講座で詳しく解説する予定です。
セルセルセルセル
セルセルセルセル
セルセルセルセル
セルセルセルセル
この表組では、上記のスタイルシートを適用し、各セル内の左右の余白を１文字分に設定して表現しています。かなり読みやすい表組になっているのが理解できると思います。
セルに関する余白をどのように取るのかで、同じ表組でもかなり違った表現になります。余白を上手にコントロールできれば、テーブルの達人に一歩近づくことでしょう。
■ セルのグループ化
表組の横方向のセル、あるいは縦方向のセルをグループ化し、構造的に表現する方法があります。
● col要素
縦方向の 「列」 をグループ化します。ただし、col要素だけでは構造化するわけではありません。
列をグループ化している図
左の図は、縦方向のセルの 「列」 を色別に示したものです。 col要素は、それらの列を、個々にグループ化させるために利用します。
また、 col要素の代表的な属性は以下のとおりです。
span属性でグループ化する列の数を指定された場合、例えばその列数を２としたとき、以下の図のように、２列まとめて同じグループに属することができます。
２つの列をグループ化している図
この図では、１行目と２行目をグループして表わしたものです。これを指定する col要素の構文は以下のとおりです。
<col span="2" id="yellow">
(col要素は空要素なので、終了タグは不要)
ここでは、 スタイルシートの yellow という識別子を２つの列に同時に指定しています。様々な組み合わせを利用することで、多様なテーブルのレイアウトデザインを構築することができます。
● colgroup要素
colgroup要素は、単一、あるいは複数の 「列」 に対して 「構造化」 したグループを定義するものです。 col要素は単独で利用される意味を持たない要素で、汎用的に利用されるブロックレベルの div要素と同じになります。
この colgroup要素内に、１つ以上の col要素を配置することができ、論理的な構造化を実現します。なお、規定されている属性は、col要素とまったく同じです。
● thead、tbody、tfoot要素
セルの横方向のグループ化をするための要素が、thead、tbody、tfoot などで、これらの要素は複数の 「行」 を囲むことが可能です。

見出し、フッタ、本体の各セルをグループ化している図

上記の図で示されているとおり、横方向の 「行」 をそれぞれの要素内で配置されるセルをグループ化したものです。具体的には、
thead --- 見出しの行となるセルのグループ化
tbody --- テーブル本体となるセルのグループ化
tfoot --- フッタの行となるセルのグループ化
なお、これらグループ化する要素を使う場合、基本的に、tfoot要素は、thead要素の直後に配置しなければなりません。また、tfoot要素、あるいは thead要素を配置した場合には、必ず tbody要素も同時に配置しなければなりません。
なお、Macintosh上で利用する MSIEブラウザでは、スタイルシートを利用して背景色などを指定した場合には、tfoot要素で正しく適用されない場合があります。これはブラウザ固有のバグではないかと推測しています。
各要素でグループ化したテーブルのサンプル
(詳しい HTML構文は、今週のメールマガジン 「第87号」 をお読みください。)
PageTop
◆ CSS講座 --- 余白 (margin)
余白を示すスタイルシートの margin属性は、コンテンツ領域の外側で描画されます。分かりやすく説明すると、以下の図のようになります。
コンテンツ領域から余白を示した図
コンテンツ領域から外側の領域に余白を設定している図です。margin属性はコンテンツそのものに余白が設定されるわけではありません。
margin属性で指定した余白には、基本的に背景色などはレンダリングされません。ただし、body要素の場合には、この限りではありません。
一般的な視覚系ブラウザでは、段落を表わす p要素や、見出しを定義する h1〜h6要素などでは、上下に１行分の空白を持って描画されます。この余白は margin です。何故ならば、作者が志うタイルシートを使って、任意にこの余白を取り去ることができるからです。
■ 個別に余白を設定する
コンテンツ領域は、上下左右を持っています。そのため、余白の設定はそれぞれを指定して行います。
また、余白を設定する場合の 「長さ」 の単位は、既に当メールマガジン 「第84号」 でお伝えした スタイルシートで扱う単位 を参照してください。
コンテンツを囲む要素に、個別で余白を指定する属性は以下のとおりです。
■ まとめて余白を設定する
個別に設定するよりも、上下左右の余白を一括で指定する方法もあります。単に、margin と指定するだけで、利用できます。
この場合、属性値として指定する値の数によって、余白の設定方法が異なります。具体的な利用法は以下のとおりです。
一括で余白を設定した場合、Macintosh版 MSIE では上下部分にしか適用されない場合があります。スタイルシートの実装状態が遅れているのだろうと推測します。
margin属性は、基本的に継承しません。ただし、dl、ol、ul などの要素では。子要素として配置する dd、li などの要素は、親要素の中で配置されることになり、その余白設定の影響を受けることになります。div要素の場合も同じです。

高齢者に配慮して背景色を設定しました。今後、順次他のページでも同じ背景色に設定していく予定です。もし、読みにくい、あるいは見えないなどという場合には、御一報いただけると大変助かります。

This page is Valid HTML 4.01! 初版公開日 2004年3月5日
Copyright（C） 2002-2004 banban@scollabo.com