80日目 | web制作

本日は…

■レスポンシブ
デザイン続き
楽しいおかずのサイトのmサイズについて、可変にしてみる

#container {
  max-width: 96.875%;/*content imgにかけた隙間を100から引いたもの*/
  margin: 0 auto;
  overflow: hidden;
}
.content {
  max-width: 33.33%;/*containerがどんなサイズになっても中のカラムは同じサイズになるように※contentにとっての親はcontainer=100%*/
}
#header, ul {
  width: 100%;
  overflow: hidden;
}
.content img {
  margin: 3.125%;/*全部の画像に対して欲しい隙間の半分、を割合で出したものにかける…20px/320px*100/2*/
  float: left;
}
.content li.right {
  float: none;
}
img.size-2x2 {
  width: 93.75%;
}
img.size-2x1 {
  width: 93.75%;
}
img.size-1x1 {
  width: 43.75%;
}
img.size-1x2 {
  width: 43.75%;
}
img.pic-r {
  float: right;
}

※htmlファイル側の画像ひとつひとつにclass指定をしておく
※imgにfloatをかけなおしたのは、余白をimg自体に設定したほうが計算が楽っていう理由

■css3のtransitionとanimation
余談的に、マウスオーバーしたときのアニメーションをいくつか設定してみる
実際の画像を含め週末に出来たら後述。

■viewportの設定

<meta name="viewport" content="width=device-width,
initial-scale=1.0,user-scalable=no">
<!--width=device-widthがないとただ縮小されたページになる。
initial-scaleはiPhoneで横にしたときに拡大され無いように。
scalableはピンチできなくするため。yesでもあんまり問題はない※noは0でyesは1-->

●Retinaディスプレイとは
iphoneの3⇒4であった変化のひとつで、画面のサイズは両者は同じだが、画面の改造度は倍になっている。
見た目のピクセルはcsspx。実際の解像度はデバイスピクセル（dpx）。

つまり、640pxのものを表示できるけど表示領域自体は320pxしかない、ということが起こる。

background-sizeで適用してやればはみでない。
はみ出ないんだけど…明日続き。