只今、PHPを学習しております

(CSS)displayプロパティblock / inline / inline-block の違い

トッド

要素の多くは2種類に分けることができ、
ブロックレベル要素とインライン要素があります。
displayプロパティを用いることでその垣根を超えた対応ができます。

今回のトピックで紹介する block / inline / inline-block のほかにも、displayプロパティには沢山の値が存在していますす。全てを一括りにして紹介すると内容がブレてしまうのでここでは block、inline、inline-block 3つに絞って紹介していきます。

さぁ、ということで要素は大きく2種類に分けることができます。それが「ブロックレベル要素」「インライン要素」になります。

displayプロパティのblock / inline / inline-block は「ブロックレベル要素」「インライン要素」の性質を理解した上で使用するモノなんだということを知っておいてください。少し復習を挟みながら進めていこうと思います。

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

ブロックレベル要素は、基本的に要素の大枠を担う役割を持っており、代表的なモノには以下のような要素があります。

ph1-h6uloldivmenupredldircenternoscriptnoframesblockquoteformisindexhrtablefieldsetaddress

ブロックレベル要素の特徴
  • 横幅の初期値は親要素の横幅と同じになる
  • 要素は前後に改行をとり、縦に並ぶ
  • 横幅(width)と高さ(height)を指定することが可能
  • 上下左右の padding & margin による余白の指定が可能

そして忘れてはならないことが、ブロックレベル要素 > インライン要素 の関係があること。インライン要素の中にブロックレベル要素を挿入する事は出来ないルールがあります。


インライン要素の特徴

インライン要素は、ブロックレベル要素の中で記述されるべき要素であり、代表的なモノには以下のような要素があります。

ttibbigsmallemstrongdfncodesampkbdvarciteabbracronymaimgobjectbrscriptmapqsubsupspan bdoinputselecttextarealabelbutton

馴染みのある要素には、画像を表示するときに使う<img>タグとか、テキストの装飾などに使う<span>タグとか、リンクを貼る際に利用する<a>タグなんかがありますね。

インライン要素の特徴
  • 横幅の初期値は、要素の内容で決まる
  • 要素は改行されずに横に並ぶ
  • 横幅(width)と高さ(heigth)を指定できない
  • 上下左右の padding による余白の指定が可能
  • margin は左右には効くが、上下には効かない


さぁ、ここまでに「ブロックレベル要素」「インライン要素」について見てきました。ここからが、displayプロパティのお話になります。

displayプロパティの block, inline, inline-block の並びから察することもできるかも知れませんが、それぞれ blockはブロックレベル要素inlineはインライン要素の表示形式に関係しています。

displayプロパティには、「inline-block」という値もあります。まずはどういう値なのか?特徴・性質を見ましょう。

インラインブロックの特徴
  • 横幅の初期値は、要素の内容で決まる
  • 要素は改行されずに横に並ぶ
  • 横幅(width)と高さ(heigth)を指定できる
  • 上下左右の padding & margin による余白の指定が可能

特徴からも分かるとおり inline-block は「ブロックレベル要素」と「インライン要素」の特徴を兼ね備えたようなモノになっています。


という訳で、displayプロパティの block, inline, inline-block はそれぞれ、ここまでに紹介してきた「ブロックレベル」「インライン」に加えて「インラインブロック」というような表示形式を表すことができるプロパティであることが分かっていただけたと思います。

とあるdiv要素にdisplay: inline;を指定したら、そのdiv要素の表示形式はインライン要素になる。という具合です。

コメントを残す

メールアドレスが公開されることはありません。