コーディング犬に聞く：「display:blockって必要？」

「要素をブロック要素として表示する指定だよ！」

例えば、

display:block;

を書くと、

要素が

横幅いっぱい

に広がります。

「改行される要素だよ！」

例えば、

<div>テキスト</div>
<div>テキスト</div>

は、

テキスト

テキスト

と縦に並びます。

これがブロック要素です。

「たくさんあるよ！」

例えば、

<div>
<p>
<section>
<header>
<footer>
main
article

など。

これらは最初から、

display:block;

になっています。

「実はそういう場合も多い！」

例えば、

<div class="box">

に対して、

.box{
  display:block;
}

を書いても、

見た目は変わりません。

なぜなら、

divは最初からblockだからです。

「inline要素をblockにしたい時！」

例えば、

<a>ボタン</a>

aタグは初期状態だと、

display:inline;

です。

つまり、

文字サイズ分しかありません。

例えば、

a{
  background:red;
}

だと、

文字部分しかクリックできません。

ボタンっぽくしたい時は、

a{
  display:block;
}

を使います。

「画像リンク！」

例えば、

<a href="#">
  <img src="">
</a>

これに、

a{
  display:block;
}

を付けます。

すると、

余計な隙間が消えたり、

クリック範囲を調整しやすくなります。

「よく使う！」

spanは元々、

display:inline;

です。

例えば、

<span>NEW</span>

に、

display:block;

を付けると、

1行を占有するようになります。

ざっくり言うと、

inline

文字サイズだけ

block

横幅いっぱい

です。

例えば、

<span>犬</span>
<span>猫</span>

なら、

犬 猫

になります。

でも、

span{
  display:block;
}

なら、

犬

猫

になります。

「blockなら効く！」

例えば、

a{
  width:300px;
}

でも、

inlineのままだと効きません。

そこで、

a{
  display:block;
  width:300px;
}

にします。

「その通り！」

inline要素には、

widthやheightが効かないことがあります。

blockにすると、

自由にサイズ調整できます。

「blockとinlineの中間！」

例えば、

display:inline-block;

です。

特徴は、

• 横並び
• width指定可能
• height指定可能

です。

ボタンなどでよく使います。

「別物だよ！」

例えば、

display:flex;

は、

レイアウト用。

display:block;

は、

要素の表示方法です。

役割が違います。

「かなり見る！」

特に、

a{
  display:block;
}

は定番です。

画像リンクやカードリンクでは、

ほぼ毎回登場します。

「絶対覚えよう！」

CSSの基本中の基本です。

特に、

• block
• inline
• inline-block
• flex

の違いは理解しておくと、

レイアウトで困りにくくなります。