第1回 定義リストへのスタイルの付けかた
美しく洗練されたWebレイアウトを保つために、CSS(Cascading Style Sheets:カスケーディング・スタイル・シート)は非常に有効だ。このコーナーでは、4回に分けて、CSSのエッセンスをお伝えしていこう。初回のテーマは「定義リストへのスタイルの付けかた」。見た瞬間に内容が把握できるように、写真をうまく使う方法を考えた。
■POINT
■STEP 1
のようになる。これは、「<dl>~</dl>」が定義リストの範囲となり、リストの項目名は「<dt>」で、項目に対する説明文は「<dd>」でタグ付けする。できあがりのスタイルにタグの範囲を示したのが【図1】だ。
■STEP 2
ブラウズすると、項目に対して説明文が頭下げ(インデント)された状態になるだろう。
■STEP 3
ここでちょっとスタイルのことを考えてタグを修正する。このスタイルは項目を個別の囲みに入れるスタイルを取る。そこで「<dt>」と「<dd>」のセットは「<div>」タグで囲ってひとつのスタイルの範囲であることを示す必要がある。あと、画像はリンクを張って詳しい内容への入り口にしたいのでリンクタグも必要だ。ここまでを追加したソースを確認しておこう。
上記をブラウズすると【図2】のようになる。
■STEP 4
グレーの囲みスタイル、<div>箇所のポイントになる部分を説明した【図3】を見て欲しい。囲みのサイズや背景色はこちらで設定する。底辺にダークグレーのヘアラインを引いて、全体にちょっと固さを出している。右には2ピクセルのマージンを設けて、次の囲みと分けた。「<div>」は「float:left」にして囲みを並列させた。
画像「<img>」のスタイルだけ、例外的に「photo」というclassのセレクタを作ってスタイルを指定した。これは「<img>」をマークアップしている「<p>」に対して、スタイルを添付している時だけは写真上下左右のマージンを0にする指定を与えたいためだ。一応文字の回り込みを解除する「clear: both;」も入れておく。
マウスカーソルを写真に重ねている時だけ枠の色を変える効果も、「photo」クラスのリンク用スタイル定義箇所に指定しておこう。
今回の話はここまでだ。
次週へつづく
[プロフィール] やの・りん●北海道足寄町生まれ。女子美術大学芸術学部芸術学科卒。著書に『Webレイアウト見本帳』、『WEBレイアウト・セオリー・ ブック』(エムディエヌコーポレーション)がある。近著『デザインする技術』(エムディエヌコーポレーション)も好評発売中。身長 152.1cm。 |