display: block

初めにブロック要素を簡単に説明すると、ページ上で端から端までひと塊で表示され、且つ前後に改行が入る要素。このグループに入るものとしては div, h1, p などがある。イメージとしては積み木を積み上げていく様子を浮かべると良いかもしれない。難しく言うと文章を構造化するためのパーツといったところか。ちなみにこの文章は <p>〜</p> で囲まれた paragraph (段落、パラグラフ) というブロック要素だ。
インライン要素は a, span, strong, img などがこれにあたり、タグで囲んだ範囲だけが対象となり、ここには高さや幅などのプロパティは使用できない。

両者の違いを見分けるには、要素に背景 (background-color) を設定してみると良い。要素に背景を設定するとその要素のボックスがどのように生成されているか把握できる。
以下は dt 要素と span 要素にカラー設定したサンプル。

ブロック要素のサンプル

<p>タグで囲まれるパラグラフはブロック要素の一つ

インライン要素のサンプル

<strong> は 強調 する箇所に使用するインライン要素

ブロック要素とインライン要素について分からなければ Web 上で「ブロック要素とインライン要素」をキーワードに検索くだされ。
で、本編。display: block を指定した要素は全てブロック要素として扱われるので、高さや幅などのプロパティを利用することが可能になる。う〜みゅ、よく分からない説明だなと自己反省。

display: block のサンプル

どういった場面でこれが有利なのかを具体的に挙げろと言っても、あまり良い例を思いつかないのだが、あえて（無理やりか）挙げると次のようなものか。

1. メニューアイテムの a 要素

縦に延びるメニューアイテムの a 要素に背景色や hover で背景色を設定すると、文字幅分だけに効果が現れる。だが、これだと文字数によって効果が変わってしまうので、不揃いで格好が悪い。

• ホーム
• お問い合わせ
• リンク集

そこで a 要素に display: block を設定する。すると width プロパティが利用できるので width: 100px に幅を固定してみる。
CSS は a { display: block; width: 100px; }

• ホーム
• お問い合わせ
• リンク集

さらに padding を使って左側に余白をもたせるとこんな感じ。

• ホーム
• お問い合わせ
• リンク集

本来インライン要素の a には幅や高さを設定することはできないのだが、ブロック要素にすることで実現させたというサンプルです。これだけなら別の方法で実現可能なのだが、そこはサンプルということでゴニョゴニョ。
このソースは以下の通り。

HTML

<ul>
	<li><a href="doko">ホーム</a></li>
	<li><a href="soko">お問い合わせ</a></li>
	<li><a href="asoko">リンク集</a></li>
</ul>

CSS

ul {
 list-style-type: none; /* 先頭のマーカーを非表示にする */
 }
li a:link {
 text-decoration: none;
 color: #003366;
 background-color: transparent;
 }
li a:visited {
 text-decoration: none;
 color: #669999;
 background-color: transparent;
 }
li a:hover {
 color: #f5fffa;
 background-color: #708090;
 }
li a:active {
 text-decoration: none;
 color: #333366;
 background-color: #ccccff;
 }
li a {
 display: block; /* a をブロック要素にする */
 width: 100px; /* ボックスに幅を与える */
 padding-left: 8px; /* ボックス内の左側に空間を与える */
 }

2. 回り込みを解除するために display: block を利用する

clearfix という俗称で有名な、float プロパティで回り込みを設定したブロックを、display: block を利用して解除する方法がある。もしかしたらこれが最も利用価値が高いかもしれない。

float プロパティで左右に回り込ませたブロックを解除するには、回り込ませたくない要素に clear プロパティを設定するのだが、これがなかなか悩みどころだ。
HTML の参考書やウェブ上の参考サイトで良く見かけるのは、「<br>」に clear: both を設定する方法だが、CSS に明示的な解除要素が存在しないため、しかたがないとは言え、br の使い方としてはどうかなと思う。
CSS 3 あたりでフロートを解除する空要素が採用されないものだろうか。

無いものはしかたがない。br をフロート解除に使うよりはマシかなということで、厳密に言えば、これもしかたがない方法かもしれないが、display: block をこういう風に使ってみた。
サンプルは左側にある画像に説明的なテキストを回り込ませる、一般的な「回り込み」の利用方法。

イメージに float: left を一般的な設定での実験

... このパラグラフに clear プロパティを設定することで、float を解除している...

この CSS の基本はこんな感じ。

img {
 float: left;
 border-width: 0;
 }
p.clear { /* フロートクリアーのためのパラグラフ用 */
 clear: both;
 }

display: block を利用した回り込み解除の実験

p タグや br タグに float: clear を設定した要素をつかってフロートを解除するのだが、いまいちスマートじゃない。ということで、display: block と clear: both と after: を組み合わせた回り込みと解除はこんな感じ。

... このパラグラフには float: clear を設定していない ...

この CSS の基本はこれ。

img {
 float: left;
 border-width: 0;
 }
p:after { /* The quick brown fox... のパラグラフに適用 */
 content: "";
 display: block;
 clear: both;
 }

