インライン・ブロックレベルの違い「display」の使い方

本記事は広告が含まれる場合があります CSS

インライン要素・ブロックレベル要素とCSS「display」の使い方

divやaなどのHTML要素は、大きくブロックレベル要素とインライン要素のどちらかに分類することができます。

HTML ブロックレベル要素とインライン要素の違いと特徴
 

CSSでレイアウト装飾するためには上記の違いを理解している必要があります。ここでは、インライン要素・ブロックレベル要素の説明と要素のブロックレベル・インラインの表示形式を変更する際に利用するCSS「display」をについて説明していきます。
 

よくul、liなどのリストを利用してメニューバーを作っているのを見かけます。リストってふつう縦並びになると思うんですがどうやったら横並びになるんでしょうか??

リストはブロックレベル要素ですが、cssのdisplayで横並びにできます。ここではインライン要素とブロッックレベル要素の特性とdisplayの使い方を説明していきますね。

 

 

HTMLのブロックレベル要素とインライン要素の違い

<div>や<a>などのHTMLの各要素は、大きくブロックレベル要素とインライン要素のどちらかに分類することができます。
HTML ブロックレベル要素とインライン要素の違いと特徴
 

h1タグやdivタグなどは、ブロックレベル要素で改行がつき縦に並ぶのに対して、aタグなどのインライン要素は要素同士で改行がつかず横に並ぶ性質を持っています。

(※注)ブロックレベル要素とインライン要素での分類方法ですが、HTML5からは新たに「カテゴリー」という新たな分類方法でより細かくジャンル分けされるようになりました。しかし簡略のためここではこれまでのブロックレベルとインラインでの分類で説明していきます。
 

代表的なブロックレベル要素とインライン要素

項目 主な要素 特徴
ブロックレベル要素
  • div
  • h1〜h6
  • p
  • ul,ol,li
  • dl,dt,dd
  • table
  • form
  • hr
  • pre
  • blockquote
  • 要素の前後に改行が入り、ブロック要素同士縦に並ぶ
  • 横幅や高さを指定できる
  • 余白(margin,padding)が指定できる
インライン要素
  • a
  • span
  • b
  • img(※)
  • label
  • input(※)
  • select(※)
  • textarea(※)
  • 要素の前後に改行が入らず、インライン要素同士横に並ぶ
  • 横幅や高さを指定できない(※1)
  • ブロックレベル要素のように上下の余白設定(margin,padding)が効かない(※2)

 

(※1)img、input、textareaなどの一部のタグは幅高さや余白の設定が可能です。
(※2)余白について厳密にいうと外部余白marginについては上下は効きません(左右は効きます)
内部余白paddingについては上下左右設定できますがブロックレベル要素のように正しく余白が取れません。

 

イメージ的には、ブロックレベル要素は段ボールやコンテナのような箱に相当し、インライン要素は箱の中に入っている内容物に相当すると考えるとわかりやすいかもしれません。
ブロックレベル要素 インライン要素 イメージ

お弁当の箱や仕切りは高さや幅、余白が設定できますけど、お弁当の中身はぐちゃぐちゃになりやすく高さ幅余白が正しく指定できない感じですね。

 

HTML ブロックレベル要素とは

 

ブロックレベル要素の特徴

ブロックレベル要素は各要素が一つのブロックで、以下のような特徴があります。

ブロックレベル要素の特徴

  • 要素の前後に改行が入り、ブロック要素同士縦に並ぶ
  • 横幅や高さを指定できる
  • 余白(margin,padding)が指定できる

 

代表的なブロックレベル要素

  • div
  • h1〜h6
  • p
  • ul,ol,li
  • dl,dt,dd
  • table
  • form
  • hr
  • pre
  • blockquote

 

■ブロックレベル要素 divタグを使った例

[divタグ]ブロック要素は改行が入ります。
[divタグ3]高さと幅も指定できます。
[div4]余白の設定もできます。

■上記のソースコード

 

HTML インライン要素とは

インライン要素の特徴

インライン要素は要素が横並びになり高さや幅を設定できません。以下のような特徴があります。

インライン要素の特徴

  • 要素の前後に改行が入らず、インライン要素同士横に並ぶ
  • 横幅や高さを指定できない(※1)
  • ブロックレベル要素のように上下の余白設定(margin,padding)が効かない(※2)

 

代表的なインライン要素

  • a
  • span
  • b
  • img(※)
  • label
  • input(※)
  • select(※)
  • textarea(※)

 

■インライン要素 aタグを使った例
[aタグ1]aタグはインライン要素です。 [aタグ2]インライン要素は改行が入りません。 [aタグ3]幅や高さの指定はできません。

■上記のソースコード

 

補足1 インライン要素で一部例外の要素

imgタグ、textareaタグ、inputタグ、selectタグなどの一部のインライン要素は改行がつかず横並びになりますが、高さや幅・余白を設定することができるという性質を持っています。
 

