• コーディング ファクトリーHOME
  • Coding Methodology
  • 第25回 汎用性の高いパーツ作成(横並び可変ボックス)

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

第25回 汎用性の高いパーツ作成(横並び可変ボックス)

デザイン上は一見簡単そうにみえるレイアウトでも、要件によって、一工夫が必要なコーディングになる場合があります。たとえば、同じデザインのボックスが横に複数並んでいるデザインはよく見かけますが、複数ボックスに対して、テキスト量に応じで高さが可変、かつ、下ラインを常にそろえたい、というニーズがあった場合、複数ボックスを別々に並べてしまうと、1ボックス内のテキスト量が変わると1つのボックスの高さだけが変わり、それ以外のボックスは伸びなくなってしまいます。今回は、このようなパーツを、HTMLとCSSだけでシンプルかつ高い汎用性を持たせてコーディングする方法をご紹介します。※Internet Explorer 6に関しては、xml宣言ありの状態を想定したコーディング例になっています。

手順1:複数ボックスをまとめて可変に

手順1

たとえば3つのボックスが横並びになっている場合、まず、3カラムが繋がった長い画像を用意し<div class="test">に背景として下固定します。そしてさらに、padding-bottom:15px;として背景を固定したときに下の角丸部分を表示させます。
次に、<li>に同じ背景を左上固定で設定することで、どれかひとつの内容が増えると<div class="test">がそれに併せて伸び、全ての<li>要素が可変しているように見せることができます。

手順2:ソースを同一に

手順2

これだけでは、全ての<li>要素にmargin-right:10px;がかかっているため、3番目の<li>要素のmarginを切らないとカラム落ちが発生してしまいます。<li class="last">などでもいいのですが、HTMLを編集する手間がかかってしまうため、class属性を使用せず.testにmargin-right: -10px;を指定し相殺することでカラム落ちを防ぐことができます。
この際、IE6ではmargin-right: -10px;を適用してくれないので、IE6は.testではなくulに再度指定を行います。

手順3:<li>の増減に応じて背景を可変させる

上記の設定だけだと、li要素が2つや1つになったときに.testの背景が常に表示されてしまいます。そこで、.testに幅を指定せずにfloat: left;を設定することで、.test要素は常に最小サイズを保持します。そのため.testの包囲要素にclearfixなどを指定しておく必要があります。

完成形:シンプルなソースで、テキスト増減に対応しつつ、要素の高さを揃えるコーディング

完成形

以上で、下記のような横並びのボックスを、ひとつのボックス内のテキスト量が増減したら他のボックスも追従して高さがそろって変更されるように設定することができます。

完成形

このほかに、JavaScriptを使用して高さを揃えたり、classを追加してコーディングする方法もありますが、その後の変更に手間取ってしまったり、別のコーダーに引き継ぐ際に分かりづらくなってしまうことがあります。
その箇所のためだけにパーツをコーディングするのではなく、別ページに出てきても組み込めるようにしたり、他のコーダーにわかりやすいコーディングを心がけることで、多人数での制作案件や、運用後に別の担当者に引き継ぐような場合にも、時間を短縮してスムーズに進めることができます。

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

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

    お問い合わせ

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

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