【CSS】(display属性)block、inline、inline-blockについて

CSSのdisplay属性は、要素自身の表示方法および子要素の表示方法を設定するために使用します。

今回は、要素自身の表示方法を設定する値、blockinlineinline-blockについて説明します。

display属性はHTMLのそれぞれの要素ごとにデフォルトで指定されている値があります。

div要素にはdisplay: block;が設定されている

blockは、その要素の横幅を目一杯使用した領域を取り、要素の前後を改行する値です。
*要素の表示範囲を分かりやすくするためbackground-color属性で背景色を設定しています。


div:first-child {
    background-color: yellow;
}
div:last-child {
    background-color: orange;
}
    

<body>
    <div>おはよう</div>
    <div>こんにちは</div>
</body>
    
おはよう
こんにちは

div要素のデフォルトのdisplay属性がblockであるため、横幅が最大に使用され、改行されています。

span要素にはdisplay: inline;が設定されている

spanは、その要素の横幅を要素に必要なだけの領域を取る値です。block要素と異なり、要素の前後に改行を含めません。


span:first-child {
    background-color: yellow;
}
span:last-child {
    background-color: orange;
}
        

<body>
    <span>おはよう</span>
    <span>こんにちは</span>
</body>
    
おはよう こんにちは

span要素のデフォルトのdisplay属性がinlineであるため、横幅は必要分だけで、改行はされません。

その他の要素のデフォルト値について

デフォルト値がblockである要素


<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>
        

デフォルト値がinlineである要素


<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <output>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>
        

理解度チェック

  • display属性は要素の何を変更する際に設定しますか?
  • divdisplay属性の初期値はなんですか?
  • spandisplay属性の初期値はなんですか?

display属性の値を変更する

CSSで任意のdisplay属性の値に変更することができます。

次の例では、デフォルトの値がblockであるdiv要素をCSSでinlineに変更する例です。


div {
    display: inline;
    background-color: yellow;
}
    

<div>おはよう</div>
    
おはよう

理解度チェック

  • spandisplayblockに変更してください。

blockの特徴について

先述したように、blockは、その要素の横幅を目一杯使用した領域を取り、要素の前後を改行する値です。

横幅を目一杯使用する

横幅を目一杯というのは、親要素の横幅すべてという意味となります。

次の例は、親要素の横幅が画面の半分である場合の子要素divの結果です。


div div:first-child {
    background-color: yellow;
}
div div:last-child {
    background-color: orange;
}
    

<div style="width: 50%;">
    <div>おはよう</div>
    <div>こんにちは</div>
</div>
    
おはよう
こんにちは

要素の前後を改行する

block 要素は、要素の前後に改行を生成します。


<div>おはよう</div>
<div>こんにちは</div>
<div>こんばんは</div>
    
おはよう
こんにちは
こんばんわ

理解度チェック

  • blockの特徴を説明してください。

inlineの特徴について

要素の必要分だけのサイズを取り、改行もしない

inlineは、必要なサイズの領域しか使用せず、また要素の前後に改行を生成することもありません。

display: inline; がデフォルトであるspan要素を使用すると、「おはよう」と「こんにちは」が次のように表示されます。


span:first-child {
    background-color: yellow;
}
span:last-child {
    background-color: orange;
}
        

<body>
    <span>おはよう</span>
    <span>こんにちは</span>
</body>
    
おはよう こんにちは

widthhightを使用できない

inlineは、要素の必要サイズしか領域を取りません。
そのため、横幅を指定するwidthや高さを指定するheightを設定しても結果に反映されません


span:first-child {
    background-color: yellow;
    width: 200px;
    height: 24px;
}
span:last-child {
    background-color: orange;
}
        

<body>
    <span>おはよう</span>
    <span>こんにちは</span>
</body>
    
おはよう こんにちは

同じ理由で、行の高さを指定するline-height属性や、外側の余白を指定するmargin属性の縦方向(横方向は可)も指定できません。

サイズはpaddingで調整する

span要素をはじめ、a要素やbutton要素、input要素などデフォルトでdisplay: inline;が設定されている要素は多くあります。

widthheightが効かないので、サイズを調整するためにはpadding属性を使用します。
padding属性は、要素の境界線(border)と要素内のコンテンツ(「おはよう」など)の間の領域のサイズを制御する属性です


span:first-child {
    background-color: yellow;
    padding: 16px 32px;
}
span:last-child {
    background-color: orange;
}
        

<body>
    <span>おはよう</span>
    <span>こんにちは</span>
</body>
    
おはよう こんにちは

理解度チェック

  • inlineの特徴を説明してください。

inline-blockの特徴について

inlineと同じく、必要サイズの領域しか取らず、また改行もされません。
しかし、blockと同じくwidth属性やheight属性を指定することができます。
*line-height属性やmargin属性の縦方向の指定も可能です。

inline-blockは、inlineblockそれぞれの特徴を持つ値になります。


span:first-child {
    background-color: yellow;
    display: inline-block; /* displayを変更します。 */
    width: 100px;
    height: 100px;
}
span:last-child {
    background-color: orange;
}
        

<body>
    <span>おはよう</span>
    <span>こんにちは</span>
</body>
    
おはよう こんにちは

理解度チェック

  • inline-blockの特徴を説明してください。

それぞれの値の違い

横幅や高さなどの
サイズの指定
横幅の初期値 高さの初期値 改行の有無
block できる 親要素の横幅のサイズ 要素内の内容で決定 前後に生成
inline できない
(*paddingを使用する)
要素内の内容で決定 要素内の内容で決定 なし
inline-block できる 要素内の内容で決定 要素内の内容で決定 なし
前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。