CSS display「block」「inline」「inline-block」を習得する

CSS display「block」「inline」「inline-block」を習得する

CSSのdisplayプロパティでHTMLの要素が形成するボックスを調整することができます。

CSSでレイアウトを組むとき。というよりCSSを使うときには必ず初心者の頃の、しかも初めの段階で習得しておきたいことです。

私は「独学」でCSSを覚えてきたのでCSSのdisplayで指定できるプロパティの値「block」「inline」「inline-block」の習得をすっ飛ばして先に進んでいました。

なんとなく使っていたので、一度まともにCSSのdisplayで指定するボックスの基本的なことを習得しておこうと思います。

 

CSSのdisplayはボックスを指定できる

 

CSSのdisplayを使用するとHTML要素の一つひとつのボックスをコントロールしたり、要素が形成するボックスのデザインを変更することができます。

レイアウトする一つ一つのボックス表示をどんな形式にするか決めるために使うCSSのdisplayプロパティの値は大きく分けて「ブロックボックス」と「インラインボックス」の2つの種類に分けられます。

 

  • ブロックボックス
  • インラインボックス

 

そしてHTMLにはdiv要素、p要素、span要素などの多くのタグがありますが、ほとんどの要素は「block」「inline」の値が初期値として割り当てられています。

この初期値(デフォルト)で指定されているボックスの形や並び方をCSSのdisplayを指定して、それぞれのブログやサイトのレイアウトに合わせたボックスにできます。

 

Advertisement

 

displayプロパティの値にする基本の種類

 

CSSでボックスを指定するdisplayの種類はいくつかありますが、その中でも特に基本として覚えておきたい種類が以下の3種類です。

 

  • display:block
  • display:inline
  • display:inline-block

 

displayプロパティの値を変更することでボックスの種類を変えることができます。

 

CSSで「display:block」を指定したHTML要素にはブロック形式のボックス

「display:inline」を指定したHTML要素にはインラインボックス

「display:inline-block」を指定したHTML要素にはインラインでブロック形式になったボックスを指定できます。

 

CSSで「block」「inline」「inline-block」を一つずつどんな表示になるか確認しながら使い方を習得したいと思います。

 

ブロックボックス作成を習得する

 

ブロックボックスは上から下へ縦方向にボックスが配置されます。これはブロックボックスの前後には改行が入るからです。

そしてブロックボックス作成を習得するときは以下のことを理解しておくようにします。

 

  • 幅(width)や高さ(height)を指定できる。幅を指定しなければ親要素の幅全体に広がる
  • 上下左右のmargin、paddingを指定できる

 

Advertisement

 

display:blockを使ってみる

 

実際にCSSでdisplay:blockを使ってみるとブロックボックスがどんなものか習得しやすくなります。

 

<a class="max-block">上コンテンツ</a>
<a class="max-block">中コンテンツ</a>
<a class="max-block">下コンテンツ</a>
.max-block {
 display: block;
 border: 2px solid #22c4b7;
 color: #414241;
 margin: 10px;
 padding: 5px;
}

 

HTMLの<a>タグでマークアップした部分をCSSでdisplay:blockと指定して、border:2px solid #22c4b7;でボーダーを作り、color:#414241;で文字色を変更してmarginとpaddingで見やすくブロックボックスを構成しました。(aタグにherf属性なしにしてます)

このdisplay:blockの指定の場合は、display:blockを指定した要素に幅を決めていないので画面いっぱいに広がるブロックボックスを形成します。

画面いっぱいに広がらないようにするにはwidth:で値を記述し、幅を決められます。display:blockは幅(width)と高さ(height)を指定できます。

 

blockの表示

 

先に説明したHTMLのa要素に対してのCSS、display:blockの指定の構成だと以下の画像のように親要素の幅いっぱいにブロックボックスが表示されます。

 

 

次にwidth:100pxを追加して以下のようなcssにします。

 

.max-block {
 display: block;
 border: 2px solid #22c4b7;
 color: #414241;
 width: 100px;
 margin: 10px;
 padding: 5px;
}

 

widthの追加により、画面いっぱいに広がって表示していたブロックボックスは横幅100pxのブロックボックスにできます。

 

インラインボックス作成を習得する

 

インラインボックスは左から右へ横方向にボックスが配置されます。インラインボックスはブロックボックスとは違い前後に改行は入りません。

そしてインラインボックス作成を習得する場合は以下のことを理解しておくようにします。

 

  • 基本的には幅(width)と高さ(height)を指定できない
  • 上下のmarginを指定できない

 

実際にインラインボックスをCSSで指定するときは、インランボックスにする要素にdisplay:inlaineを使います。

 

display:inlineを使ってみる

 

display:inlineも実際に書いて使ってみると、インラインボックスがどんなものか習得しやすくなります。

 

