【css/html/js】レスポンシブデザインの覚え書き

2019-03-26 13:15

2019年の時点でサイトのレスポンシブ化は必須と言えますね。
Googleも「モバイルフレンドリー」を推奨し、サイトの評価の一端に寄与しています。

そこで今回は、レスポンシブサイトの構築に必須のコードを紹介します。

htmlに記述する内容
cssのスタイル調整の用意
jQueryの用意

htmlに記述する内容

最も大事なのはwebページに現在のwidthを認識させることです。そのためにはmeta「viewport」を記述することで、現在のwidthを取得できます。

width=device-width, initial-scale=1:現在のデバイスの横幅をそのままウィンドウ幅として認識する。倍率は1倍。

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

cssのスタイル調整の用意

レスポンシブサイトのデザインはmedia queryを用いて組んでいきましょう。cssの中でデバイスサイズごとにスタイルを分けていく方法を紹介します。デザインはPCファーストで組んでいくのがやりやすいかと思います。

/*PCデザインはそのまま記述しましょう*/

@media screen and (max-width:330px) { 
/* width:330px以下のスタイル iPhone5sなど */

}
@media screen and (max-width:400px) {
/* width:400px以下のスタイル iPhone6sなど */

}
@media screen and (max-width:400px) and (min-width:767px) {
/* width:400px〜767pxのスタイル iPhone6 Plus 〜iPad など */

}

jQueryの用意

jQueryはおまけですが、サイトを構築する際は下ごしらえとして入れておくのが良いでしょう。下記の公式サイトよりダウンロードしてサイトの埋め込みましょう。
</body>の直上がオススメです。その下に<script></script>で囲み独自処理を記述していきましょう。
jQueryダウンロードサイト:https://jquery.com/download/

Download the uncompressed, development jQuery 3.3.1」よりウィンドウを開き、名前をつけて保存しましょう。