ブロックとインラインについて

今までのHTML制作では、ブロックとインラインについてはあまり意識されてきませんでした。デザインありきの作り方で、デザインを表現する上で適切なタグが選択されてきました。しかし、最近になってSEOやアクセシビリティの重要性が強調され、「検索サイトが見て理解できる文書構造が明確なページ」が重要視されるようになりました。HTMLの制作は、文書構造として適切なタグを使い、CSSで見た目をコントロールするというやり方に変わってきています。そうした中、ブロックとインラインの表示の切り替えは、デザインをCSSでコントロールする上で便利な手法として広く使われるようになっています。

ブロックとは「まとまり」を意味します。段落（p）や表（table）、見出し（h）、リスト（li）など、文書構造の一つの「まとまり」を意味する要素を一般的にブロック要素と呼びます。インラインとは「文中」を意味します。リンク（a）や画像(img）など、「文中」に登場するマークアップを一般的にインライン要素と呼びます。

ブロック要素はほかのブロック要素と分離させるために改行されます。インライン要素は改行されません。ブロック要素は文を囲うため、文章の外にpadding（パディング）とmargin（マージン）をとることができます。インライン要素は文中の文字にマークアップされるため、paddingやmarginをとることができません。そのため、背景色を指定した場合、ブロック要素の場合、文字とpaddingの部分が色づけされますが、インライン要素の場合、文字の部分にだけ色がつきます。

ブロックとインラインの表示はCSSのdisplay指定で切り替える事ができます。ブロック要素を改行を加えずに連続して表記したい時は、display:inline;と指定する事でインライン要素のように表示させることができます。逆にインライン要素を一つのまとまりとして見せたい時はdisplay:blockと指定する事でブロック要素のように表示させることができます。

ブロックとインラインの表示設定をうまく切り替えて適用させると、複雑なレイアウトをシンプルなHTMLで表記できるようになるので非常に便利です。たとえばアンカーリンク（a）を引いた文をボタンのように使いたいときに、display:blockとして長方形のブロックのように使う事ができます。また、背景色を文字より広めに付けたい場合は、display:blockとしてpadding属性を加えることで背景色の及ぶ範囲を広げる事ができます。

Comments

[投稿情報: michiyo]

ブロックとインラインの違いをこんな風にきちんと整理して考えないまま、何となーく使っていました。改めて、違いを理解できました、ありがとうございます。

ところで、ブロックちゃんはいい感じですね。その親友はインラインちゃんだったりするのでしょうか。

[投稿情報: 山口]

michiyoさん、いつもありがとうございます。山口です。
自分で書いといてなんですけど、この話分かりにくいですね。はははは・・すみません。Web Ideaのページは、HTML的な話よりももっとソフトな面、文章の作り方とかアイデアの練り方とかを取り上げていきたいと思いつつ、なかなかコンテンツが作れません。

とりあえず内容とイラストどちらかでも楽しんでいただければ幸いです。
インラインちゃんは鉄道好きの女子高生です。双子です。仲良しです。

[投稿情報: まーしー]

ブロックとインライン。わかったようで全然わかってないみたい。
ナビのとこをブロックにすると横並びは不可能なのかな。
あと一歩でメモログさんの様になるんだけどな～。
ってナビだけですが。画像でやれば早いんだろうけど。。。

[投稿情報: 山口]

こんにちはー、山口です。
メモログのナビは、display:blockにして、float:leftで回り込み指定しています。これで横並びになります。

詳しくはCSSファイル（
http://memolog.jp/styles-site.css
）をご参照あれ。

[投稿情報: まーしー]

うむむ、、、（泣
float:left
はできますね。なんで
float:right
はできないんだろ？？？
うーむ、、、頭固いのかな。。

[投稿情報: 山口]

こんばんはー、山口です。
float:rightでもできるはずですよ。たぶん。
実は違うところのCSSの指定が問題になっていた・・という場合もよくありますので、不要だと思うCSSを削ってみると良いかもしれません。

ボックスの幅や位置が決まっていれば、たとえばfloat:leftで、margin-left:200px;とすることで、右揃えのように見せる事もできます。

float指定は意図通りに回り込んだり回り込まなかったりするので、けっこう悩みのタネです。最初のうちは色々試してみて、一番具合の良いものを選んでいくのが良いと思います。