img、textarea、select、inputに高さ幅を設定した例
 

補足2 インライン要素の余白について

インライン要素での余白設定については、性質が少し複雑で下記のような特徴があります。

インライン要素の余白

  • marginの上下は効かない(左右は効く)
  • paddingの上下左右効くが、他の要素の領域を考慮せず重なる

 

■■例. aタグで余白(pading,margin)を設定する
■何もしていない状態
インライン要素 aのサンプル(何もしていない状態)
 

■余白を設定した状態
インライン要素 aのサンプル(marginとpaddingを設定)
 

■上記のソースコード

 

上記のようにインライン要素は外部余白marginは左右が効いていますが、上下は効いていません。

またpaddingで内側の余白を設定する事ができますが、他の要素の領域と重なってしまいます。

イメージ的には、ブロックレベル要素は段ボールやコンテナのような箱に相当し、インライン要素は箱の中に入っている内容物に相当すると考えるとわかりやすいかもしれません。(箱やコンテナは高さや幅、余白が設定できるが、中身はぐちゃぐちゃになりやすく高さ幅余白が正しく指定できない)。
 

ブロックレベル要素 インライン要素 イメージ

ブロックレベル要素とインライン要素のイメージ


 

表示に関するスタイル display

レイアウトを調整していく中で、インライン要素を使うけど高さと幅を指定したい、ブロックレベル要素を使うけど改行したくないというケースが出てきたときにCSSで「display」を利用できます。
 

CSS displayの使い方 一覧表

displayプロパティには主に以下のような設定があります。

項目 意味 備考
display:inline 指定した要素をインライン要素にする 改行なくなり横並びにできる。
幅・高さ・上下余白を指定できない
display:block 指定した要素をブロックレベル要素にする 改行ができて縦並びになる。
幅・高さ・余白を指定できる
display:inline-block 指定した要素をインラインとブロックレベルの中間の性質にする インライン要素のように改行がつかず横並びになるが、
ブロックレベル要素のように幅・高さ・余白を指定できる
display:none 指定した要素を非表示にする
display:flex 柔軟な横並び・均等な高さを実現でき、覚えておきたいレイアウト技法(フレックスボックス/フレキシブルボックス) (詳細記事)【フレックスボックス】CSS display:flexの使い方
display:grid グリッド(格子状)に横並びをはじめとしたレイアウトを実現できる比較的最新のレイアウト技法(グリッドレイアウト) (詳細記事)【CSS グリッドレイアウト】display: gridの使い方
display:table-cell テーブルtableタグのtd要素のようにする

 

ここでは、CSSのdisplayプロパティを利用したいくつかのサンプルをご紹介します。

display:inline-blockで横並び&幅を指定する

ブロックレベル要素であるli要素に対して、display:inline-blockに設定すると、インライン要素のように横並びになり、かつ高さ・幅を設定できるようになります。
 

■li要素に何もしていない(ブロックレベル)の状態 縦に並んでいる
li要素に何もしない(ブロックレベル)状態。縦に並んでいる
 

■li要素にdisplay:inline-blockを設定した状態 横並びになる

 

■上記のソースコード

 

(※注)ここでliに対してdisplay:inlineにすると幅や高さを設定できなくなるためご注意ください。
li要素にdisplay:inlineを設定した時のサンプル
 

補足 li要素の隙間をなくす

li要素をインラインブロックに変えたことによりli要素間で隙間ができています。

 

原因はli要素をインライン要素にしたことで改行した際にul要素のフォントサイズ分半角スペース分の空白ができていることに起因します。(※)インライン要素では改行が一つ以上続くと半角スペース扱いになります。

 

これを下記のように隙間をなくす方法を2つご紹介します。

 

一つ目は、下記のようにli要素を詰めて改行なしで記述すると、隙間は無くなります。

 

しかし、上記は視認性が悪くなります。2つ目の方法として例えばul要素のフォントサイズを0にli要素のフォントサイズを16px(通常の値)などに設定して隙間をなくすことができます。

■上記のソースコード

 

ul要素のフォントサイズを0にすることで半角スペースがサイズ0で見た目的に見えなくなります。

またそのままだとli要素のフォントサイズも継承されて0になって見えなくなるのでli要素に明示的に16pxなど設定して上書きしています。
 

display:blockで幅・高さ・余白を指定する

次に、display:blockで幅・高さ・余白を指定する方法をご紹介します。

aタグはもともとインライン要素のため高さ幅を設定できません。そこで下記例ではaタグに対してdisplay:blockを設定して高さ幅をもたせて青色の部分を押したらリンクが押せるようにしています。


 

■上記のソースコード

 

なお、ul・li要素を利用して横並びにする際は後述のdisplay:flexを使うことの方が多いと思います。

 

display:flexで要素を横並びにする

フレックスボックス(フレキシブルボックス)は、CSSの新しいレイアウト技法で、HTMLブロックを横並びにすることができます。

