こんにちは。
GOSHIMMERです。
今回は、レスポンシブWebデザインとは何？どうやるの？といった疑問を
このブログを読むだけで理解できるように説明していきたいと思います。
この記事でわかること
レスポンシブWebデザインとは？
レスポンシブWebデザインのメリット・デメリット
レスポンシブWebデザインの作り方
レスポンシブWebデザインとは？
レスポンシブWebデザインは、デバイスサイズごとに最適化されたWebデザインのことを指します。
1つのHTMLに対して、デバイスサイズごとにCSSを準備し、見せ方を変える手法です。
画面の幅によって、コンテンツのサイズや並び方（個数等）を変更したり、文字色や背景などの装飾を変更したりすることによって、ユーザーにとってより見やすいWebサイトを構築することができます。
レスポンシブWebデザインのメリット
更新作業・管理が楽
レスポンシブデザインは一つのHTMLで完結するので、更新作業が1度で完結します。
SEO対策・検索エンジンの順位に有利
検索エンジンの上位に表示されやすくするには「モバイルフレンドリー」や、「モバイルファーストインデックス」のWebサイトを制作する必要があるので、
1つのページでマルチデバイス対応のレスポンシブデザインはSEO対策などに有利になります。
レスポンシブWebデザインのデメリット
デバイス別のデザインに制限がかかる
パソコン用もモバイル用も一つのHTMLで構築されるので、順番を入れ替えるなど、大幅なデザインの変更ができなくなります。
ページが重たくなることがある
一度に複数のデバイス用の要素を読み込むため、ページ自体が重たくなり、表示速度が遅くなる可能性が高いです。
レスポンシブWebデザインの作り方
01Viewportの設定
copyする<meta name="viewport" content="width=device-width,initial-scale=1">
viewportとは表示領域のことで、横幅に合わせて指定します。
レスポンシブデザインの場合は、デバイスサイズに合わせて表示させる必要があるので、上記コードを必ず＜head＞内に示す必要があります。
02メディアクエリの指定
レスポンシブデザインにするためには、cssで画面幅に合わせたスタイルを適用させる必要があります。メディアクエリとは、ユーザーが使用するデバイスの幅に合わせたWebの見せ方を可能にするものです。メディアクエリを指定する2つの方法をご紹介していきます。
・1つのcssで完結させる方法
それぞれのデバイスに適用させるcssを1つのファイルで完結させたい場合は、下記のように指定します。
・480px以下のデバイスサイズに適用させる場合（スマホサイズ）
copyする@media screen and (min-width: 480px) { ここにスマホ用スタイルを記述 }
・767px以上1280px以下のデバイスサイズに適用させる場合（タブレットサイズ）
copyする@media only screen and (min-width: 767px) and (max-width: 1280px) { ここにタブレット用スタイルを記述 }
・デバイスごとにcssファイルを準備する方法
デバイスごとにcssファイルを準備する方法もあります。その場合は下記のように指定します。
・640px以下のデバイスサイズに適用させる場合
copyする<link rel="stylesheet" media="(max-width: 640px)" href=" ここにcssファイル名を記述 ">
まとめ
レスポンシブWebデザインにはメリット、デメリットが存在するので場面や目的に合わせたWebデザインが必要になってきます。
Twitterをやっておりますので、何か質問や相談等あればお気軽にご相談ください＾＾
GOSHIMMER
