HTMLは1つのブロック(画面)をさらに細かいブロックに分けたり(ブロック要素)、そのブロックの中に文字等を並べる(インライン要素)ことができるプログラミング言語。また、CSS言語を用いることでその見た目を思い通りにできる。
と僕は理解しています。
ブロック要素
「div」や「h1」などを用いて記述可能領域を形成し、文書等を表現する要素
特徴
-ブロック要素の前後に改行が入り、要素同士は縦に整列
-横幅や高さを設定可能
-ブロックの外側余白(margin)や内側余白(padding)を設定可能
インライン要素
「a」や「span」などを用いてブロック要素内における文書等を横並びに表現する要素
特徴
-インライン要素の前後に改行は入らず、要素同士は横並びに整列
-ブロック要素内に横並びに記述する要素であるため、横幅や高さ、余白を設定できない
2つの要素を使いこなすために
CSSの「display」や「float」プロパティを用いることで、レイアウトを調整可能
CCCプロパティ | 項目 | 意味 | 特徴 |
---|---|---|---|
float: | left | 要素が左に流れ、後続の要素が右側に回り込む | 「clear:both」「cleat:○○」を用いることで、流れ込みを防げる |
right | 要素が右に流れ、後続の要素が左側に回り込む | 上と同様 | |
display: | inline | 要素がインライン化 | |
block | 要素がブロック要素化 | ||
inline-block | 要素がインライン要素とブロック要素両方の特徴を持つ | ||
none | 非表示にする | ||
flex | 親要素に指定すると、子要素が横並びになる | フレックスボックスで検索 |