プログラミング学習の初期からよく使うブロック要素とインライン要素についてざっくり説明。
ブロック要素は一つのかたまりとして認識され前後で改行が入る要素です。
インライン要素は改行されない要素です。
ブロック要素
ブロック要素の例としてdivタグで説明。
開始タグ<div>と終了タグ</div>で囲まれた範囲をひとかたまりとして定義します。
実際のコードとブラウザでの表示はこんな感じ。
左側がHTMLコードで右側が実際のブラウザでの表示になります。
See the Pen MdoqWj by Nishiken (@bukblock) on CodePen.
ブロック要素は必ず改行される
たとえば、下図のコードのように<div>〜</div>の中にさらに<div>〜</div>を記述したとしても
実際にはHello World と Hello Thailand がそれぞれ改行されて表示されます。
※Hello World Hello Thailandというように１段落に横並びには表示されません。
See the Pen NVgLPP by Nishiken (@bukblock) on CodePen.
インライン要素
インライン要素の例としてspanタグで説明。
インライン要素であるspanタグは文章中の一部をcssで調整や装飾する時に使われます。
HTML中の<span>〜</span>で囲まれたHello Worldの文字色をcssで赤色に変えています。
※HTMLボタン、CSSボタンそれぞれを押すとコードを見る事ができます。
See the Pen BeZOyX by Nishiken (@bukblock) on CodePen.
インライン要素は改行されない
たとえば下図のようにブロック要素divタグの中の Hello World Hello Thailand という文字の
Hello Thailandだけをspanタグで囲んだ場合、改行はされずに一つの段落にHello Worldと
Hello Thailandが横並びで表示されます。
See the Pen JqJaYL by Nishiken (@bukblock) on CodePen.
上図のHTMLコードのspanタグをdivタグに置き換えてみるとブロック要素の中に
ブロック要素という配置になるので改行され、２段で表示されます。
See the Pen VOWGeE by Nishiken (@bukblock) on CodePen.
要素、配置のルールとHTML5
ここまでブロック要素、インライン要素を説明してきました。
が、HTML5ではコンテンツモデルという新たな分類が設定され、ブロック要素、インライン要素
の分類は無くなっています。
従来はインライン要素の中にブロック要素は配置できないといったルールがありましたが
HTML5ではブロック要素、インライン要素の分類がないため、そのルールは無くなっています。
タグの意味を理解して使用していれば問題ない
とは言っても、タグの意味・機能を理解して使用していれば特に問題はありません。
コンテンツモデルの分類を知らなくても大きなミスに繋がることはないと思います。
ただし、これからこのコンテンツモデルが主流になっていくと思われますので、興味のある方は
ググって理解を深めていってください。
HTML5、コンテンツモデルあたりでググれば色々情報が出てくるでしょう。
以上です。