<p class="box">CSSで<a class="inline">インライン</a>にして表示</p>
.inline {
 display: inline;
 border: 2px dashed #e7fb05;
 background: #ec18ca;
 padding: 20px;
}

 

サンプルとしてHTMLの<p></p>のブロックの中の<a>タグ(herf属性なし)にdisplay:inlineを指定してボーダーと背景色、paddingは20pxをつけたボックスにしておきます。

 

 

このinline指定したa要素はインラインボックスを形成します。<a>タグは、もともとがインラインなのでdisplay:inlineで指定しなくてもインラインボックスを形成できます。

サンプルのように<p></p>要素のブロックの中にインラインボックスはできますが、インラインボックスの中にブロックボックスは小さい箱に大きな箱を詰め込むようなものなので表示が崩れてしまいます。

 

 

inlineの表示

 

CSSでdisplay:inlineでインラインボックスにした表示を2パターンほど見てみたいと思います。

 

<div class="hoge">
 <h2 class="x">見出し</h2>
 <p class="y">サンプル</p>
</div>
.x {
 background: pink;
}
.y {
 background: skyblue;
}
.x,.y {
 display: inline;
}
.hoge {
 margin: 20px;
 border: 2px solid #e7fb05;
 padding: 20px;
 line-height: 2.5rem;
}

 

上記のHTMLとCSSがdivのボックスを作った中にh2で見出し、文章をpでマークアップした要素にそれぞれ違う背景色をつけたコードです。そしてh2とpをまとめてCSSでdisplay:inlineにした表示の画像です。

 

<a class="inline">上コンテンツ</a>
<a class="inline">中コンテンツ</a>
<a class="inline">下コンテンツ</a>
.inline {
 display: inline;
 border: 2px dashed #e7fb05;
 background: #ec18ca;
 padding: 10px;
}

 

Advertisement

 

もう一つのインラインパターンは<a>要素を3つ作ってインラインにした表示です。

 

 

まぁ改行が入らないので3つのa要素はインラインで横並びになります。ブログやホームページでよく見るメニューのようになりました。

2つの表示をまとめると以下のような感じになります。

 

 

inlineの表示を2パターン見てみましたが、インラインボックスに共通してるのはボックスの高さと幅が基本的には効きません。

サンプルのa要素3つインラインボックスのCSSにwidthとheightをそれぞれ10pxで指定したとしても変化なしです。もしインラインボックスに幅と高さ調整も指定したい場合にはインラインブロックを使います。

 

インラインブロックボックス作成を習得する

 

インラインブロックボックスはインラインボックスと同じように横方向に改行されずに配置されます。そしてブロックボックスのように幅と高さ、上下のmarginも指定できます。

そのためインラインボックスはインラインとブロックを組み合わせた合体ボックスのようなものです、

<img>で挿入した画像などはインラインブロックボックスを構成します。

 

display:inline-blockを使ってみる

 

インラインボックスのときと同じHTMLとCSSをサンプルとして使用します。

サンプルコードは以下のHTMLとCSSです。

 

<a class="inline">上コンテンツ</a>
<a class="inline">中コンテンツ</a>
<a class="inline">下コンテンツ</a>
.inline {
 display: inline-block;
 border: 2px dashed #e7fb05;
 background: #ec18ca;
 padding: 10px;
 height: 100px;
 width: 100px;
}

 

インラインからインラインブロックになり変更したCSSはdisplayプロパティの値をinline-blockでインラインブロックに指定。そして追加したCSSはwidthで幅、heightで高さです。

そうするとインラインと同じように前後のボックスと一行に繋がって表示されますが、インラインではできなかった幅と高さがインラインなのに指定ができるようになります。

 

これはインラインとインラインブロックの違いになりますね。

インラインブロックはどんな表示になるかも見てみたいと思います。

 

inline-blockの表示

 

CSSのinline-blockの指定とwidthとheightをつけたインラインブロックは以下の画像のように表示されます。

 

 

widthを200pxにしてheightは100pxにしてみたインラインブロックボックスの表示です。

そして上の画像を表示したCSSコードです。

 

.inline {
 display: inline-block;
 border: 2px dashed #e7fb05;
 background: #ec18ca;
 padding: 30px;
 height: 100px;
 width: 200px;
}

 

「block」「inline」「inline-block」の違い

 

では最後のまとめ的にCSSのdispalyプロパティの値「block」「inline」「inline-block」3つの違いを習得するための材料にしてください。

 

display「block」

幅と高さを指定しないと親要素の幅や高さか、画面の幅や高さいっぱいに広がる

 

display「inline」

要素の前後に改行が入らず、一行に並ぶ。そして幅と高さを指定できない。

 

display「inline-block」

インラインの進化版とも言える。要素の前後が改行されずにインラインを保ち、幅と高さを指定できるブロックにすることができる。

CSSカテゴリの最新記事