CSSのインライン(inline)とブロック(block)について解説

CSSを理解する上で大切なポイントして、要素の表示形式というものがあります。表示形式にはインラインやブロックなどがあり、それぞれが全く別の性質を持っています。

これらの性質を理解しなければ、狙い通りの見た目にすることができず、WEBページにコーディングに行き詰まってしまうことになるでしょう。表示形式はとても大切な概念ですので、ここでしっかりと理解しておきましょう。

 表示形式インラインとブロックの違いとは？

インラインとブロックにはそれぞれ以下のような特徴があります。

図

実際のコードで具体例を見て見ましょう。

<p class="demo_32-1">ワンダフルなアンダスタンドを！</p>
<span class="demo_32-2">ワンダスタンド！</span>
<span class="demo_32-3">ワンダスタンド！</span>

.demo_32-1{
   background-color: #e6fff2;
   border:1px solid #1c883e;
 }
 .demo_32-2{
   background-color: #e6fff2;
   border:1px solid #1c883e;
 }
 .demo_32-3{
   background-color: #e6fff2;
   border:1px solid #1c883e;
 
 }

表示形式はタグによってデフォルト値が決まっています。例えばpタグのデフォルト値はブロックで、spanタグのデフォルト値はインラインです。

pタグは表示形式のデフォルト値がブロックなので、横幅いっぱいに広がり次に続く要素が改行され下に来ているのがわかります。

spanタグは表示形式がインラインなので、横幅は中身の文章と同じ長さになります。また要素との間に改行が入らず、横並びになっていますね。

表示形式の使い方

表示形式はCSSのdisplayプロパティで指定します。

display: 表示形式のキーワード;

表示形式のキーワードはいくつか種類がありすが、主に使うのは以下の4つになります。

display: inline;
display: block;
display: inline-block;
display: none;

それぞれ性質が違うので解説していきます。

 block(ブロック)

表示形式がブロックの場合、要素は画面幅いっぱいに広がって表示されます。また、次に来る要素はその要素の下に表示されていきます。

横幅・高さの指定が可能

横幅や高さの指定が可能です。

上下左右の余白の指定が可能

マージンやパディングといった余白を上下左右に指定するできます。

 デフォルト値がblockのタグ

pタグや、divタグ、ulタグ、h1〜h6タグなど

[** inline(インライン)]

表示形式がインラインの場合、要素の横幅は要素の中身と同じ幅になります。また、要素の前後には改行が入らず、横に並んで行きます。

主に文章のなかで使われることが多いです。

横幅と高さが指定できない

インラインの場合、要素の横幅や高さは、要素の中身によって自動的に決まるため、横幅・高さを指定することができません。

試しに横幅と高さを指定してみましょう。

<span class="demo_33-1">ワンダスタンド！</span>

.demo_33-1{
   width: 100px;
   height: 100px;
   background-color: #e6fff2;
   border:1px solid #1c883e;
 }

このように、横幅と高さは指定しても無視されてしまいます。

※ただしimg、input、textareaなどの一部のタグは横幅・高さの設定が可能です。

上下の余白を指定できない

インラインの場合、マージンの上下は効きません。

パディングの上下については余白を指定できますが、高さが変わらないので、以下のように余白同士が重なり合ってしまいレイアウトが崩れてしまいます。

<span id="demo_34-1">わんだふるなアンダスタンド！わんだふるなアンダスタンド！わんだふるなアンダスタンド！</span>

#demo_34-1{
   background-color: #e6fff2;
   padding: 20px 0;
 }

基本的にはインラインの表示形式の要素には上下の余白は指定しない方が良いでしょう。

ちなみに、左右のマージン、パディングは問題なく使うことができます。

※img、input、textareaなどの一部のタグは余白の設定が可能です。

デフォルト値がinlineのタグ

a、span、imgなど

inline-block(インラインブロック)

インラインブロックは、インラインとブロックの特徴を合わせもった表示形式です。

インラインのように横に並びますが、横幅・高さの指定や、余白の指定ができるという性質を持ちます。要素を横並びにしつつ、高さや余白も指定したい場合にとても便利な表示形式です。

<ul id="demo_35-1">
   <li>メニュー１</li>
   <li>メニュー２</li>
   <li>メニュー３</li>
 </ul>

#demo_35-1 li{
    display: inline-block;
    width: 130px;
    height: 30px;
    margin-right: 20px;
    padding: 5px;
    text-align: center;
    background-color: #e6fff2;
    border:1px solid #1c883e;
}

ただリストを横並びにするだけなら、インラインでもできますが、上記の例のようにそれぞれの要素に幅や高さ、上下の余白指定したい場合などはインラインブロックを使うと良いでしょう。

 none(ノン)

noneを指定された要素は非表示になります。

簡単な例を見てみましょう。

<ul>
   <li>メニュー１</li>
   <li id="demo_36-1">メニュー２</li>
   <li>メニュー３</li>
 </ul>

#demo_36-1 {
    display: none;
}

noneを指定した、メニュー2だけ表示されなくなりました。このようにdisplayの値を変えることで非表示にすることができます。

これはどういう時に使うかというと、パソコンでは表示したいけれども、スマホの時は隠したいコンテンツがある場合などに使われます。

ただし、非表示になっている場合でも読み込み自体は行われているため、表示速度が早くなるということではないので注意しましょう。

表示形式はCSSで変えられる

全てに要素はdisplayのデフォルト値を持っています。このデフォルト値は、「このような使われ方が多いだろう」という値があらかじめ入っているだけで、CSSを使ってその値を自分のお好みの値に変えることができます。

例えば、pタグをインラインに変えることもできるし、spanをブロックに変えることも出来ます。

とはいえ、そのような使い方にあまり意味はないかもしれません。pタグをインラインにするなら、最初からspanタグを使えば済みますし、逆にspanをブロックにしたいなら初めからタグを使えば良い話だからです。

現実的に使うとすれば、前述したように、リストを横並びにするときなどにインラインブロックにするなど、displayを変更するケースはそれほど多くないでしょう。

まとめ