HTML ブロックレベルとインライン 要素の意味と違い【CSS display block inline】

今回は、HTMLのブロックレベル要素とインライン要素の意味と違い、およびCSSのdisplayプロパティを説明します。
 
displayを使ってブロックレベル要素とインライン要素の変換が可能で、２つの違いとdisplayを使ってレイアウトの細かい調整がしやすくなります。
 

もくじ

以下は本記事のもくじです。

1. 1. ブロックレベル要素とインライン要素
2. 1. 1-1. 概要
   2. 1-2. ブロック要素
   3. 1-3. インライン要素
   4. 1. 1-3-1. インライン要素での余白の問題
   5. 1-4. CSS displayプロパティ
   6. 1. 1-4-1. ブロック要素をインライン要素にする
      2. 1-4-2. インライン要素をブロック要素にする
      3. 1-4-3. よく使うシーン aタグ
3. 2. まとめ

 
それでは説明に移っていきます。
 

スポンサーリンク

 
 

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

1-1. 概要

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

 

ブロックレベル要素は段ボールやコンテナのような箱に相当し、インライン要素は箱の中に入っている内容物に相当します。

 

私のイメージですが、ブロックレベル要素はお弁当箱(およびその仕切り)で、インライン要素はお弁当箱の中に入った食べ物に相当すると考えると理解しやすいと思います。

 

 

このブロックレベル要素とインライン要素には、以下のような違いがあります。

 

■ブロック要素

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

 

■インライン要素

• 要素の前後に改行が入らず、インライン要素同士横に並ぶ
• 横幅や高さを指定できない
• 余白(margin,padding)が一部指定できない

※image,textarea,inputなど一部例外要素を除きます。

 

 

1-2. ブロックレベル要素

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

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

 

よく使われるものを例に挙げると以下のようなものがあります。

• <div>
• <h1>〜<h6>
• <p>
• <ul>,<ol>,<li>
• <table>
• <fieldset>
• <form>

etc…

 

先ほどの特徴を実際に例を挙げて説明してみます。

 

例1. pタグを使った例

[pタグ1]pタグはブロック要素です。

[pタグ2]ブロック要素は改行が入ります。

 

■HTML文

 

 

例2. divタグを使った例

 

■HTML文

 

改行されてブロック要素同士は縦並びすること、幅や高さを指定できること、余白を設定できることを確認しました。

 

 

1-3. インライン要素

次にインライン要素について説明します。インライン要素はブロックレベル要素の中身として用いられることが多く、以下のような特徴があります。

• 要素の前後に改行が入らず、インライン要素同士横に並ぶ
• 横幅や高さを指定できない(※)
• 余白(margin,padding)が一部指定できない(※)

 

よく使われるHTML要素で例に挙げると以下のようなものがあります。

• <a>
• <span>
• <strong>
• <label>
• <select>
• <img>(※)
• <input>(※)
• <textarea>(※)

etc..

(※)のタグは幅高さや余白の設定が可能

 

先ほどと同様に、実際に例を挙げて特徴を説明します。

 

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

 

■HTML文

 

1-3-1. インライン要素の余白設定

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

 

• marginの上下は効かない（左右は効く）
• paddingの上下左右効くが、他の要素の領域を考慮せず侵入する

 

aタグでpaddingやmarginの設定をして試してみます。

 

例4. aタグで余白(pading,margin)を設定する
[aタグ3]margin:40pxを指定しています。[aタグ2]余白の設定はしていません。[aタグ1]padding40pxを指定しました。

 

 

■HTML文

 

paddingで内側の余白を設定する事ができますが、他の要素の領域に侵入してしまいます。
また、左右に対するmarginの余白設定は効きますが、上下に対するmarginの余白設定が効きません。

 

そもそもインライン要素は箱ではなく中身ということを考えれば、きっちり余白指定したり幅や高さを指定することになんとなく無理があることがわかるのではないかと思います。

 

 

ただし、インライン要素の中には例外があり、img、input、textareaのように幅や高さ、余白の設定ができるものもあります。
 

例5. inputを使った例
width200px　height50px

 

■HTML文

 

ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。
 
一方、インライン要素の中には文章や他のインライン要素を配置できますが、 中にブロックレベル要素を配置することは文法的にはできません。（食べ物の中にお弁当箱は入れられませんね)。
 

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

そういったときにCSSの便利なプロパティで「display」があり、displayの指定でインライン要素をブロックレベル要素にしたり、ブロックレベル要素をインライン要素にしたりすることができます。
 
 

1-4. CSS displayプロパティ

あるブロック要素に対して、CSSで「display:inline;」と指定するとその要素はインライン要素の性質になります。逆にあるインライン要素に対して、「diplay:block;」と指定するとその要素はブロック要素の性質になります。
 

この性質を指定してレイアウトをいろいろな調整する事ができます。
 

1-4-1. ブロック要素をインライン要素にする

先ほどのdivタグをdisplay:inlineでインライン要素にしてみると、幅と高さ、余白の設定が変わりレイアウトがむちゃくちゃになっているのがわかると思います。

例6. divタグ

 

■HTML文

 

上記のような使い方はあまり見かけませんが、よく使われる例として、リスト要素ul,liなどを横並びにするためにインライン要素にすることがあります。

 

■ブロック要素のままの場合

• li要素1
• li要素2
• li要素3

 

■liをdisplay:inlineでインライン要素にする

• li要素1
• li要素2
• li要素3

 

このように必要に応じてブロック要素をインライン要素のように変更する事ができます。

 

1-4-2. インライン要素をブロック要素にする

次にインライン要素をdisplay:block;でブロック要素に変更する例を挙げてみます。

今後はaタグをdisplay:block;でブロック要素にしてみます。
 

[aタグ3]margin:40pxを指定しています。[aタグ2]余白の設定はしていません[aタグ1]padding40pxを指定しました
 

先ほどはむちゃくちゃだったレイアウトが幅高さ、余白が意図した通りに動作している事がわかると思います。
 
 

1-4-3. よく使うシーン aタグ

aタグはインライン要素なので高さと幅を指定できませんが、display:blockでブロック要素にして高さと幅を設定できます。これにより、文字以外の部分もaタグの範囲内となります。
 

例. aタグはインライン要素のまま

 

■HTML

文字の部分にカーソルを合わせないとリンクがアクティブにならないと思います。
 
 

■aタグをブロック要素にする

 
ブロック要素にしているので、枠内にカーソルを合わせるとリンクがアクティブになります。
 
 

スポンサーリンク

 
 

2. まとめ

今回は、ブロックレベル要素とインライン要素の性質と違いについて例を交えながら説明しました。また、displayプロパティによって、ブロックレベル要素とインライン要素の性質を変換することができることを説明しました。
 

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

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

こちらの記事もおすすめです

【 CSS 入門 】CSSの基本とよく使うプロパティ




アメブロ メニューバーの作り方２ 標準タイプ【ameblo デザイン カスタマイズ】




CSSによる 角丸 の枠や背景 の作り方【HTML CSS3 border-radius 円 】




アメブロ プロフィール 画面のカスタマイズ 設定方法 【ameblo デザイン カスタマイズ 】




アメブロ 枠 (メッセージボード)を記事内に作る方法【ameblo デザイン カスタマイズ】