レスポンシブ設定がうまくいかないとき

初めてレスポンシブ設定をしたときに反映されなくて困ったことがあるので、レスポンシブの基本的なこと書きます。
私の場合は、<meta>タグを追加していないのが原因でした。

レスポンシブデザインを適用させるには

• htmlに<meta name="viewport">タグを追加する
• メディアクエリーでcssを切り替える
  
  

htmlに<meta name="viewport">タグを追加する

スマートフォンがWebページを表示するときは、画面サイズに合わせて縮小表示します。
この通常の処理をキャンセルするために、<meta name="viewport">タグを追加します。

メディアクエリーでcssを切り替える

メディアクエリーとは、cssを切り替えるための条件文です。
方法は下記の2つです。

• htmlに<link>タグを追加する
• cssに@mediaを追加する
  
  

htmlに<link>タグを追加する

cssを読み込んでいる<link>タグにmedia属性を追加します。
cssファイルは、レスポンシブデザインの数だけ必要です。
書式） <link rel="stylesheet" href="cssファイルのパス.css" media="メディア属性 and (メディアクエリー)">
例）<link rel="stylesheet" href="style.css" media="screen and (max-width:480px)">
意味）画面幅が480px以下の時にstyle.cssを読み込む

cssに@mediaを追加する

パソコン用に書いたcssの中にレスポンシブ用のcssを@mediaで追加します。
1つのcssファイルの中にすべて記述します。
書式） @media メディア属性 and (メディアクエリー) { }
例）@media screen and (max-width:480px) {
　　　　header,
　　　　nav,
　　　　footer {
　　　　　　width: 95%;
　　　　}
　　}
意味）画面幅が480px以下の時、ヘッダー、ナビ、フッターのwidthを95%にする

メディア属性とメディアクエリー

メディア属性	説明
screen	画面用
print	印刷用

メディアクエリー書式例	説明
(max-width:480px)	画面幅が480px以下のとき
(min-width:600px)	画面幅が600px以上のとき
(max-height:500px)	画面高が500px以下のとき
(min-height:768px)	画面高が768px以上のとき
(orientation:portrait)	端末を縦に持っているとき
(orientation:landscape)	端末を横に持っているとき