自分用メモ
随時追記していく
※参考:CSSのレイアウトについて
目次
それぞれの用語の定義について
HTMLとCSSを学習する中で、
これらの要素の違いを理解する事は必須。
HTML5からはブロックレベル要素とインライン要素という
概念はなくなったが、一般的にはまだ使われている。
ブロックレベル要素
開始タグと終了タグで囲ったものを1つのブロックにするもの。ブロックレベル要素で作られたブロックは、要素が必ず横いっぱいに広がって、次の要素がブロックレベル要素の下に位置されるという特徴がある。ブロックレベル要素の中に他のブロックレベル要素やインライン要素を配置する事は可能。インライン要素
要素(行)の途中に差し込む事ができるもの。ブロック要素の中に入れて、効果を付け足すような使い方をする。例えば<p>要素の<strong>要素のように、段落の中の一部を強調するような形で用いられる。インライン要素の中にブロックレベル要素を配置する事は出来ない。「インライン」は「文中に埋め込む」と覚えればOK
中に(in)+行(line)で、inline
インラインブロック要素
インライン要素のなかで、画像やフォーム部品など、他のものに置き換わる要素のこと。「置換インライン要素」とも呼ばれる。通常のインライン要素は横幅(width)や高さ(height)を持たないが、置換インライン要素はこの2つを持つ。余白が付いてしまうので消したければmarginやpaddingで消してあげること。※参考:クリエイティブ、プログラミング用語まとめ
主なブロックレベル要素とインライン要素のタグ
HTMLとCSSによるコーディネートでWEBページの見た目を整えるにあたって、
使うタグ全てがブロックレベル要素はインライン要素かを
判別出来るようになる必要がある。
ブロックレベル要素のタグ
divp
table
header
main
footer
section
form
h1~h6
ul
ol
li
dl
(リスト要素は全てブロックレベル要素)
※参考:HTMLのリストとは? ul, ol, dlの3種類をまとめ
インライン要素のタグ
spana
strong
b
font
small
br
textarea
u
b
インラインブロック要素のタグ
imginput
object
select
button
ブロックレベル要素とインライン要素を変更する方法
displayプロパティを用いる事で、ブロックレベル要素をインライン要素に、
インライン要素をブロックレベル要素に変更する事が可能。
ブロックレベル要素なら「block」、インライン要素なら「inline」と
値を指定すれば変換することが出来る。
中央揃えにするために用いる方法
以下の2つがある、いずれも要素を中央寄せにする方法
「margin: 0 auto」
「text-align: center」
ブロック要素は「margin」を使う
インライン要素やインラインブロック要素は「text-align」を使う

この記事へのコメントはありません。