企業サイト再構築 vol.2 float, sliderなど

まずはこの部分から作り始める。
PC用の固定値から始める。

<div class="container">
<ul class="gallery upper">
<li class="size21 sp"><img src="kirin_img/gallery/image_gallery01_size21.jpg" alt=""></li>
<li class="size22 pc"><img src="kirin_img/gallery/image_gallery01_size22.jpg" alt=""></li>
<li class="size21"><img src="kirin_img/gallery/image_gallery02_size21.png" alt=""></li>
<li class="size11"><img src="kirin_img/gallery/image_gallery03_size11.png" alt=""></li>
<li class="size11"><img src="kirin_img/gallery/image_gallery04_size11.png" alt=""></li>
<li class="size21"><img src="kirin_img/gallery/image_gallery05_size21.png" alt=""></li>
</ul>
<ul class="gallery bottom">
<li class="size11"><img src="kirin_img/gallery/image_gallery06_size11.jpg" alt=""></li>
<li class="size11"><img src="kirin_img/gallery/image_gallery07_size11.png" alt=""></li>
<li class="size11"><img src="kirin_img/gallery/image_gallery08_size11.png" alt=""></li>
<li class="size11"><img src="kirin_img/gallery/image_gallery09_size11.jpg" alt=""></li>
<li class="size11"><img src="kirin_img/gallery/image_gallery10_size11.png" alt=""></li>
</ul>

画像を整理して、わかりやすいファイル名をつけて、<ul>, <li>
横幅の固定値をきちんと計算する。
floatで流し込むときは、全ファイルmarginを均等にとる。このことを定石としてきちんと頭に入れておく。
さらに、２：２　２：１のファイルは「マージンの相殺」なしの余白をきちんと足すことを忘れない。
計算さえ間違えなければうまくいく。
逆にうまくいかないときは、計算間違えだと思うこと。
今回はレスポンシブデザイン、SPの時に画像比率が変更されるファイル、およびSPのみ追加になるファイルもある。

/*gallery
---------------------------------------------------------------------*/
.size22{
width: 356px;
height: 356px;
}
.size21{
width: 356px;
height:168px;
}
.size11{
width: 168px;
height:168px;
}
img{
max-width: 100%;
}
.pc{
display: block;
}
.sp{
display: none;
}
.upper{
width: 940px;
height: 376px;
overflow: hidden;
margin: 0 auto;
}
.bottom{
width: 940px;
height: 188px;
overflow: hidden;
margin: 0 auto;
}
.gallery li{
float: left;
margin: 10px;
}

レスポンシブ化

いつも同じ間違えを犯しているので、なにも悩まずにできるようにする。
横幅を％にしたときに、heightの設定値をどうするのか？
画像の縦横比を変更しないときは「height: auto;」にする。
height: auto;→なにも指定しないときの状態。幅、高さを指定しない成り行きの状態ということ。
ちなみに、％で指定するときは親要素の高さに対する割合。今回の場合、<ul>の高さに対する割合になる。

@media screen and (max-width:960px){
.container{
width: 98%;
margin: 1%;
}
.size22{
width: 38%;
height:auto;
}
.size21{
width: 38%;
height: auto;
}
.size11{
width: 18%;
height:auto;
}
.upper{
width: 100%;
height: auto;
overflow: hidden;
}
.bottom{
width: 100%;
height: auto;
overflow: hidden;
}
.gallery li{
float: left;
margin: 1%;
}
.gallery img{
max-width: 100%;
}
}
@media screen and (max-width:640px){
.container{
width: 98%;
margin: 1%;
}
.pc{
display: none;
}
.sp{
display: block;
}
.size22{
width: 100%;
}
.size21{
width: 100%;
}
.size11{
width: 48%;
}
.upper{
width: 100%;
height: auto;
}
.bottom{
width: 100%;
height: auto;
}
.gallery li{
float: left;
margin: 1%;
}
.gallery img{
max-width: 100%;
}
}