２つのサンプルを見比べると分かると思うが、両者では div タグの生成面積 (グレーの背景) が違っている。上のサンプルでは行数に連動した幅で生成されているが、下のサンプルは画像の大きさ (160px 分) が確保されている。これは after で生成されるブロックがパラグラフの後に追加されるため、クリアされるポイント=画像の下端までパラグラフのブロックが存在することになるから。
この after で追加された “見えない” オブジェ (ブロック) が clear 要素を持つことになる。その副作用からフロート画像＋パラグラフの塊に続くパラグラフとのマージンが若干広くなる。この広くなった部分に after のブロックが存在する。

この方法を使い複雑な CSS 設定をする場合は「before」と「after」の仕様を理解して良くテストした方が良い。複雑になればなるほど結構ハマる。う〜ん、これも分かりにくい説明か…m(_ _)m
無理やりまとめで、この方法のポイントはこれ。

• イメージには float を設定する
• p には :after を設定して contents は "" で何も生成しないようにする
• p に display: block を追加する (after で生成するオブジェをブロック要素にする)
• p に clear: both を追加する (after が生成するオブジェに値を与える)
• margin や padding, フォントカラーなど、プロパティーを加えていく場合は良く検証すること
• Safari も Opera もヨッケーだが IE は全くダメ。
• 最も参考になる英語サイト: How To Clear Floats Without Structural Markup
• 最も参考になる日本語サイト: clearfixの決定版を作る

3. dl 要素に display: block を利用して compact 風な結果を得る

マニュアル的なサイトの制作で悩むのが性能一覧のようなものではないだろうか。多くの場合はテーブルでも良いのだが、テーブル本来の使い方ではないので、できれば避けたい。こういうケースには display プロパティの compact や run-in が適切なのだが、両プロパティに対応しているブラウザは Opera のみ、Safari は run-in だけで Firefox 3 はどちらも未対応なので、Firefox を基準にしたウェブデザインでは利用できない。もちろん IE は眼中に無しですが(笑)。

これはウチ (どこ; で扱っている商品のクイック製品情報パート。このような場合、一番理に当たっているのは dl 要素を使うことだろう。そのサンプルはこんな感じ。

実験 1、dl を使った無難な方法

PRODUCT:

ADVANTAGE ⁄ SHOWA RS-X Rear Twin Suspension

MODEL(S):

Refer to the list below

PRICE:

$1,180.00

OPTION:

Custom Spring Color: Up to $200.00

Suspension Length and Spring Rate: ASK

15mm Long Eye: $180.00

20mm Long Eye: $196.00

これはこれで構わないのだが、縦長になることを抑えたいことと、レイアウト目的から、こんな風にしたいと思うことがある。この場合 compact が使えないので、ややこしくしたくないということで table か…という選択肢になる。

実験 2、table を使った、やりたくない方法

PRODUCT:	ADVANTAGE ⁄ SHOWA RS-X Twin Rear Suspension
MODEL(S):	Refer to the list below
PRICE:	$1,180.00
OPTION:	Custom Spring Color: Up to $200.00
	Suspension Length and Spring Rate: ASK
	15mm Long Eye: $180.00
	20mm Long Eye: $196.00

しかし、テーブルでのレイアウトは避けたい。そこで dl の子要素 dt に float: left を、dd に display: block と after を利用した clear 使ってみる。
サンプルはブロック要素が分かりやすいように、dt には紫系の背景を、dd には黄色系の背景を設定して、視覚的にブロックの大きさが分かるようにした親切デザイン (ヲ

実験 3、絶対に table を使わずにレイアウトしてやる

PRODUCT:

ADVANTAGE ⁄ SHOWA RS-X Rear Twin Suspension

MODEL(S):

Refer to the list below

PRICE:

$1,180.00

OPTION:

Custom Spring Color: Up to $200.00

Suspension Length and Spring Rate: ASK

15mm Long Eye: $180.00

20mm Long Eye: $196.00

この CSS の基本はこれ。

dl {
 margin: 12px 0 12px 42p; /* これは環境に合わせて書き換える */
 }
dt {
 float: left;
 width: 104px; /* 幅は内容に合わせて妥当なサイズにする */
 }
dd {
 margin-bottom: 0.2em;
 margin-left: 106px;/* この設定は dt の幅プラス */
 }
dd:after { /* フロートクリア必須 */
 content: "";
 display: block;
 clear: both;
 }

dt に font-weight: bold を指定しているので dt と dd それぞれのボックスサイズと上下の padding に微妙な違いがあるようだが、細かいことは見なかかったことにして、このサンプルでのポイントは次の通り。

• dt 要素にプロパティ width で任意の幅を設定する
• dt 要素に float: left を設定して dd 要素を右側に回り込ませる
• 便宜上の列セット（dt と dd のセット）の上下 margin は、dt では設定せず dd で設定する
• float の回り込みを解除するための CSS は :after を使った display: block を利用する
• Safari や Opera も大丈夫だが IE はあきませんねぇー困ったものだ。

Library

• Home
• ってもzilla Archive
• CSS Test Cont.

Selector Group

• display index

• none
• block
• inline
• inline-block
• list-item
• table
• inline-table
• Other table propaties