【display】インラインブロック要素の性質と使い方
デザイン・コーディング

【display】インラインブロック要素の性質と使い方

Share
このエントリーをはてなブックマークに追加

前回の記事では、ブロックレベル要素とインライン要素の性質と違いについて解説しました。2つの要素の性質を学んだ上で、「ブロックレベル要素を横に並べるにはどうしたらいいか」「インライン要素の横幅と高さを指定するにはどうしたらいいか」と疑問に思った方もいらっしゃると思います。今回の記事は、そんな悩みを解決できるインラインブロック要素とCSSのdisplayプロパティについて、図を用いて解説します。

インラインブロック要素

ハイブリッド型受講を可能に。医療団体に特化した研修管理システム。

https://manaable.com/

manaable（マナブル）は、利用ユーザー数25万人を突破した医療団体向け研修管理システムです。会員や研修から決済・受講・アンケートまで、研修管理に必要な機能を網羅。あらゆる業務の一元管理を可能にしたシステムだからこそ、お客様に合わせた革新的で最適な研修体制をご提供します。

目次

  1. インラインブロック要素とは
    1. displayプロパティ
  2. インラインブロック要素の性質
    1. 1.横幅と高さが指定できる
    2. 2.ブロックレベル要素と同じ余白の付き方をする
    3. 3.横幅の初期値が内容で決まる
    4. 4.前後の要素と横に並ぶ
  3. まとめ

インラインブロック要素とは

インラインブロック要素とは、ブロックレベル要素とインライン要素の性質を併せ持った要素です。

では、インラインブロック要素とブロックレベル要素、インライン要素の簡単な違いを見てみましょう。

横幅と高さの指定 横幅の初期値 高さの初期値 他要素との並び方 余白のつき方
ブロックレベル要素 可能 親要素の横幅の値 内容で決まる 改行される 勝手につくものがある
インライン要素 不可能 内容で決まる 内容で決まる 改行されない 上下に特殊なつき方をする
インラインブロック要素 可能 内容で決まる 内容で決まる 改行されない 勝手につくものがある

インラインブロック要素は横幅と高さの指定が可能で、横幅の初期値が内容で決まる等、他2つの要素に比べて直感的なコーディングができます。

「ブロックレベル要素とインライン要素も、インラインブロック要素のように扱えたら良いのに。」と思った方もいるでしょう。実は、CSSで「displayプロパティ」の記述を1行付け足すだけで、各要素をインラインブロック要素に変えることができます。

displayプロパティ

displayプロパティとは、要素の状態を指定することができるプロパティです。CSSで要素のdisplayプロパティの値を「inline-block」にすることで、その要素をインラインブロック要素として扱うことができます。

たとえば、spanタグをインラインブロック要素にする場合は、以下のように記述します。

  1. <span>ITRA株式会社</span>
  1. span {
  2.   display: inline-block;
  3. }

CSSで「display: inline-block;」の1行を記述するだけで、spanタグはインライン要素からインラインブロック要素に変わります。また、同じ方法で各要素をブロックレベル要素にもインライン要素にも変更することができます。

spanタグをブロック要素にする場合は、以下のように記述します。

  1. <span>ITRA株式会社</span>
  1. span {
  2.   display: block;
  3. }

divタグをインライン要素にする場合は、以下のように記述します。

  1. <div></div>
  1. div {
  2.   display: inline;
  3. }

インラインブロック要素の性質

続いて、インラインブロック要素の

  • 横幅と高さが指定できる
  • ブロック要素と同じ余白のつき方をする
  • 横幅の初期値が内容で決まる
  • 前後の要素と横に並ぶ

という4つの性質を順に解説します。

1.横幅と高さが指定できる

インラインブロック要素は横幅と高さを指定できます。そのため、横幅と高さを指定できないインライン要素も、displayプロパティでインラインブロック要素にすることで指定ができるようになります。

