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

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

レスポンシブにするには

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

<meta name="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を記述*/ 
}

今日は第６回まで。

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

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

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

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