先日CSSにてサイトをレスポンシブ対応させる方法を紹介しましたが、今回はHTMLにてレスポンシブ対応させる方法を紹介したいと思います！
HTMLにてレスポンシブ対応させる場合には、
- PC用CSS
- スマートフォン用CSS
の2つのCSSが必要になるということをまず覚えておいてください。この2つのCSSをブラウザ幅によってどちらか1つを読み込ませるようにするというのがHTMLにてレスポンシブ対応させる方法になります。
このように2つのCSSを用意する利点としては、CSSにまだ慣れていない場合、1つのCSSで膨大な量のCSSを見なくて済む、というのがあります。CSSはただでさえ慣れていないとどこに何が書いてあるのかわからないもの。その上メディアクエリでレスポンシブ用のCSSも記入してあると量が増えるので、何が何だかわからない…なんてことになりかねません。なので、PC用とスマートフォン用で別々のCSSを用意することで1つのCSSにつき情報量を減らすことができる、ということが挙げられます。自分もまだCSSが慣れていない時は2つのCSSを使っていました！
もちろん、慣れてきたら1つのCSSにまとめて記述することで、編集する時も1つのCSSを編集するだけで済むなど管理がしやすくなるので、慣れてきたら1つのCSSで管理していくのもアリだと思います^^
話がそれましたが、それでは実際に2つのCSSをHTMLでブラウザ別で読み込ませるにはまず
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
上のソースを記述した上で以下のコードを<head>～</head>内に記述してあげます。
<link href="PC用CSS" rel="stylesheet" media="(min-width: 668px)"> <link href="スマートフォン用CSS" rel="stylesheet" media="(max-width: 667px)">
このように記述してあげることで、ブラウザサイズが668px以上の時はPC用CSSを、ブラウザサイズが667px以下の時はスマートフォン用CSSを読み込ませるようになります。
この
media="～"
の～に入れた数値に従ってレイアウトを変えてくれるので、この書き方を覚えておくと非常に便利だと思います！
ちなみにスマートフォン用CSSのmax-width: 667pxはiPhone 6の横幅のブラウザサイズになります。このように新しいスマートフォンが発売される毎にブラウザサイズなどを確認していくことも大切になってくるんだなぁ、と思ったりします。
