For Want Of A Better Word

【HTML】【CSS】要素の横並び整理

   

要素を横並びさせる方法の整理。

 

 

①floatの利用

/*** float時のポイント ***/

①要素がfloat = 浮いている 状態であるため 親要素の中にfloat要素の高さは取得されない。
その対策として、clearプロパティ(clear:both)を使う。

●clearの利用方法1
float要素の後続要素に [clear:both]に直接設定する。そのまま。でも後続に都合の良い要素がないと…
空divを追加するとか、そういうことになっちゃう。

●clearの利用方法2 (clearfixというテクニック)
・後続要素が無い場合、擬似要素を利用してclearをする。
MicroClearfixというパターンが一般的。
floatしている要素の親要素、囲い要素にclearfix用のクラスを持たせることでfloatを解除する

 

#HTML

 

#CSS

 

②display:inline-blockの利用

IEはバージョン8から利用可能。もうオッケーだろ。

display:inline-blockの特長は、display:inlineのような振る舞いを基本としながら、display:blockのようにwidthやheight、marginやpadingの値が有効になる点。

 

floatを使わずに水平に並べることができ、また、親要素がtext-alignプロパティのスタイルを持っている場合は、それに従う。(text-align:centerとかで中央寄せとかが出来る。。。)

 

デメリットは、並べた要素の間に「謎のスキマ」が出来る。

このスキマの解決方法は

・HTML上の改行を無くす

・閉じタグを無くす

・要素間に空のコメントアウトを入れる

・CSSで解決する

 

こんな感じ..

display:table の利用

親要素に display:tableを設定。子要素にdisplay:table-cellを設定すると、テーブルのように扱える。

特長的な部分は、親要素のwidthが100%のとき。inline-blockやfloatと異なる、子要素の幅がwidthで指定されているとしても、幅100%を満たすために、その子要素のwidthが足りない分を補足してくれる。子要素で均等に分けたいなら、 table-layout:fixedを指定すればOK。

この仕様を利用すれば、子要素の数が不特定でも均等な幅で広がるレイアウトを作ることが出来るので、利便性の高いテクニックといえる。

デメリットとしては、親要素の幅を子要素があふれても改行されることはないので、複数行レイアウトは難しい。

 

以上。

参考:

フロントエンドエンジニア要請読本

micro-clearfix:http://coliss.com/articles/build-websites/operation/css/css-micro-clearfix.html

タグ要素一覧(インライン、ブロック要素):http://www.tagindex.com/html_tag/elements/

CSSの display: inline、display: block、display: inline-block をマスターしよう!:http://taneppa.net/display-inline-block/

 

 - css

  関連記事

メモ_gushから_スクロールに応じてHTML部品の表示 右下前に固定表示

要は最初は要素は固定で右下に表示 固定は下記で実施。 position: fix …