<プロが教えるコーディング>CSS3の疑似クラスを使った高さ揃え | 東京IT新聞

<プロが教えるコーディング>CSS3の疑似クラスを使った高さ揃え

コンシューマー その他

CODING  FACTORYです。2010年6月から月1回のペースでお届けしている「Coding Methodology」は、1,759案件のHTMLコーディング案件を納品した中から生み出された、今すぐ役立つ実践的コーディングノウハウです。ちょっとした工夫や発想の転換など、コーディングの手法やスムーズに進めるコツを紹介します。

 floatで複数の要素を横並び折り返しで並べるような場合、高さが揃っていないとレイアウトが崩れてしまいます。

 レイアウトが 崩れないようにするために、今回はjsを使用しないでCSS3の:nth-child(n)の設定のみで解決するテクニックをお伝えします。

nth-child(n)とは

 CSS3で定義された:nth-child()疑似クラスは、ある要素の隣接している子要素を最初から数えて、n 番目にあたる要素にスタイルを適用します。特にリストなどの同じ要素がたくさん続くHTMLに対してスタイルを適用するときにとても便利です。

nth-child(n) 奇数・偶数・n番目など、要素を指定する時によく使うセレクタ

■ n番目

 E:nth-child(1)

 整数の場合は、そのままn番目

■奇数番目

 E:nth-child(2n+1)

 nには0から順に整数が入り計算されるので、奇数番目指定

 E:nth-child(odd)

 奇数番目指定、(2n+1)と同じ結果

■偶数番目

 E:nth-child (2n)

 nには0から順に整数が入り計算されるので、偶数番目指定

 E:nth-child(even)

 偶数番目指定、(2n)と同じ結果

横並びリストの数が可変の場合

 レイアウトの崩れは、floatで横並びにした要素の高さがそれぞれ違い、それらの下に続く要素が本来想定している位置とは異なる位置へ回り込んでしまうために起こる現象です。(図1)

 この現象をcssのみで解決する方法として、nth-child(n)を使用し区切りたい箇所でclear: both;を使用することで、要素の位置を整えます。(図2)

図1:横並びリストが崩れた例
図2:clear: both;を使用し、要素の位置を整える
htmlのマークアップとCSS記述
執筆担当者 黄 思嘉(こう・しか) コーディングファクトリー コーディングチーム コーダー
《株式会社モノサス》

特集

page top