36歳建設業がプログラミングを始めてみる　2. HTML vol.2

2‐1 ブロック・インライン要素

とりあえず何もわからないが、ひたすら反復が良さそうだ。
一旦progateをざっと流れを暗記しながら着実に整理しよう。

ブロック・インライン要素とはなにか？

インライン要素
→行の中の一部のまとまり（主に行内装飾のために利用される）
ブロック要素
→行全体のまとまり

わかりませんｗ前回HTMLは色々な要素の集合体と理解した。
要素にも種類があるということなのだろう。
それぞれ見ていこう。

インライン要素とは？
インライン要素は、主に文章の一部を装飾したり、特定の部分に対してスタイルを適用するために使用されます。ざっくり説明すると、行の中の一部のまとまりです。
インライン要素は、他の要素と同じ行に配置され、その要素の幅や高さを変更しません。つまり、インライン要素は周囲のテキストや要素の流れを崩さず、行の中で連続したまとまりとして扱われます。

( ,,`･ω･´)ﾝﾝﾝ？なんかとりあえず「あんまり影響させない要素」ということなのかな？

ブロック要素とは？
ブロック要素はブロックレベル要素とも呼ばれ、ページの構造やレイアウトを定義するために使用されるHTMLの要素です。ざっくり説明すると、行全体のまとまりを作るのがブロック要素です。
ブロック要素は、ページのレイアウトや構造を構築するために使用され、幅と高さを持ち、周囲の要素とは余白や境界線で区切られるのが基本。

んーとりあえず、ブロック要素は独立していて、インライン要素はその中に入れる要素のようだね。こんなイメージか。

▲イメージ

それぞれの例は下記の通り
インライン要素：<a>,<span>
ブロック要素　：<div>,<p>,<h1~h6>,<ul>

イメージ的には単語のような短いものに対して要素を付けたい場合はインラインを活用し、文や文章などある一定まとまりがあるもの全部に要素分けする場合はブロック要素という理解で一旦進めたいと思う。

まとめると

HTMLの中で要素が分かれ、大きく２つ「インライン要素」「ブロック要素」となる。

インライン要素は、ブロック要素内にも組み込め、ブロック要素は独立している

「トイレ」というブロック要素の中で、「白い便器」「TOTO」などのインライン要素という形でイメージしてみたいと思う。

まだまだよくわかっていないので、ひたすらprogateを反復しつつ、すすめてみる。

つづく