webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

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

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

f:id:ohta-felica:20160901113824p:plain

 <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を均等にとる。このことを定石としてきちんと頭に入れておく。
  • さらに、2:2 2:1のファイルは「マージンの相殺」なしの余白をきちんと足すことを忘れない。
  • 計算さえ間違えなければうまくいく。
  • 逆にうまくいかないときは、計算間違えだと思うこと。
  • 今回はレスポンシブデザイン、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%;
}
}

 slider wide-slider

  • ブラウザー幅いっぱいのスライダー。
  • kiirinサイトに近いプラグインを探す。wide-sliderというプラグインを使う。
  • base width:スライダー中央に配置されるメイン画像の幅高さ。この部分を目的に合わせて入力する。
  • あとは、スライダーの親要素には、幅高さを指定しない。プラグインの仕様として、ブラウザーの幅いっぱいを使う仕様になっている。←要注意。

f:id:ohta-felica:20160901124740p:plain

  •  指示通りに作れば問題はおきない。