まず、インライン要素であるspanタグに高さと横幅を指定してみます。

  1. <body>
  2.   <span id="text1">ITRA株式会社</span>
  3. </body>
  1. #text1 {
  2.   height: 200px;
  3.   width: 200px;
  4.   background-color: #dd5268;
  5. }

See the Pen ExVrLdd by Ryohei (@RyoheiDD) on CodePen.

spanタグの横幅と高さが、指定した200pxになりませんでした。

display:inline-block を追加

では、「display:inline-block」でspanタグをインラインブロック要素に変更し、高さと横幅を指定してみましょう。

  1. <body>
  2.   <span id="text1">ITRA株式会社</span>
  3. </body>
  1. #text1 {
  2.   display: inline-block;
  3.   height: 200px;
  4.   width: 200px;
  5.   background-color: #dd5268;
  6. }

すると、以下のように表示されます。

See the Pen WNQPKPb by Ryohei (@RyoheiDD) on CodePen.

spanタグがインラインブロック要素になったことで、横幅と高さが指定した200pxになりました。

2.ブロックレベル要素と同じ余白の付き方をする

margin

インラインブロック要素は、ブロックレベル要素のように自由にmarginを指定できます。そのため、上下のmarginが指定できないインライン要素も、displayプロパティでインラインブロック要素に変えることで指定できるようになります。

まず、インライン要素であるspanタグの上下左右に、marginプロパティで余白を付けてみます。

  1. <body>
  2.   <span id="text1">ITRA株式会社</span>
  3. </body>
  1. #text1 {
  2.   background-color: #dd5268;
  3.   margin: 30px;
  4. }

すると、以下のように表示されます。

See the Pen abvXGrX by Ryohei (@RyoheiDD) on CodePen.

左右のmarginは付きましたが、上下にはmarginが付いていません。

display:inline-block を追加

では、「display:inline-block」でspanタグをインラインブロック要素に変更し、上下左右にmarginプロパティで余白をつけてみましょう。

  1. <body>
  2.   <span id="text1">ITRA株式会社</span>
  3. </body>
  1. #text1 {
  2.   display: inline-block;
  3.   background-color: #dd5268;
  4.   margin: 30px;
  5. }

すると、以下のように表示されます。

See the Pen MWaLBLj by Ryohei (@RyoheiDD) on CodePen.

spanタグがインラインブロック要素になったことで、上下にもmarginがつくようになりました。

padding

インラインブロック要素のpaddingは、ブロックレベル要素のpaddingと同じ動作をします。そのため、上下のpaddingが他の要素に被ってしまうインライン要素も、displayプロパティでインラインブロック要素にすることです、他の要素を押しのけるように余白を表示することができます。

まず、インライン要素であるspanタグの上下左右に、paddingプロパティで余白を付けてみます。

  1. <body>
  2.   <p>インライン要素の上下のpaddingは</p>
  3.   <span>この</span><span id="text1">ITRA株式会社</span><span>ように</span>
  4.   <p>他の要素に被ってしまいます</p>
  5. </body>
  1. #text1 {
  2.   background-color: #dd5268;
  3.   padding: 30px;
  4. }

すると、上下の余白が以下のように表示されます。

See the Pen zYveaGe by Ryohei (@RyoheiDD) on CodePen.

左右のpaddingは隣合う要素を押しのけるように表示されましたが、上下のpaddingは他の要素に被ってしまいました。

display:inline-block を追加

では、「display:inline-block」でspanタグをインラインブロック要素に変更し、上下左右にpaddingプロパティで余白をつけてみましょう。

  1. <body>
  2.   <p>インライン要素の上下のpaddingは</p>
  3.   <span>この</span><span id="text1">ITRA株式会社</span><span>ように</span>
  4.   <p>他の要素に被ってしまいます</p>
  5. </body>
  1. #text1 {
  2.   display: inline-block;
  3.   background-color: #dd5268;
  4.   padding: 30px;
  5. }

