CSSのブロックとインライン、レイアウトについて

今回はCSSを組む時のブロックレベルとインラインの基本とレイアウトに関して。

ブロックレベルとインライン

ブロックレベル要素

その名のとおり、HTML上でブロックを構成する要素。div,p,table,ul,li,h1～h6,formなど。

• ブロックレベルは縦につまれる → つないで書いた場合、改行される。
• 幅が定義される→ width,height,margin,padding,borderなどがプロパティとして存在している
• ブロックレベルはブロックレベルとインラインを包有できる
• display:inlineでインライン要素にできる
• 子要素の幅を指定していない場合、包有要素がその幅を決める(親でないときもあり。例:position)

インライン要素

ブロック要素の一部であり、段落の一部の要素に対して使われる。a,span,img,strong,fomの要素全般,

• 幅という概念がないので、基本的に横に並ぶ
• width,heightがない。margin,paddingは左右のみ。上下は見た目にはわからない・・・

レイアウトに関して

float

レイアウトを組む時に結構悩みの種ですね。

以下にまとめを。リンクでいろいろと解説してくれているのでありがたいっす。

• floatは単に左右によるのではなく、浮くことになるので子要素がすべてfloatした場合、親要素からみると存在しない状態になってしまう。
• 上記の性質のため、親>子がすべてfloatした場合(ulとliなど)は、親の高さや幅が0になる。そのため親要素にclass=”clearfix”を入れるか、overflow:hiddenを与える方法が一般的ですが、overflow:hiddenは禁じ手と考えている方もいるようです。
• 上記の性質のため、後続要素を配置する場合(footerなど)にはclear:bothなどでfloatの下への回り込みを解除する必要がでてくる。
• floatさせる要素は原則widthを指定する

参考リンク

• CSSのfloatに困った時に見直したい6つのポイント、floatがどのように機能しているか分かりやすく解説
• float段組の基本｜floatレイアウトホームページ作成講座
• CSSの【float】についてちょっと本気出して説明してみた。
• CSSのclearfixにoverflow:hiddenを使用してはいけない理由

position

通常のレイアウトからずれたものや重なった配置などをレイアウトできる。

ある基準点を対象にそこからどれくらいの位置にあるか、という記述になる

参考リンク

CSSの基本 レイアウトのおさらい
【CSS】意外と難しい「position」の使い方を詳しく解説してみた