レスポンシブに使える可変の箱型リストを考えてみました

   

 
レスポンシブ対応のウェブサイトで、可変の箱型リストを実装するのが少し大変でした。
(タイトル画像のようなものです)
 
flexboxが使えると一番良いのですが、すべてのブラウザに対応していないので、
レスポンシブ対応のウェブサイトでは使えません。
 
そうなると、横並びにした要素をパーセンテージで指定するのが良さそうです。
ただし、パーセンテージの計算にちょっとコツが必要だったので記載しておきます。
 
 
デモページも作成しましたので、あわせてご覧ください。
 
 

レイアウトその1

まずは、このようなレイアウトの場合。
レイアウト1のデザイン例
画像やテキスト情報が格納されたボックスが並び、
ボックスの端を、親のdivの横幅にあわせます。
 
 

実装イメージ

親divの横幅よりも大きな子要素(この場合はul)を作って、
ネガティブマージンで中央寄せにしています。
画像やテキスト情報が格納されたボックス(この場合はli)には
パーセンテージでマージンを取っています。
レイアウト1の実装イメージ
 
 

HTML 

<div class="listBox_001">
<ul>
<li><img src="img/img_001.jpg" width="100" height="100"></li>
<li><img src="img/img_001.jpg" width="100" height="100"></li>
<li><img src="img/img_001.jpg" width="100" height="100"></li>
<li><img src="img/img_001.jpg" width="100" height="100"></li>
<li><img src="img/img_001.jpg" width="100" height="100"></li>
<li><img src="img/img_001.jpg" width="100" height="100"></li>
<li><img src="img/img_001.jpg" width="100" height="100"></li>
</ul>
</div>
 
 

CSS 

.listBox_001{
 width: 90%; /* 任意の数値を */
 margin:0 auto;
}
.listBox_001 ul{
 width: 101.4%;
 margin: 0 0 0 -0.61%;
}
.listBox_001 li{
 display: inline-block;
 width: 32%;
 margin:0 0.65% 10px 0.65%;
 text-align: center;
}
.listBox_001 li img{
 width: 80%; /* 任意の数値を */
 height: auto;
}
 
 

レイアウトその2

先ほどは、画像やテキスト情報が格納されたボックスの端を
親divの横幅にあわせましたが、
今度は、ボックス(li)の中の画像の端を、親divの横幅にあわせる場合。
レイアウト2のデザイン例
 

実装イメージ

ulにはネガティブマージンを指定し、liの横幅を33.3333%としマージンは0にします。
レイアウト2の実装イメージ
 
HTMLはほぼ同じなので、CSSだけ
 
.listBox_002{
 width: 90%;
 margin:0 auto;
}
.listBox_002 ul{
 font-size: 0;
 width: 107%;
 margin: 0 0 0 -3.5%;
}
.listBox_002 li{
 display: inline-block;
 width: 33.3333%;
 margin:0 0 10px 0;
 text-align: center;
}
.listBox_002 li img{
 width: 80%;
 height: auto;
}
 
 
 
以上です
 
 
「レイアウト2」で、画像のwidth:80%を変更した場合
各marginの値が変わってきますので計算をして実装してみてください。
 
ただし、計算通りにパーセント指定をするだけではうまくいかないので、
画面を見ながらマージンの調整が必要になります。
 
 
もっと上手な実装方法があれば、ぜひぜひ教えてください!
 

 - ウェブデザイン