96's blog

WEBサイト制作科 6ヶ月コース

レスポンシブWebデザイン01

ASCII.jp WEB PROFESSIONALのシリーズ記事「ゼロから始めるレスポンシブWebデザイン入門」をもとにサイト作成。

 

ASCII.jp

 

レスポンシブにするには

1.metaでスマートフォンデバイス表示に対応させる

<metaname="viewport"content="width=device-width">

2.画像サイズをブラウザサイズに応じて可変させる

img{max-width:100%;}

3.ブレイクポイントごとにスタイル設定する(メディアクエリー)

@media screen and (min-width : 768px){
/* ここに768px~1023pxまでのCSSを記述*/ 
}
@media screen and (min-width : 1024px) {
/* ここに1024px以上のCSSを記述*/ 
}

今日は第6回まで。

  • サイト幅が1024px以上だと、2カラムで表示。↓

f:id:webtm2013:20131021191738p:image:w360

  • サイト幅が1024px未満だと、content内のsubにあたる枝豆隊長の記事がカラム落ちしてmainの下に来ます。↓

f:id:webtm2013:20131021191739p:image:w300

  • サイト幅を768px未満にすると、小見出しが中央寄せになり、画像が幅に応じて縮小します。↓

f:id:webtm2013:20131021191740p:image:w200

  • 実際に作成したサイトはこちら