レスポンシブに使える可変の箱型リストを考えてみました
レスポンシブ対応のウェブサイトで、可変の箱型リストを実装するのが少し大変でした。
（タイトル画像のようなものです）
flexboxが使えると一番良いのですが、すべてのブラウザに対応していないので、
レスポンシブ対応のウェブサイトでは使えません。
そうなると、横並びにした要素をパーセンテージで指定するのが良さそうです。
ただし、パーセンテージの計算にちょっとコツが必要だったので記載しておきます。
デモページも作成しましたので、あわせてご覧ください。
レイアウトその1
まずは、このようなレイアウトの場合。
画像やテキスト情報が格納されたボックスが並び、
ボックスの端を、親のdivの横幅にあわせます。
実装イメージ
親divの横幅よりも大きな子要素（この場合はul）を作って、
ネガティブマージンで中央寄せにしています。
画像やテキスト情報が格納されたボックス（この場合はli）には
パーセンテージでマージンを取っています。
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の横幅にあわせる場合。
実装イメージ
ulにはネガティブマージンを指定し、liの横幅を33.3333%としマージンは0にします。
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の値が変わってきますので計算をして実装してみてください。
ただし、計算通りにパーセント指定をするだけではうまくいかないので、
画面を見ながらマージンの調整が必要になります。
もっと上手な実装方法があれば、ぜひぜひ教えてください！
