前回、レスポンシブサイトについて、必要性やメリット・デメリットについて解説しました。それが理解できれば、クライアントへの提案などもしっかりできるのではないかと思います。
さて今回は、そのレスポンシブサイトの作り方の話をしましょう。まずは何からやっていくか・とりあえずどこから触っていればよいかなどの、レスポンシブサイト制作の入門的なお話をしていきます。
目次
今回はレスポンシブサイト制作の入門として、難しいことは言わず、まずこうしたらよいという話をメインにしていきます。まず第一にやることとして、「viewport」の設定です。
HTMLの<head>タグ内にmeta要素の「viewport」のタグを追加します。
<meta name="viewport" content="width=device-width, initial-scale=1">
このタグは何をしているかというと、簡単に言うと「表示している画面・デバイスの横幅を取得」をしています。これによりサイトの横幅が、表示した画面・デザインの横幅になるように認識され、例えば「この画面の横幅は1000pxだ」ということを取得してくれます。その取得した横幅でどんな表示をするかのキッカケがこれで作られます。
このviewportタグ、知れば知るほど深いのですが、少し難しいので今は、レスポンシブサイトを制作する上で必ず入れておかないといけないものと覚えておいてください。
ここで勘違いしてはいけないのは、このviewportを入れたからといって、レスポンシブサイトに対応するわけではありません。あくまで、「画面の横幅がいくらか」を取得するためのタグです。
Viewportの設定だけではレスポンシブサイトに対応しないと前述しましたが、では各デバイスでちゃんとレスポンシブになるにはどうするかを解説していきましょう。
レスポンシブサイトとして成立させるにはどうするか、そのデバイス（画面サイズ）に合わせてCSSを記述していくだけです。言葉にするととても単純ですが、各デバイスのためにCSSを記述していくことになるので、これがなかなか大変。このデバイスではこんな表示にしたいと、ちゃんと把握していないと、スムーズに作業ができませんので注意が必要です。
なので、各デバイス用にデザインはしっかり考えておくべきです。たまにパソコン画面用のみのデザインしか考えておらず、スマホ用・タブレット用の画面は「良い感じに作ってください」といった案件もありますが、慣れていないとスムーズに作業は進められませんので、しっかりデバイスごとのデザインを決めてから、コーディングに入りましょう。
※ベテランで慣れている人でも、頭にその各デザインを思い描いてからコーディングに入っています。初心者の方はそんな荒業を使わずにしっかり視覚的に表してから作業に入りましょう。
では実際に何をしていくか見ていきましょう。
デバイスごとのCSSの記述をしていくのですが、まず、そのデバイスでどのCSSを読み込むのかを指定する必要があります。スマホ画面なのに、横幅1100pxのために作ったCSSを読み込んでも意味がないですよね。ちゃんとデバイスに合わせたCSSを読み込む設定をしてあげましょう。
そのCSSを読み込む方法ですが、大きく分けて2つの方法があるのでそれぞれ説明します。どちらを選んでもらってもあまり変わりません。作業思考的に自身に合う方法でよいかと思います。
今回は初心者にも優しい方法を、次回に慣れてくるとやりやすい方法を紹介します。
CSSファイルを例えば、
というふうに、各デバイスで違うもの作成して、横幅に合わせてそれぞれのCSSを読み込む方法です。各CSSが切り離されており、違いをしっかりと理解しながら作れるので、レスポンシブサイトの制作に慣れていないうちは、この方法がオススメです。
では、それぞれをどうやって読み込むのかといいますと、ブレークポイントによって読み込むCSSを変える指定をします。ブレークポイントとは、デバイスの横幅によって切り替わる境界ポイントです。横幅が〇〇以上はタブレット、〇〇以下はスマホというふうに指定してあげます。
通常のCSS読み込むための手順と同じく、HTMLの<head>タグ内に以下のように追加します。
<link href="smart.css" rel="stylesheet" type="text/css" media="(max-width: 559px)" > <link href="tablet.css" rel="stylesheet" type="text/css" media="(min-width: 560px) and (max-width: 959px)" > <link href="style.css" rel="stylesheet" type="text/css" media="(min-width: 960px)" >
これにより、htmlファイルは1つで、横幅により各デバイスのCSSを読み込むことができるようになります。それぞれの横幅の設定は以下のようになっています。
| max-width: 559px | 横幅が559px以下（スマートフォン用） |
| min-width: 560px and max-width: 959px | 横幅が560px以上959px以下（タブレット用） |
| min-width: 960px | 横幅が960px以上（パソコン用） |
ブレークポイントの数値は、必ずこれだというのは決まっておりません。デザインや制作の意向によって左右されます。ただし、一般的にこのくらいだろうという指標はあったりしますので、一度いろいろと調べてみてはいかがでしょうか。
パソコン用とスマホ用に切り替わればよいという場合もありますが、タブレットの使用も増えていますので、できれば3つのデバイスで考えるべきでしょう。
レスポンシブサイトの制作について、実際にどういうことをしていくかを入門編として解説していきました。まだまだ入門レベルなのですが、最低限必要になってくる知識ですのでしっかり理解してレスポンシブサイトの制作に入っていきましょう。（曖昧だとどこかで齟齬が出てきます）
次回は、デバイス横幅によってCSSを読み込む方法のその2と、レスポンシブサイトにするにあたってのCSSの設定のテクニックなどを解説していきます。
トリサンクリエイター関西ではホームページ・Web制作に関する求人案件を多数取り扱っており、Webデザイナーとしてスキルアップを目指す方にオススメの求人案件も無料でご提案いたします。
ぜひ一度お気軽にお問い合わせください。
ディレクターやクライアントとの…