コーディングメソドロジー

第27回 汎用性の高いパーツ作成(横並びリスト)

フロートなどで横並びさせたリストで、複数の要素を横並び折り返しで並べるような場合、右端の要素だけ、マージンを切る(右マージンの設定をゼロにする)ことはよくあると思います。このようなケースで、右端の要素に毎回classを付与することなく、すべての要素を同一ソースで再現しておけば、サイトの運用をはじめてから要素が追加されたり並べ替えが発生した場合でも、右端になった要素にclassを付与し直さずに済むため、運用が非常に楽になります。今回はそれをCSSの設定のみで解決するテクニックをお伝えします。(Internet Explorer 6に関しては、xml宣言ありの状態で設定しています)

通常のli要素を作成する

通常のli要素を作成する

まずは<li>を単純に並べる組み方でコーディングします。今回はカラムの幅が620pxで<li>要素それぞれの幅が200px、マージンは10pxという想定でソースを記載しています。ただし、このままだと3番目の<li>要素の右マージン(margin-right:10px;)の影響でカラム落ちが発生し、本来なら3列で横並びになってほしい<li>要素が、2列にしか並ばなくなってしまいます。

幅の設定とoverflowでカラム落ちを防ぐ

幅の設定とoverflowでカラム落ちを防ぐ

3,6,9番目の<li>要素にclass="last"などを設定して、右マージン(margin-right)を左列・中央列とは別に0に設定し、カラム落ちを解決するという方法でも、デザインの再現は可能です。しかし、今回の目的のように、全ての<li>要素を同一ソースで実現をするためには、<ul>要素と<div>要素に幅を設定するという方法があります。
まず、<ul>要素に<li>要素3つ分を超える幅650pxを設定し、<li>要素のカラム落ちを防ぎます。
その後、<div>要素に本来の幅620pxとoverflow:hidden;を設定することで、表示領域を強制的に打ち切ります。
この設定をすることにより、<li>要素のスタイルを列ごとに変更することなく、同一ソースでの横並び折り返しレイアウトが実現します。

CSSをより応用してより汎用性の高いコーディングを

CSSでのレイアウト制御には様々な手段や方法がありますが、汎用性を高めたりシンプルなソースで再現をしようと思うと、その状況で最適なコーディング方法は特定されていきます。デザインを見たり、その後の運用方法を想定したりして、さまざまな組み方の可能性のなかから、ベストな方法が選択できるようになるためには、CSSのプロパティや値をより深く理解しておく必要があります。
今回は比較的よく使う<li>要素の組み方についてお伝えしましたが、それぞれのプロパティに関して「どうすれば汎用性が高く、シンプルなコーディングが出来るか」を考えると、これまでよりも適切な組み方を発見することも多いと思います。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム