第8回 CSS余白設定方法のおさらい
CSSだろうとテーブルレイアウトだろうと、見かけの美しさは余白の取り方が左右するものだ。各要素の余白設定方法を、囲みコラム的なレイアウトを例におさらいしたい。次に続く知識でもあるので、しっかりと把握しておいて欲しい。
解説：矢野りん
■POINT
本スタイルの特徴は透明感。背景画像は同じ色の矩形を３つphotoshopのレイヤー効果で「乗算」して作成している。これで透明なフィルターが重なり合ったような雰囲気が出来るのだ。ついでに３つのレイヤーを重ねる時、それぞれの中心を微妙に左右にずらしているのもポイント。こうしないと、妙に左右対称な図形になってしまい、バランスが悪くなってしまう。
今回のスタイル完成画面
■STEP 1
CSSとは関係ないが、背景画像の作成方法を少し詳しく説明しておこう。パターン付きの背景は一番下のレイヤー。そこに乗算して矩形レイヤーを足していく。作業の流れは【図1】のようになる。
【図1】背景画像の作成手順。単に矩形を乗算して重ねただけだが、彩度の高い配色なので透明感があるように見える
■STEP 2
作例のコラム欄は、見出しの日付と、各項目群（リスト）を、１つの＜div＞におさめたもの。まったくひねりのないソースになっている。
【ソース１】各項目群（リスト）を＜div＞におさめたソース
とくに珍しい工夫が必要なCSSではないが、余白のコントロールがキモになるスタイルというわけで、冒頭で以下の宣言をしておく。
【ソース２】余白のコントロールを宣言するソース
これは全要素の余白設定をリセットする記述だ。この宣言で設定をリセットするのがCSSの基本でもある。
■STEP3
コラム全体の＜div＞は、スタイルシート上で高さ250、幅480ピクセルの表示領域を与えた。さらに、左側には40ピクセルの余白を与えておく。これは背景画像の左端に、タイトルのテキスト先頭がくっつかないようにするため。タイトルテキストに頭下げの指定をするよりも、囲みそのものの余白を定義するほうがコントロールしやすい。padding-topについても同じ理由だ。
【ソース３】タイトルのテキスト先頭がくっつかないようにするためのソース
＜h2＞でマークアップした見出しの日付は、下の余白だけを設定している。
【ソース４】見出しの日付下の余白ソース
STEP4
次のリストは、liの下に6pxの余白をとって行間とし、次に左側に大きな余白を取って見出しとのバランスを取った。見出しが目立つレイアウトでは、見出し以下のブロックが見出しのちょうど真ん中くらいに揃うようにレイアウトすると、洒脱な感じになるのだ。【図２】を参考にして、【ソース5】を見て欲しい。
【図２】各余白設定を整理した図
【ソース５】各余白設定を整理したソース
次回へつづく
 |
［プロフィール］ やの・りん●北海道足寄町生まれ。女子美術大学芸術学部芸術学科卒。著書に『Webレイアウト見本帳』、『WEBレイアウト・セオリー・ブック』（エム ディエヌコーポレーション）がある。近著『デザインする技術』（エムディエヌコーポレーション）も好評発売中。身長 152.1cm。 |
