螺旋デザイン｜はじめてのCSS　基礎知識：インライン要素とブロック要素

基礎知識：インライン要素とブロック要素

2008/09/01 10:41

トモ・リーン: 画像置換やfile8の所でも出てきたインライン要素とブロック要素だけど、この機会にもうちょっと細かく説明するわよ！

ケンジ: おう〜〜〜！

トモ・リーン: まずはインライン要素。

インライン要素

文章の一部分の要素。ノートに書いたマーカーの様な感じです。

表示例: .marker {background-color: yellow;} 背景に色指定をしているだけの「marker」を代表的インライン要素のspanに適用させてみます。バックが黄色くなっているので、ウィンドウの幅を広げたり縮めたりして表示を確認してください。（※IE6の方はFirefoxなど他のブラウザで見ると、ウィンドウ幅を変えることができますよ）
妖精とは、主にヨーロッパの民間伝承における超自然現象や不思議現象などの、非日常的存在のことで、日本における妖怪に当たる。英語 fairy の訳語として最も一般的である。出典: フリー百科事典『ウィキペディア（Wikipedia）』
出来る事: 連続して横に並べる事ができます。
paddingやmarginも設定できます。
出来ない事: 高さや幅は設定出来ません。

インライン要素のタグ

他にもありますが、XHTMLで使用するものを取り上げておきます。

span
a
strong
em
code

インライン要素のタグでもブロック要素の表示に変更

スタイルシートで制御出来ます。: display:block; これでOKです。
リンクテキストをボタンにしたい場合、aタグに適用したりします。

ケンジ: ふむふむ！

ケンジ: インライン要素は理解したぜ！
span { display:block; }とか見かけたら爆笑したらいいんだね・・・。

トモ・リーン: はじめから"ブロックで意味の無いタグ"の「div」を使えよ！ってことよね。

ケンジ: そうそう。

トモ・リーン: じつはこれねぇ、HTMLの仕様上、仕方なくすることがあるわ。

ケンジ: ええ？？

トモ・リーン: HTMLには仕様上、ある要素の中にdivタグやpタグが入れなれない、とかあるのよ・・・。
よくあるのがh*タグの中にデフォルトでブロック要素のタグは入れられないのよ。
だから<h1>見出し<div></div></h1>とかダメなのよね。

ケンジ: ってことはh*タグの中でデザイン上仕方なくブロック要素を入れたい場合とかは、
<h1>見出し<span></span></h1>として、
CSSではspan { display:block; 背景画像指定など; }
とやることもあるんだね・・・。

トモ・リーン

そうなのよ・・・。
うっかりh*タグの中には色々入れてはいけないタグがあるから、コーディングが終わった時点でDWの「バリデータ」でチェックするといいわよ。
他の仕様に合っていない記述もチェック出来るのでオススメね！

DWのバリデータはこんな感じで使えます。

F7を押す
出てきたウィンドウの「バリデータ」タブをクリック
左上の再生ボタンっぽいものを押す
チェックが開始される

トモ・リーン: 次はブロック要素。

ブロック要素

エリア表示的なもの。レイアウト的には積み木を扱っているような感じです。

表示例: .marker {background-color: yellow;} 背景に色指定をしているだけの「marker」を代表的ブロック要素のdivに適用させてみます。バックが黄色くなっているので、ウィンドウの幅を広げたり縮めたりして表示を確認してください。（※IE6の方はFirefoxなど他のブラウザで見ると、ウィンドウ幅を変えることができますよ）

妖精
とは、主にヨーロッパの民間伝承における
超自然現象や不思議現象などの、非日常的存在のこと
で、日本における妖怪に当たる。
英語 fairy の訳語として最も一般的である。
出典: フリー百科事典『ウィキペディア（Wikipedia）』
divの位置はインラインの項目のspanと同じ箇所に付けているのですが、全く表示が違いますね。
ブロック要素は他にも特徴的な挙動があります。
自動的に改行される: 横に並べたいときは、floatを使用してください。
詳しくはfile10. レイアウトを組んでみる！　～floatについて～をご覧ください。
通常は横いっぱいに広がるが、フロートを付けると内容に合わせたサイズに縮む: floatは付いていません。
内容の幅が少ない場合+float無のサンプルです。

float:left;を付けています。
内容の幅が少ない場合+float有のサンプルです。

float:left;を付けています。
内容の幅が大きい場合+float有のサンプルです。
【幅広げ用テキスト】妖精とは、主にヨーロッパの民間伝承における超自然現象や不思議現象などの、非日常的存在のことで、日本における妖怪に当たる。英語 fairy の訳語として最も一般的である。出典: フリー百科事典『ウィキペディア（Wikipedia）』
幅を設定すると、フロートの有無、内容の幅に影響されず、指定した幅になる: floatは付いていません。
width:50%;を設定。
内容の幅が少ない場合+float無+幅指定有のサンプルです。

float:left;を付けています。
width:50%;を設定。
内容の幅が少ない場合+float有+幅指定有のサンプルです。

float:left;を付けています。
width:50%;を設定。
内容の幅が大きい場合+float有+幅指定有のサンプルです。
【幅広げ用テキスト】妖精とは、主にヨーロッパの民間伝承における超自然現象や不思議現象などの、非日常的存在のことで、日本における妖怪に当たる。英語 fairy の訳語として最も一般的である。出典: フリー百科事典『ウィキペディア（Wikipedia）』

ブロック要素のタグ

他にもありますが、XHTMLでよく使用するものを取り上げておきます。

div
h1〜h6
table
th
td
p
hr
dl
dt
ul
ol
li
from
address

ブロック要素のタグでもインライン要素の表示に変更

スタイルシートで制御出来ます。: display:inline; これでOKです。
リストの内容を横並びにしたいときにliタグに適用したりします。

ケンジ: おっけー、おっけー！

トモ・リーン: 実はインライン要素だけどブロック要素ぽいのもあります。

ケンジ: 何それ。
気持ち悪いなぁ・・・・・・。

置換インライン要素

文章の一部分の要素。ですが、箱っぽいです。

出来る事: 連続して横に並べる事ができます。paddingやmarginも設定できます。
高さや幅も設定出来ます。（非置換インライン要素は高さ・幅の設定は出来ません）

置換インライン要素のタグ

他にもありますが、XHTMLでよく使用するものを取り上げておきます。

img
input
textarea
select
button

ケンジ: 置換インライン要素って一瞬キモイ感じがしたけど、結構メジャーどころのタグだね。

ケンジ: 置換インラインとブロック要素も理解したぜ！
div { display:inline; }とか見かけたら爆笑したらいいんだね・・・。

トモ・リーン: はじめから"インラインで意味の無いタグ"の「span」を使えよ！ってことよね。

ケンジ: そうそう。

トモ・リーン: じつはこれねぇ、IE6のバグ対策でやる事があるのよ。

ケンジ: ええ？？

トモ・リーン: IE6にはフロートをかけたらマージンが時々２倍になるって言うバグがあるのよ・・・。
で、それを直すためには何故かdisplay:inline;とすると正しいマージンになるのよね。
他のブラウザに効いてしまったら嫌だからCSSハック（アンダースコアハック）を使ってIE6にしか効かないように「_display:inline;」って書くわね。