peeks-blog

自分用メモ

随時追記していく

※参考：CSSのレイアウトについて

それぞれの用語の定義について

HTMLとCSSを学習する中で、
これらの要素の違いを理解する事は必須。

HTML5からはブロックレベル要素とインライン要素という
概念はなくなったが、一般的にはまだ使われている。

ブロックレベル要素

開始タグと終了タグで囲ったものを1つのブロックにするもの。ブロックレベル要素で作られたブロックは、要素が必ず横いっぱいに広がって、次の要素がブロックレベル要素の下に位置されるという特徴がある。ブロックレベル要素の中に他のブロックレベル要素やインライン要素を配置する事は可能。

インライン要素

要素（行）の途中に差し込む事ができるもの。ブロック要素の中に入れて、効果を付け足すような使い方をする。例えば＜p＞要素の＜strong＞要素のように、段落の中の一部を強調するような形で用いられる。インライン要素の中にブロックレベル要素を配置する事は出来ない。

「インライン」は「文中に埋め込む」と覚えればOK

中に（in）+行（line）で、inline

インラインブロック要素

インライン要素のなかで、画像やフォーム部品など、他のものに置き換わる要素のこと。「置換インライン要素」とも呼ばれる。通常のインライン要素は横幅（width）や高さ（height）を持たないが、置換インライン要素はこの２つを持つ。余白が付いてしまうので消したければmarginやpaddingで消してあげること。



※参考：クリエイティブ、プログラミング用語まとめ

主なブロックレベル要素とインライン要素のタグ

HTMLとCSSによるコーディネートでWEBページの見た目を整えるにあたって、
使うタグ全てがブロックレベル要素はインライン要素かを
判別出来るようになる必要がある。

ブロックレベル要素のタグ

div
p
table
header
main
footer
section
form
h1~h6

ul
ol
li
dl
（リスト要素は全てブロックレベル要素）
※参考：HTMLのリストとは？ ul, ol, dlの3種類をまとめ

インライン要素のタグ

span
a
strong
b
font
small
br
textarea
u
b

インラインブロック要素のタグ

img
input
object
select
button

ブロックレベル要素とインライン要素を変更する方法

displayプロパティを用いる事で、ブロックレベル要素をインライン要素に、
インライン要素をブロックレベル要素に変更する事が可能。

ブロックレベル要素なら「block」、インライン要素なら「inline」と
値を指定すれば変換することが出来る。

中央揃えにするために用いる方法

以下の２つがある、いずれも要素を中央寄せにする方法
「margin: 0 auto」
「text-align: center」

ブロック要素は「margin」を使う
インライン要素やインラインブロック要素は「text-align」を使う