[HTML] HTMLタグの基本-ブロックレベル要素・インライン要素

  HTML ,

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
ブロックレベル要素 インライン要素

HTMLやCSSの勉強を始められた方は、ブロックレベル要素インライン要素について初めにぶち当たる壁であると思うので、しっかりと理解したうえで勉強を進めていくために、詳しくご紹介していきたいと思います。

HTMLで定義されている要素のうち、bodyの中で使用される要素の多くは、ブロックレベル要素か、インライン要素に分類されます。この分類により、どの要素の内側にどの要素を配置できるかなどのルールが定められているため、そういったところについてご紹介していきます。

ブロックレベル要素

ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロックとして親要素の幅全体に広がって配置されます。言い換えると基本的に横幅めいっぱいに広がる要素のことです。
ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行を伴います。

ブロックレベル要素には、以下のもののことを言います。

h1-h6、p、div、table、ul、ol、address、blockquote、center、
dl、fieldset、form、hr、noframes、noscript、pre

インライン要素

インライン要素は、主にブロックレベル要素の一部として用いられる要素で、文章中の一部分として扱われます。

要素の中の要素のように、段落のなかの一部を強調(太字・色・リンクなど)するような使われ方をする要素です。 一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。

インライン要素には、以下のもののことを言います。

a、span、br、strong、img、input、textarea、select、abbr、code、
em、font、b、big、cite、i、kbd、label、q、s、samp、acronym、dfn、
small、strike、sub、sup、tt、u、basefont、bdo、var 

配置ルール

ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。
一方、インライン要素の中には、文字データや他のインライン要素を配置することができます。
インライン要素の中にブロックレベル要素を配置することはできません。

正:ブロックレベル要素の中にインライン要素を配置
<p><strong>段落となります。</strong></p>
誤:インライン要素の中にブロックレベル要素を配置
<strong><p>段落となります。</p></strong>

displayプロパティ

display:inline;
display:block;

displayプロパティをブロックレベル要素・インライン要素に設定することで、見た目を変更することができます。
当然のことながら、上記で述べたように「見た目」であって、HTMLでの親子関係に影響があるわけではありません。
インライン要素であるa要素の子にブロックレベル要素のdiv要素を記述できるわけではありません。(できたら、いろいろと便利なんですけどね)

SNSでもご購読できます。

コメントを残す

*