display:flexを設定することで、cssのflexbox(フレックスボックス)と呼ばれるレイアウトモードを使用することができます。

フレックスボックスの説明
 

■表示例 親要素にdisplay:flexを指定


 

■上記のソースコード

 

フレックスコンテナに設定できる項目は以下の通りです。

項目 意味
display:flex 【最重要(必須)】 フレックスコンテナの指定
flex-direction 【重要】 子要素(フレックスアイテム)をどの方向に並べていくかを指定するプロパティ
flex-wrap 【重要】 子要素(フレックスアイテム)を一行に並べるか、複数行に並べるかを指定するプロパティ
justify-content flex-directionで並べる際に、(主軸に対して)子要素同士をどのような間隔で並べるかを指定するプロパティ
align-items flex-directionで並べる際に、交差軸に対して子要素同士をどのような間隔で並べるかを指定するプロパティ

 

最近だとブロックレベル要素を横並びにする際はdisplay:flexを使うことが非常に多いですので覚えておきましょう。

display:flexの詳しい使い方は「【フレックスボックス】CSS display:flexの使い方を解説」をご参照ください。
 

display:gridで要素を横並びにする

Grid Layout(display: grid)は、CSSでレイアウトを組む手法の1つで、要素を格子状に並べて配置することができます。

Grid Layoutでは列数と行数をあらかじめ指定し、水平線と垂直線が交差してできたエリアにアイテムを配置していくことでレイアウトを組んでいきます。

■(参考)列数を3、行数を4と指定し、1番左上のエリアにアイテムを配置させている例

グリッドレイアウトの設定イメージ
 

「display: grid」が指定された要素をグリッドコンテナ、その子要素となる要素をグリッドアイテムと呼びます。
グリッドコンテナとグリッドアイテムについての説明図
 

 
なお、列数と行数の指定はアイテム全体を囲った親要素に対して「display: grid」を指定した後、「grid-template-columns」「grid-template-rows」プロパティを指定することで可能です。

親要素(グリッドコンテナ)に対して設定 display:grid(必須) グリッドレイアウトを作成する(グリッドコンテナを作成する)
grid-template-columns(実質必須) グリッドコンテナの列数や各グリッドのサイズを設定する
grid-template-rows(実質必須) グリッドコンテナの行数や各グリッドのサイズを設定する
gap グリッドアイテム同士の隙間を設定する
子要素(グリッドアイテム)に対して設定 grid-column(実質必須) グリッドアイテムの横方向の位置を指定する
grid-row(実質必須) グリッドアイテムの縦方向の位置を指定する

 

単純な横並びだとdisplay:flexを使うことが多いですが、display:flexの方がより細かい横並び・配置のレイアウトを実現することが可能です。

display:gridの詳しい使い方は「【CSS グリッドレイアウト】display: gridの使い方」をご参照ください。
 
 

まとめ

まとめです。今回は、ブロックレベル要素とインライン要素の性質と違いについて例を交えながら説明しました。
HTML ブロックレベル要素とインライン要素の違いと特徴
 

また、displayプロパティによるブロックレベル要素とインライン要素の切り替え方について説明しました。

項目 主な要素 特徴
ブロックレベル要素
  • div
  • h1〜h6
  • p
  • ul,ol,li
  • dl,dt,dd
  • table
  • form
  • hr
  • pre
  • blockquote
  • 要素の前後に改行が入り、ブロック要素同士縦に並ぶ
  • 横幅や高さを指定できる
  • 余白(margin,padding)が指定できる
インライン要素
  • a
  • span
  • b
  • img(※)
  • label
  • input(※)
  • select(※)
  • textarea(※)
  • 要素の前後に改行が入らず、インライン要素同士横に並ぶ
  • 横幅や高さを指定できない(※1)
  • ブロックレベル要素のように上下の余白設定(margin,padding)が効かない(※2)

 

(※1)img、input、textareaなどの一部のタグは幅高さや余白の設定が可能です。
(※2)余白について厳密にいうと外部余白marginについては上下は効きません(左右は効きます)
内部余白paddingについては上下左右設定できますがブロックレベル要素のように正しく余白が取れません。

 

イメージ的には、ブロックレベル要素は段ボールやコンテナのような箱に相当し、インライン要素は箱の中に入っている内容物に相当すると考えるとわかりやすいかもしれません。
ブロックレベル要素 インライン要素 イメージ

私もはじめよくわからないまま触っていて、インライン要素であれ?うまく余白が効かないということが結構ありましたので知っておくとレイアウト調整がスムーズにできると思います。

 

また、最近ではdisplay:flexやgridを利用して横並びにする方法も増えてきていますので余力のある方はぜひ覚えておきましょう。

なお、これからサーバーやドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

検索して記事を見つける

探したいキーワードを入力・検索して記事を見つけたい方はこちら

-CSS
-