第1回　定義リストへのスタイルの付けかた

テクノロジー

2006.6.28 WED

美しく洗練されたWebレイアウトを保つために、CSS（Cascading Style Sheets：カスケーディング・スタイル・シート）は非常に有効だ。このコーナーでは、4回に分けて、CSSのエッセンスをお伝えしていこう。初回のテーマは「定義リストへのスタイルの付けかた」。見た瞬間に内容が把握できるように、写真をうまく使う方法を考えた。

解説：矢野りん

スタイルを設定したHTMLの完成イメージ

■POINT

一般的にリンク先の内容を説明するような場合、文章で説明するより視覚情報を利用するのが機能的かつコンテンツの魅力にもつながる。写真入りのボックスを濃いグレーや黒の線で区切ってしまうと画面がうるさくなりやすいので、作例のようにライトグレーの地色に余白を加えたスタイルを使うとうまくまとめることができるだろう。囲みの背景に淡いグラデーションを使ってみるのもよい方法だ。また、写真の周囲に白い枠を設けているのは、矩形の連続が強調されすぎないように、写真の印象自体をほんの少し弱めるため。サムネイルの羅列などに使える技だ。

■STEP 1

最初にXHTML側の記述である「定義リストタグ」について説明しておこう。ごくカンタンな例を示すと、

のようになる。これは、「＜ｄｌ＞~＜/ｄｌ＞」が定義リストの範囲となり、リストの項目名は「＜ｄｔ＞」で、項目に対する説明文は「＜ｄｄ＞」でタグ付けする。できあがりのスタイルにタグの範囲を示したのが【図1】だ。

【図1】「ｄｌ」全体に、項目と説明が3つセットになっている

作例ではひとつの定義リストに「フィットネス」、「リラクゼーション」、「グルメ」の3つの項目を入れているというわけだ。

■STEP 2

では実際に作ってみよう。必要な情報を定義リストでマークアップするところから始める。

ブラウズすると、項目に対して説明文が頭下げ（インデント）された状態になるだろう。

■STEP 3

次は各項目の先頭に、内容に合った写真を入れてみる。写真の大きさはスタイルが付いた時を想定して作っておく。スタイルなしでブラウズした時、写真と項目名がくっついてしまわないように「＜ｉｍｇ＞」タグは「＜ｐ＞」の段落タグで囲っておいた。

ここでちょっとスタイルのことを考えてタグを修正する。このスタイルは項目を個別の囲みに入れるスタイルを取る。そこで「＜ｄｔ＞」と「＜ｄｄ＞」のセットは「＜ｄｉｖ＞」タグで囲ってひとつのスタイルの範囲であることを示す必要がある。あと、画像はリンクを張って詳しい内容への入り口にしたいのでリンクタグも必要だ。ここまでを追加したソースを確認しておこう。

上記をブラウズすると【図2】のようになる。

【図2】スタイルを定義しない状態のXHTMLの状態。スタイルを設定した後でも、スタイルシートを読み込まない設定にすれば、レイアウトは図の状態になる

■STEP 4

これでXHTMLの編集は完了だ。CSSの編集に移ろう。ここでは主にマークアップエレメントに対してスタイルを定義する方法をとった。

グレーの囲みスタイル、＜ｄｉｖ＞箇所のポイントになる部分を説明した【図3】を見て欲しい。囲みのサイズや背景色はこちらで設定する。底辺にダークグレーのヘアラインを引いて、全体にちょっと固さを出している。右には2ピクセルのマージンを設けて、次の囲みと分けた。「＜ｄｉｖ＞」は「float:left」にして囲みを並列させた。

【図3】「＜ｄｉｖ＞」のスタイルを設定する際、ポイントになる箇所

「ｄｔ」や「ｄｄ」のスタイルは文字と行間の指定だけを持たせている。

画像「＜ｉｍｇ＞」のスタイルだけ、例外的に「photo」というclassのセレクタを作ってスタイルを指定した。これは「＜ｉｍｇ＞」をマークアップしている「＜ｐ＞」に対して、スタイルを添付している時だけは写真上下左右のマージンを0にする指定を与えたいためだ。一応文字の回り込みを解除する「clear: both;」も入れておく。

マウスカーソルを写真に重ねている時だけ枠の色を変える効果も、「photo」クラスのリンク用スタイル定義箇所に指定しておこう。