ブロックレベル要素とインライン要素について!


結論!

HTML要素はブロックレベル要素とインライン要素の2種類に分けられる!

要素が入れ子構造になると、「親要素」と「子要素」という言葉で要素間の関係性を表す!

以上が答えだと思います!

これについてわかりやすく書いていきたいと思います!

①.ブロックレベル要素!

HTMLの積み木を構成する要素です!

1つのブロックレベル要素が、1つのHTMLにおける積み木として存在します!

特徴は下記の通りです!

・横幅いっぱいで表示される四角い箱である!

・箱の中にテキストなどが表示される!

・中身に関係なく横幅いっぱいになる!

・高さは中身によって変わる!

・縦並びで表示される!

②.インライン要素!

インライン要素とは、テキストの一部として扱われる要素です!

基本的にブロック要素の中で使用され、「テキストの一部を太文字にする」など、

主に文字の装飾などに使用します!

特徴は下記の通りです!

・中身のテキスト量の分だけ横幅が広がる!

・高さは中身によって変わる!

・連続すると横並びで表示される!

③親要素と子要素について!

親要素とは、ある要素の1つの上位の階層にある要素です!

子要素とは、親要素から見てその下位階層にある要素です!

④親子構造を作る際によく使われる要素!

①header要素!

Webページ最上部のヘッダー専用のブロックレベル要素です!

*head要素と混同しがちなので注意すること!

②div要素!

Divisionの略で「特定の意味が無い」要素です!

汎用的に様々な用途で使うことができ、レイアウトを作成する際に重宝されます!

classセレクタを付与して使用します!

最も使用する頻度が高いブロックレベル要素です!

③footer要素!

Webページ最下部のフッター専用のブロックレベル要素です!

まとめ

淡々と書いていますが、ここは自分的にも理解するのが難しいです汗

理屈はわかるんですが、どうも応用になるとわからなくなります^^;

確実に理解していかないとですね汗

何か説明で間違っていたらご指導お願い致します(_ _)