※この記事では、Webデザインの基礎を細かすぎるくらいにかみ砕いて解説しています。これから勉強を始める初心者の方にもよくわかるように、じっくりしっかり、ていねいに説明していきます！
Webサイトを作っていると、画像や段落を横並びに配置したいと思うことがあります。
「ブロックレベル要素とインライン要素の配置(縦積み・横並び)」で説明したとおり、
通常、ブロックレベル要素は縦に並ぶ性質があるため、
これを横並びにするためにはひと工夫が必要です。
この記事では、ブロックレベル要素を横並びにする方法のひとつとして、
「インラインブロック要素」を使うやり方について説明します。
ざっくり言うと、
「インラインブロック要素」という、インライン要素とブロックレベル要素の特徴をあわせ持つモードを指定することによって、
ブロックレベル要素の特徴を持ったまま、インライン要素のように横並びができるようになる、といった感じです。
それでは、いってみましょう！
Contents
①インラインブロック要素の指定方法
ある要素を「インラインブロック要素」として指定するには、
CSSのdisplayプロパティで、
display: inline-block;
というように指定をします。
これで、ブロックレベル要素の特徴を持ったまま、横並びにすることができます。
それでは、実際のコードで確認してみましょう。
ブロックレベル要素の<div>を3つ縦に並べて、
これらの<div>をインラインブロック要素として指定することにより、
<div>を3つ横並びにしてみます。
【HTML】
See the Pen eYdayqX by Deapsea_GIFs (@deapseagifs) on CodePen.
ブロックレベル要素の<div>の中に文字列(オムレツ・卵焼き・スクランブルエッグ)を入れたものを3つ並べています。
それぞれの<div>タグには、"block"という名前のクラスを指定しています。
【CSS(インラインブロック指定前)】
See the Pen WNGBMeJ by Deapsea_GIFs (@deapseagifs) on CodePen.
"block"という名前のクラスに対して、
赤い枠線を指定(border: solid red;)しています。
【画面表示(インラインブロック指定前)】
See the Pen ZEpNrEP by Deapsea_GIFs (@deapseagifs) on CodePen.
<div>はブロックレベル要素なので、3つの<div>は縦に並びます。
また、それぞれの<div>の幅は、画面の横幅いっぱいまで拡がっています。
さて次に、3つの<div>に対してCSSで
"display: inline-block;"
と指定してインラインブロック要素にすることによって、3つの<div>を横並びにしてみましょう。
【CSS(インラインブロック指定後)】
See the Pen jOMoZPv by Deapsea_GIFs (@deapseagifs) on CodePen.
"block"という名前のクラスに、赤い枠線(border: solid red;)を指定するとともに、
"display: inline-block:"を指定して、<div>をインラインブロック要素にしました。
それでは、結果を見てみましょう！
【画面表示(インラインブロック指定後)】
See the Pen jOMoZbe by Deapsea_GIFs (@deapseagifs) on CodePen.
3つの<div>をインラインブロック要素に指定したことによって、横並びにすることができました。
さらに、それぞれの<div>の横幅は、画面の横幅いっぱいではなく、
中身の文字列の横幅までの長さになっています。
②インラインブロック要素の特徴
さて、実際のコードで例をみたところで、
改めてインラインブロック要素の特徴を整理してみましょう。
インラインブロック要素は横に並ぶ
ブロックレベル要素が縦に並ぶのに対して、
インラインブロック要素は、インライン要素のように横に並びます。
インラインブロック要素の幅は、自分の中身の大きさまで拡がる
ブロックレベル要素の幅は、画面の横幅いっぱいに拡がるのに対して、
インラインブロック要素の幅は、インライン要素のように自分の中身の大きさまで拡がります。
インラインブロック要素は、サイズ指定が可能
インラインブロック要素は、ブロックレベル要素のように
widthプロパティやheightプロパティを使ったサイズ指定が可能です。
これを実際のコードで確認してみましょう。
【画面表示(サイズ指定前)】
See the Pen QWKRQQY by Deapsea_GIFs (@deapseagifs) on CodePen.
3つの<div>にインラインブロック要素を指定して、横並びにしたものです。
それぞれの<div>の幅と高さは、それぞれの文字列(オムレツ・卵焼き・スクランブルエッグ)と同じ幅と高さになっています。
それぞれの文字列の文字数が違うので、それぞれの<div>の幅の長さは異なります。
これらの<div>に対して、widthプロパティとheightプロパティで幅と高さを指定してみます。
【CSS(サイズ指定後)】
See the Pen JjRqpvb by Deapsea_GIFs (@deapseagifs) on CodePen.
"block"という名前のクラスに、赤い枠線の指定(border: solid red;)と、
インラインブロック要素の指定(display: inline-block;)を行うとともに、
width: 150px; で幅の指定(150px)と、
height: 100px; で高さの指定(100px)を行いました。
それでは、結果を見てみましょう。
【表示画面(サイズ指定後)】
See the Pen qBaGxyr by Deapsea_GIFs (@deapseagifs) on CodePen.
すべての<div>の幅を150pxに指定したので、幅がすべて同じ長さ(150px)になりました。
またすべての<div>の高さを100pxに指定したので、高さもすべて同じ長さ(100px)になりました。
まとめ
この記事では、ブロックレベル要素を横並びする方法のひとつとして、
インラインブロック要素の指定(display: inline-block;)を使う方法について説明しました。
・インラインブロック要素の指定は、"display: inline-block;"で行うことができる。
・インラインブロック要素は、インライン要素のように横に並ぶ。
・インラインブロック要素の幅は、インライン要素のように中身の大きさまで拡がる。
・インラインブロック要素は、ブロックレベル要素のように幅と高さの指定が可能。
インラインブロック要素の機能は、ブロックレベル要素とインライン要素の両方の特徴をプラスしたような機能であり、
直感的にわかりやすく、この点で扱いやすいところが特徴だと思います。
ブロックレベル要素を横並びするには、この他にも以下のような方法があります。
・フレックスボックス(display: flex)を使う方法
・浮動要素(float)を使う方法
それぞれに特徴があり、得意とする状況が異なります。
ひとつずつ理解しておくことで、様々な状況に応じて使い分けることができるでしょう。
それでは！