[CSSレイアウト例】等間隔の四角形で完璧なページレイアウトを実現する方法

代表的なレイアウト例

上図のレイアウトでは、四角の間に隙間があり、その隙間は固定されています。レイアウトが完成したときに、素早く要素を追加してもレイアウトが維持されるようにするには、例えばどのようにすれば完璧でしょうか。そして、2行目が表示されても、レイアウトに影響を与えないようにすることができます。中身はあまり変えなくていいのです。

幅を100%に設定し、ブロック要素のデフォルト幅を設定する

ブロック要素のデフォルトの幅は1行を占有するため、要素に100%を設定することと混同しやすいのです。実際、この2つは親要素を埋め尽くすので、同じものだと思いがちです。しかし、両者には大きな違いがあるのです。
100%に設定すると、要素の幅は常に親要素と同じになり、要素に設定したマージンは要素の幅の変更に影響しません。もちろん、親要素の幅だけが要素の幅に影響します。幅を設定せず、ブロック要素を1行に排他的にした場合、要素の幅は親要素だけでなく、要素のマージンにも影響されます。

1行を占有するブロック要素の幅にマージンを設定した場合の効果

以下の2つのルールを覚えておきましょう。

• widthが設定されていないブロックレベル要素にマージン（水平）を設定する場合、マージン値（正）と変更後の要素の幅の合計が親要素の幅と等しくなること
• 幅が設定されていないブロックレベル要素にマージン（水平）を設定する場合、マージン（マイナス）の値は、その要素の幅が親要素からどれだけはみ出るかを正確に表すものです

次の画像のように

ルール1の例。

ルール2の例です。

ソリューション

平均面積の割り算

まず横長の領域で、5等分して水平に並べ、次にフローティングの水平配置で、各要素を平均20%に設定します。

<ul class="list">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

.list{
 overflow: hidden;
}
.list li{
 width: 20%;
    height: 100px;
    float: left;
}

各エリアに、右マージン間隔でコンテンツを配置します。

<ul class="list">
  <li>
   <div class="content"></div>
  </li>
  <li>
   <div class="content"></div>
  </li>
  <li>
   <div class="content"></div>
  </li>
  <li>
   <div class="content"></div>
  </li>
  <li>
   <div class="content"></div>
  </li>
</ul>

.list{
 overflow: hidden;
}
.list li{
 width: 20%;
    height: 100px;
    float: left;
}
.content{
 margin-right: 10px;
}

この時点で、最後の要素にも10pxの余分なスペースがあることが想像できますので、最後のステップはそのスペースをどう修正するかということです。

親要素を引き伸ばすことで末尾の隙間を隠す

listに別の要素を与えて、その親要素の下に、余分な部分を隠す程度に引き伸ばします。

<div class="wrapper">
  <ul class="list">
    <li>
      <div class="content"></div>
    </li>
    <li>
      <div class="content"></div>
    </li>
    <li>
      <div class="content"></div>
    </li>
    <li>
      <div class="content"></div>
    </li>
    <li>
      <div class="content"></div>
    </li>
  </ul>
</div>

.wrapper{
 width: 800px;
    overflow: hidden;
}
.list{
 overflow: hidden;
    margin-right: -10px;
}
.list li{
 width: 20%;
    height: 100px;
    float: left;
}
.content{
 margin-right: 10px;
}

実際の結果をご覧ください。結局、最初にお見せした通りになっていますね。そして、このレイアウトには多くの拡張性があります。4つの要素が並んでいる場合は、各要素の幅を25%に設定し、要素数から1を引けばいいのです。

今回は、インターバルスクエアレイアウトをページに完璧に実装する方法についての記事です。インターバルスクエアレイアウトについての詳しい情報は、Script Houseの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。