CSS レスポンシブ
ビューポート設定
まずは HTML の head タグ内に以下の meta タグを記述してください。
<metaname="viewport"content="width=device-width,initial-scale=1.0,user-scalable=no"/>メディアクエリを書く
PC ファースト
@mediascreenand(max-width:959px){/* 959px以下に適用されるCSS（タブレット用） */}@mediascreenand(max-width:480px){/* 480px以下に適用されるCSS（スマホ用） */}モバイルファースト
/* スマホ用のCSSはメディアクエリの外に記述する */@mediascreenand(min-width:481px){/* 481px以上に適用されるCSS（タブレット用） */}@mediascreenand(min-width:960px){/* 960px以上に適用されるCSS（PC用） */}@mediascreenand(max-width:1000px){/* スクリーンサイズが1000px以下の場合に適用 */}@mediascreenand(max-width:767px){/* スクリーンサイズが767px以下の場合に適用 */}@mediascreenand(max-width:480px){/* スクリーンサイズが480px以下の場合に適用 */}@mediascreenand(max-width:320px){/* スクリーンサイズが320px以下の場合に適用 */}@mediascreenand(min-width:768px){/* スクリーンサイズが768px以上の場合に適用 */}min-widthとmax-widthを併用すると可読性が低下します。どちらか一方を利用することをおすすめします。max-width min-width 違いなど
- min-width これ以上小さくならない
- max-width これ以上大きくならない
p{max-width:200px;}=要素が200pxより大きくならない（200px以下）という意味p{max-width:200px;}=要素が200pxより大きくならない（200px以下）という意味