ナビなどにおけるCSSの指定で使うdisplay:blockとdisplay:inlineの効果について

訓練もWebサイトのコーディングに入り、実際にコーディングしていく中でいくつか理解が曖昧な点が分かってきた。

今回は、ナビなどのCSSで使うdisplayについての基本を確認してみる。

先に結論を述べると、当たり前のことなのだろうが、以下の通り。

  • ブロックレベル要素をインライン化すると、幅や高さの指定が無効となり、タグ前後で自動で行われていた改行も無効となる。
  • インライン要素をブロック化すると、幅や高さの指定が有効となり、タグの前後で自動で改行が行われるようになる。

 ※結果確認ブラウザ:Firefox

ブロックレベル要素とインライン要素

個人的には「あれ?指定した幅や高さが効いてない!?」といった状況がしばしばあるが、その場合にありがちな原因の一つとして、ブロックレベル要素とインライン要素の区別がついていないということがあげられる。
そもそもブロックレベル要素とインライン要素とはなんぞやということで、多少語弊があるかもしれないが個人的解釈は以下の通り。

  • ブロックレベル要素:ひとかたまりのブロックと認識されるもので、幅や高さをもつと考えるもの。また、タグの前後で改行が行われる。基本的なイメージでいうと、複数行になるようなもの 例)div、p、formなど
  • インライン要素:主としてブロックレベル要素内で使われ、幅や高さをもたないと考えるもの。基本的なイメージでいうと、1行で書かれるもの 例)a、img、em、strong、input、labelなど

参照 http://www.htmq.com/htmlkihon/005.shtml

display:blockの効果

displayの意味を調べると「表示」、つまり文字通りに解釈すると「表示をブロックにする」という指定らしい。
表示をブロックにするとはどういうことかを実際に試してみる。
まずは、本来インライン要素であるaタグに高さと背景色(緑)を指定してみる。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>検証:インライン要素とdisplay:block</title>
<style>
body, div, p, a{
  margin: 0;
  padding: 0;	
}
a{
  width: 100px;
 height: 50px;
 background-color: #0f0;
}
</style>
</head>

<body>
  <a></a>
</body>

</html>

表示結果は以下のようになり、何も表示されない。heightを指定しているにもかかわらず、
背景色がまったく表示されていないので、指定したheightが無効になっていると考えられる。
←クリックで大きい画像表示

では、上記状態でaタグの中に文字をいれてみる。
変更部は以下の通り。

<a>テスト</a>

表示結果は以下のようになり、文字が表示されるが、背景色が表示されているのは文字の高さのみなので、やはり指定したheight(とwidth)は無効になっていると考えられる。
←クリックで大きい画像表示

では、display:blockを指定するとどうなるか。
変更部(style部)は以下の通り。

a{
  display: block;
 width: 100px;
 height: 50px;
 background-color: #0f0;
}

表示結果は以下のようになり、ブロック化することではじめて指定した幅と高さが有効になった。
←クリックで大きい画像表示

以上の結果から、display:blockとは、インライン要素をブロックレベル要素扱いにするということで、ブロック化してはじめて幅と高さの指定が有効になると考えられる。
※ちなみにaタグ(インライン要素)内の文字をなくした場合、表示結果は上記の結果から文字が消えるだけなので、aタグ(インライン要素)内の文字の有無は、幅と高さが有効になるか否かには関係ない。

display:inlineの効果

念のため、ブロックレベル要素に対するdisplay:inlineも確認してみる。
ブロックレベル要素としてpタグを用いる。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>検証:ブロックレベル要素とdisplay:inline</title>
<style>
body, div, p, a{
  margin: 0;
  padding: 0;	
}
p{
  width: 100px;
 height: 50px;
 background-color: #0f0;
}
</style>
</head>

<body>
  <p></p>
</body>

</html>

表示結果は以下のようになり、当然だが幅と高さの指定が有効。
←クリックで大きい画像表示

ではこれをインライン化するとどうなるか。
変更部は以下の通り。

p{
 display: inline;
  width: 100px;
 height: 50px;
 background-color: #0f0;
}

表示結果は以下のように何も表示されなくなり、幅と高さの指定が無効になったと考えられる。
←クリックで大きい画像表示

念のためにインライン要素ブロック化の場合と同様に、pタグに文字をいれた結果も確認しておくと、表示結果は以下のようになり、幅と高さの指定は無効だが、文字とその背景色は表示されている。
←クリックで大きい画像表示

また、結果は省略するが、インライン要素にdisplay:blockを指定した場合は、タグの前後で自動で改行も行われる。
逆にブロックレベル要素にdisplay:inlineを指定した場合は、タグの前後で自動で行われていた改行が無効になる。

さらにinline要素にはmarginの上下指定も無効(左右は有効)になった。paddingを指定するとpadding分の背景色は表示されるが、高さとしては無視されており、padding分の背景色はその下にある要素にかぶってしまう。
コードは以下の通り。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>検証:インライン要素に高さ指定</title>
<style>
body, div, p, a{
  margin: 0;
  padding: 0;	
 width:150px;
}
p{
 display:inline;
 width: 100px;
 height:50px;
 padding-bottom:10px;
 background-color:#0f0;
}
a{
 display:block;
}
</style>
</head>

<body>
  <p>テスト</p><p>テスト</p><a>テスト</a><a>テスト</a>
</body>

</html>

表示結果は以下の通り。
←クリックで大きい画像表示