CSSレイアウトのコツ 構造の確認

中級：このページの内容は次のような人向けです。

レイアウト

ページのレイアウトはブロック要素を並べていく作業です。どんなに複雑なレイアウトでもブロック要素の集合でしかありません。慣れてくるとページの構造が勝手に頭の中で浮かんできますが、それにも限界があります。特に他の人が作ったレイアウトが、どんな構造になっているのか理解するためにソースを目で追いかける作業は大変です。よね？

そういう時はCSSを使って要素に枠をつけてあげましょう。次のソースを<head></head>の間に追加すると、あら不思議。要素全てに枠線が表示されます。

<style type="text/css">
<!--
* {
	border: 1px solid #CC3333 !important;
	margin: 2px;
}
p {	background: #F7F49B!important; }
-->
</style>

「*」は特別なセレクタで全称セレクタと呼びます。これはページ中の全ての要素を指定するという意味ですので、タグでマークアップした全ての要素に枠線がつきます。

ついでにp要素は背景が黄色になります。サンプルではセレクタに「p」を使っていますが、これを「h2」や「ul」など確認したい要素に変更して構造を確認していきます。

例えば、今見ているページにこのスタイルシートを適用すると、こんな感じ。

テーブルレイアウトの場合は「*」を「table」や「ｔｄ」と書けば、どこがセル部分なのか確認できます。

知ってしまえば、なんてことないこのテクニック。レイアウト作成の際は、意外と時間短縮になりますので、お試しあれ。

一覧へ戻る