すると、以下のように表示されます。

See the Pen qBOgygx by Ryohei (@RyoheiDD) on CodePen.

spanタグがインラインブロック要素になったことで、上下のpaddingも他の要素を押しのけるように表示されました。

3.横幅の初期値が内容で決まる

インラインブロック要素の横幅は内容で決まります。そのため、hタグやpタグなどのブロック要素をインラインブロック要素にすることで、文章量に応じて横幅を変化させることができるようになります。

まず、通常のh1タグの表示を見てみましょう。以下のような記述をしてみます。

  1. <body>
  2.   <h1>ITRA株式会社</h1>
  3. </body>
  1. h1 {
  2.   background-color: #dd5268;
  3. }

すると、以下のように表示されます

See the Pen GRpzdLZ by Ryohei (@RyoheiDD) on CodePen.

bodyタグとh1タグに、親要素と子要素の関係ができています。そのため、h1タグの横幅は、文章量に関係なくbodyタグの横幅分広がってしまいました。

display:inline-block を追加

では、「display:inline-block」でh1タグをインラインブロック要素に変更してみましょう。

  1. <body>
  2.   <h1>ITRA株式会社</h1>
  3. </body>
  1. h1 {
  2.   display: inline-block;
  3.   background-color: #dd5268;
  4. }

すると、以下のように表示されます。

See the Pen MWaLBxj by Ryohei (@RyoheiDD) on CodePen.

h1タグの横幅が、文章量に合わせて短くなりました。前の項目で解説した通り、インラインブロック要素の余白のつき方はブロックレベル要素と同じであるため、h1タグのデフォルトの余白はついたままです。

4.前後の要素と横に並ぶ

インラインブロック要素は、前後の要素と横に並びます。そのため、他の要素と縦に並ぶブロックレベル要素も、displayプロパティでインラインブロック要素にすることでインライン横に並べることができます。

まずはブロックレベル要素である2つのdivタグを記述してみます。

  1. <body>
  2.   <div id="box1"></div>
  3.   <div id="box2"></div>
  4. </body>
  1. #box1 {
  2.   height: 100px;
  3.   width: 100px;
  4.   background-color: #dd5268;
  5. }
  7. #box2 {
  8.   height: 100px;
  9.   width: 100px;
  10.   background-color: #f4d923;
  11. }

すると、以下のように表示されます。

See the Pen YzyBLgz by Ryohei (@RyoheiDD) on CodePen.

右側に十分な余白がありますが、2つのdivタグは縦に並びました。

display:inline-block を追加

では、「display:inline-block」で2つのdivタグをインラインブロック要素に変更してみましょう。

  1. <body>
  2.   <div id="box1"></div>
  3.   <div id="box2"></div>
  4. </body>
  1. #box1 {
  2.   display: inline-block;
  3.   height: 100px;
  4.   width: 100px;
  5.   background-color: #dd5268;
  6. }
  8. #box2 {
  9.   display: inline-block;
  10.   height: 100px;
  11.   width: 100px;
  12.   background-color: #f4d923;
  13. }

すると、以下のように表示されます。

See the Pen LYpqBad by Ryohei (@RyoheiDD) on CodePen.

2つのdivタグがインラインブロック要素になったことで、横に並ぶようになりました。

以上の4点がインラインブロック要素の主な特徴です。

まとめ

displayプロパティの使い方と、インラインブロック要素の性質をご理解いただけたでしょうか。ブロックレベル要素、インライン要素の性質と併せて理解することで、コーディング力が向上します。今後HTMLやCSSを扱う中で、この記事で得た情報をぜひ活用してください。

Share
このエントリーをはてなブックマークに追加

この記事の著者

itra
ITRA株式会社

官公庁や大手企業を中心とした大規模なWebサイトを総合的にプロデュースするWeb制作会社。デザインからシステム、サーバーまでWebサイトに関わるお客様の悩みを解決します。