ここではコーディングで必要な知識のひとつ、「ブロック要素」と「インライン要素」についてお話させていただきます。これを知らない方は、コーディングできっとこんな悩みを抱えているはずです。

• 中央寄せが効いたり効かなかったりすることがある。
• サイズが指定できたりできなかったりすることがある。
• marginが効くときと効かないときがある。
• paddingが効いたり効かなかったりする。
• とにかく良く分からないから無駄にdivを増やしたり力技でコーディングしている。

上記が該当する方にはとても役立つ内容になっているので、ぜひ目を通しておいてくださいね。

世の中には「女性」と「男性」がいるように、すべての要素は「インライン要素」と「ブロック要素」に分けることができます。（本当は少し違うのですが）まず、こんな風に覚えてください。

そして、インライン要素とブロック要素には、それぞれ効くプロパティと効かないプロパティがあります。そのため、デザインが効いたり効かなかったりしているのです。だから、この２つの性質を理解することで、スタイルシートのことがより深く理解できるようになります。

インライン要素とブロック要素というのは「display」というプロパティの値のひとつです。スタイルシートの中では次のように指定します。

display:block; /*ブロック要素*/

display:inline; /*インライン要素*/

それぞれの性質を見ていきましょう。

ブロック要素の特徴

ブロック要素は文字通り「ブロック」のような性質を持っています。

• サイズという概念があるので、幅と高さを指定できる
• 幅は指定しない限り横いっぱいに広がる（width:100%;）
• 前後の要素が改行されて積み上がるように配置される
• margin, padding, borderが指定できる

実際に見てみましょう。

See the Pen display_block by ken (@ken81) on CodePen.

各要素が横いっぱいに広がり、上下に積み上がっていますね。

仮に幅を100pxとした場合でも、ブロック要素の前後に改行が入るため要素が横に並ぶことはありません。

See the Pen display_block02 by ken (@ken81) on CodePen.

ブロック要素には、サイズが指定できるので、widthやheight, margin, paddingが指定できます。

ブロック要素の代表例

div, h1~h6, table, p, ul, ol, li, formなど。

インライン要素の特徴

• 改行しない限り左から右へ横に配置される
• 「サイズ」という概念がないので、widthやheightを指定することができない
• margin, paddingは効いたり効かなかったりするので非推奨
• ブロック要素のような四角い形状を持たないのでborderも効かない

ブロック要素を「段落」にたとえるならば、インライン要素というのは「文章」のようなものです。ブロック要素の中にインライン要素を子要素として入れることはあっても、その逆はないと考えておきましょう。

margin, paddingは効く場合があることも知っていますが、「効かないもの」と覚えておきましょう。ブラウザによって表示に差が生まれる可能性のあるもの、表示が不安定なものは誰のためにもならないので使用はオススメできません。

先ほどの要素をインラインに変えてみました。

See the Pen display_inline by ken (@ken81) on CodePen.

要素が横に並ぶようになりました。

インライン要素の代表例

span, a, img, strong, bなど。

例外：インライン要素なのにサイズ指定ができる「置換要素」

先ほど、インライン要素の代表例のところで、img要素を上げていましたが、このimg要素に関しては、インライン要素であるにも関わらず、
width, height, marginなどの指定が可能です。このような要素を「置換要素」と呼びます。確かに、画像には横幅や高さがありますからね。

インライン要素とブロック要素の間の子「inline-block」

冒頭のところで、すべての要素が「インライン要素」と「ブロック要素」に分類されます的なことを言いましたが、あれは嘘です。本当は他にもいろんな種類があります。

もうひとつだけ紹介させていただくとしたら、「インライン要素」と「ブロック要素」の間の子的な存在である「inline-block」という値です。

横に配置されるブロック要素、サイズが指定できるインライン要素みたいなものです。よく見かけるパーツとしては、ホームページのグローバルメニューが代表的です。サイズを持ったブロック状の形状を保ちながら、横に配置させたいときなどにinline-blockが使われます。

最後に、ボックス要素とインライン要素を表でまとめてみたので参考にしてください。

	ブロック要素	インライン要素
配置	上から下へ	左から右へ
width / height	指定できる	指定できない
margin	指定できる	左右のみ
padding	指定できる	表示が不安定
中央寄せの方法	margin:0 auto;	text-align:center; （親のブロック要素に対して）