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

知っておきたいインライン・ブロックレベルの意味とCSS「display」の使い方

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

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

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

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

リストはもともとブロックレベル要素ですが、displayを利用してインライン要素などに切り替えて横並びにすることができます。
ここでは、インライン要素とブロッックレベル要素の特性とdisplayプロパティの使い方を説明していきますね。
 

【メルマガ登録はこちら!!】
HTML・CSS・お役立ち情報をGET

HTML・CSS 自分でHP・Web制作したい個人事業主様向けWebスクール ウェブストエイト

 

ブロックレベル要素とインライン要素

<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については上下左右設定できますがブロックレベル要素のように正しく余白が取れません。

 

ブロックレベル要素について

 

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

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

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

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

 

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

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

 

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

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

 

インライン要素について

 

インライン要素の特徴

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

インライン要素の特徴

  • 要素の前後に改行が入らず、インライン要素同士横に並ぶ
  • 横幅や高さを指定できない(※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」を利用できます。
 

displayプロパティには主に以下のような設定があります。(他にも設定値はありますがここでは割愛します。)
 

項目意味備考
display:inline指定した要素をインライン要素にする改行なくなり横並びにできる。
幅・高さ・上下余白を指定できない
display:block指定した要素をブロックレベル要素にする改行ができて縦並びになる。
幅・高さ・余白を指定できる
display:inline-block指定した要素をインラインとブロックレベルの中間の性質にするインライン要素のように改行がつかず横並びになるが、
ブロックレベル要素のように幅・高さ・余白を指定できる
display:none指定した要素を非表示にする
(補足)
display:table-cell
テーブルtableタグのtd要素のようにする
(補足)
display:flex
最新のレイアウト技法「フレキシブルボックス」。柔軟な横並び・均等な高さを実現できる。まだWebブラウザの対応状況に注意が必要

 

displayプロパティを利用したサンプル

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

ブロックレベルのli要素をinline-block指定して横並びにして幅を指定

 

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

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

 

■上記のソースコード

 

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

display:blockでa要素に幅や高さ・余白を指定する

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

 

■上記のソースコード

 

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

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


 

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

 

なんで隙間ができているんですか??
 

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


 

下記のようにli要素を詰めて記載すると隙間は無くなります。

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

■上記のソースコード

 

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

【メルマガ登録はこちら!!】
HTML・CSS・お役立ち情報をGET

HTML・CSS 自分でHP・Web制作したい個人事業主様向けWebスクール ウェブストエイト

 

まとめ

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

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

CSSでレイアウトを組もうと思ったら、この辺を理解しているのってとても大事ですよね!
 

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

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

【メールマガジンにて限定情報配信】
WordPressやホームページ作成、SEO対策・ウェブ集客に関するウェブストエイトの独自ノウハウを読者限定で配信しています。まずはお気軽にご登録ください。

詳細はこちら

 

「自分で作る選択を!」個人事業主のための大阪のホームページ作成とWeb集客の教室・スクール 「Webst8」

ウェブストエイトは自分でホームページ制作・Web集客したい方向けの少人数制個別指導のスクール・塾です。 スタンダート48時間コースとプロフェッショナル80時間コースから選択して受講できます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

メルマガ登録はこちら

個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