CSSの基本！ブロックとインラインをマスターしよう

こんにちは朱夏です。

今回は、CSSのブロック、インラインについての話です。

朱夏

div要素って横に並べる事出来ないのかな？

中央寄せとかも思ったように出来ないしどうなってるの？

学習を始めたばかりの頃に誰もが一度は直面する問題かと思います。
ブロックとインラインについて理解を深めれば、この問題も解決する事が出来ます。

それではいってみましょう。

ブロックとインラインって何？

先ずはブロックから。

ブロックは、その要素が一つの塊として扱われます。
大きな特徴として、ブロックはそれぞれに改行が入るため、横並びになる事がありません。
どんどん盾に積みあがっていくイメージですね。

次はインラインです。

縦横のサイズを調節する事が出来ないというのが大きな特徴です。
これは要素内のテキストのサイズなどに依存することになります。
marginやpaddingで横幅の余白は調節できますが、縦幅については上下の要素に干渉してしまうため、思った通りの余白を確保することは出来ません。

その代わりと言っていいのか解りませんが、中央寄せプロパティの「text-align: center;」などを使う事が出来ます。

ブロックのタグとインラインのタグ

HTMLのタグのうち、bodyタグの中で使われるものはブロックかインラインのどちらかがデフォルトで適用されています。

HTML5では使われなくなってしまいましたが、ブロック要素、インライン要素と呼ばれていたものです。

ブロックタイプのタグで代表的な物は以下になります。

• <h1></h1>
• <div></div>
• <p></p>
• <ul></ul>

h1についてはh1～h6までの見出しタグ全てブロックタイプになります。

続いてインラインタイプは以下の様なものがあります。

• <a></a>
• <img>
• <span></span>
• <strong></strong>

テキストや画像などのコンテンツに直接使うタグが多いですね。
これらの特徴を理解して使い分けると、デザインを作りやすいです。

ここまでの解説を聞いて、「じゃあdivは横並びに出来ないの？」と疑問に思うかもしれません。
大丈夫です。
次はこの問題を解決してくれる方法を説明します。

便利なインラインブロック

CSSで指定できるdisplayプロパティの値には「inline-block」というものがあります。
これは「インラインの様に扱えるブロック」になります。

本来横並びに出来ないdivタグのブロックを横に並べる事が出来ます。
更に、通常のインラインと違い、縦横の幅を自由に調節する事が可能です。

正にインラインとブロックのいいとこ取りなのです。

あとがき

というわけで、今回はインラインとブロックについて解説してみました。
今回のまとめはこちら。

• ブロックタイプは改行される
• インラインタイプは改行されない
• インラインブロックはいいとこ取り

それぞれの特徴を理解して、思い通りにデザインしていきましょう。
そしてここぞというときにインラインブロックを使って自由度を上げていきましょう。

今回はここまでです。
次回もよろしくお願いします。