画像をスライスしてコーディングする その4 - フルードイメージでレスポンシブデザイン

• okazu-fluidImage

• 完成したPC用のページをレスポンシブデザインにする。
• まずは、タブレット用のデザインを考える。
• いま、PC用の横幅は960pxなので、959px以下のサイズでメディアクエリーを記述する。

1. <meta name="viewport" content="width=device-width">をheadに記述する。
2. @media screen and (max-width: 959px){}

• カラム落ちではなく、フルードイメージでつくる。
• フルードイメージの時に考えること。
• 画像サイズを可変にするには…

1. 画像に「max-width: 100%」を設定する。これで親要素の幅まで自動的に縮小がかかる。親要素の幅が１００％。今回の場合、imgの親要素は<li>と<h1>になります。

1. 画像サイズの固定値を、割合に変更する。
2. 最後に…レイアウト用にピクセルで指定した値を「％」に置き換える。

• 以上３つの条件だけを念頭に置いて作業をすすめる。
• そういえば、footerはどうするのだ？

@charset "utf-8";
/* CSS Document */
html, body, img, ul, li, h1, header, footer, nav, a, p{
margin: 0;
padding: 0;
line-height: 1.0;
font-family: helvetica, sans-serif;
}
ul, li{list-style: none;}
a{text-decoration: none;}
img{vertical-align: bottom;}
/*reset
--------------------------------------------------------------------------------------------------*/
#container{
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.leftColumn, .centerColumn, .rightColumn{
width: 320px;
float: left;
}
h1{
width: 300px;
margin: 10px;
}
ul{
width: 320px;
overflow: hidden;
}
li{
float: left;
margin: 10px;
}
ul.b3>li, ul.c2>li{
float: right;
}
footer{
width:100%;
background:#190000;
text-align: center;
height: 120px;
}
footer p{
line-height: 120px;
color: white;
}
@media screen and (max-width: 959px){
#container{
width: 100%;
}
.leftColumn, .centerColumn, .rightColumn{
width: 33.33%;
}
h1{
width: 93.75%;
margin: 3.125%;
}
ul{ width: 100%;}
li{ margin: 3.125%;}
.size22{ width: 93.75%;}
.size12{ width: 43.75%;}
.size22{ width: 93.75%;}
.size21{ width: 93.75%;}
.size11{ width: 43.75%;}
img{ max-width: 100%;}
}
@media screen and (max-width: 435px){
#container{
width: 100%;
overflow: inherit;
}
.leftColumn, .centerColumn, .rightColumn{
float: none;
width: 100%;
max-width: 320px;
margin: 0 auto;
}
h1{
width: 93.75%;
margin: 3.125%;
}
ul{
width: 100%;
max-width: 320px;
}
li{margin: 3.125%;}
.size22{width: 93.75%;}
.size12{width: 43.75%;}
.size22{width: 93.75%;}
.size21{width: 93.75%;}
.size11{width: 43.75%;}
img{max-width: 100%;}
footer{
height: 12.5%;
max-height: 120px;
text-align: center;
}
footer p{
line-height:120px;
}
}