HTMLのタグには特性としてブロック要素かインライン要素か決められています。それぞれの特徴を知っておかないと、レイアウトが難しくなります。

ブロック要素とは？

特徴1:必ず改行される

ブロック要素は積み木・ブロックのように縦に積み重なっていく特性を持っています。

例えばブロック要素であるpを使った下記コードはどうなるでしょう。

ブロック要素1


ブロック要素2


ブロック要素3


ブロック要素4


ブロック要素5

結果はこうなります。

ブロック要素1
ブロック要素2
ブロック要素3
ブロック要素4
ブロック要素5

これを横に並べるにはCSSが必要になります。

特徴2:余白が指定できる

余白を設定するCSSにmarginとpaddingがあります。ブロック要素のタグにはこの二つの余白を指定することができます。

marginとpaddingの違いはわかりにくいですが、marginが外側の余白に対してpaddingは内側の余白になります。

イメージとしてはpaddingを指定するとコンテンツが縮まって余白ができ、marginを指定するとコンテンツが広がって余白ができます。

特徴3:width、heightが指定できる

ブロック要素のタグには横幅と縦幅を指定するCSS、width、heightが使用できます。

ブロック要素のタグ

頻繁に使うタグの中でブロック要素のものを紹介します。

div
p
h1〜h6
ul
ol
li
form
dl
table

インライン要素とは？

特徴1:改行されない

ブロック要素は必ず改行される特徴がありましたが、インライン要素は改行されない特徴があります。

例えばインライン要素であるspanを使った下記コードはどうなるでしょう。

ハンバーガー
サンドウィッチ
ホットドック

結果はこうなります。

ハンバーガーサンドウィッチホットドック

特徴2:余白の指定に制限がある

インライン要素には余白に制限があります。

まずmarginは左右だけしか指定できません。上下を指定しても反映されません。

次にpaddingは上下左右指定できますが、上下はすこしくせがあります。

例を見てみましょう。わかりやすく、CSSを指定します。


ハンバーガー
サンドウィッチ
ホットドック




ハンバーガー
サンドウィッチ
ホットドック

ハンバーガーサンドウィッチホットドック
ハンバーガーサンドウィッチホットドック

これにpaddingを指定してみましょう。


ハンバーガー
サンドウィッチ
ホットドック




ハンバーガー
サンドウィッチ
ホットドック

ハンバーガーサンドウィッチホットドック
ハンバーガーサンドウィッチホットドック

左右は余白の分、周りが動いてくれますが、上下のpaddingは周りが動かずにかぶってしまいます。

つまりまとめると、インライン要素の余白はmarginもpaddingも左右しか使えないということになります。

インライン要素のタグ一覧

頻繁に使うタグの中でインライン要素のものを紹介します。

a
span
strong
font
button

まとめ

どっちの特性ももつタグ

画像を表示するタグでimgがある。imgタグはインライン要素ではありますが、width、heightが指定できます。

他にもinputタグやtextareaタグは同じようにインライン要素でありながらwidth、heightが指定できます。

もちろん並べて書けば、横並びになります。

これらの特性はCSSで変更ができる！

HTMLのタグはブロック要素とインライン要素に分類されるとわかったと思います。このブロック要素、インライン要素はCSSで変更することができます。

例えばdivタグはもともとはブロック要素ですがCSSで

display:inline;

と入れてしまえば、インライン要素に変更することができます。逆にインライン要素のものは

display:block;

を入れるとブロック要素に変更することができます。

imgタグのようにインライン要素でありながらwidthやheightも指定したい、marginやpaddingも指定したい時は

display:inline-block;

でインラインブロック要素に変更することができます。

使い方

ではこれらを理解するとどういう時に役に立てるか、どんな使い方をするか紹介します。

例1：リンクボタンを作る

リンクはaタグで作りますがaタグはインライン要素なので高さの指定ができません。範囲が狭いリンクはクリックやタッチがしにくいですよね。

例えば以下の二つのリンクはどっちがクリック(タッチ)しやすいですか？

リンク

リンク

おそらく後者のほうが押しやすいと思います。

後者のaタグにはCSSで

display:block;
padding:30px;
width:200px;
text-align:center;
background:#668ad8;
color:#fff;

が適用されています。

CSSはまだ勉強していないので何が書いてあるかわからないと思いますが、やってることはインライン要素をブロック要素に変更し、幅の設定や装飾をしているだけです。

リンクの幅を自由自在に変更したいときはブロック要素に変更しましょう。

試しに作ってみよう！

メニューバーの作成

ブロック要素、インライン要素を理解していると例えばメニューバーを作れるようになります。

下記のようなulで作ったリンクを

下記のようなナビゲーションに変更できます。

CSSはまだやっていないため、おまじないだと思ってやってください。

ではまず、HTMLを入力してWebブラウザで確認してみましょう。

メニュー練習

これを確認すると下記のようになると思います。

今回使っているタグはaタグ以外、全てブロック要素になります。そのため、メニュー毎に改行されています。

これを横並びにするためにはCSSを使います。

また、リンク(aタグ)の大きさを広げるために、aタグをブロック要素にする必要があります。それもCSSでやります。

おまじないだと思って下記コードを追加してみましょう。





メニュー練習

CSSを勉強した後、改めて考えてみましょう。