プログラミング

初心者でも安心!レスポンシブデザインの作り方を丁寧解説

プログラミングをはじめると、誰もがレスポンシブデザインの壁にぶつかると思います。

レスポンシブデザインってどうやって作ればいいんだよ…。そもそも必要なのかな?

こんなふうに、「レスポンシブデザインが難しすぎて、どうすればいいんだ…?」と悩んでいませんか?細かい調整は確かに必要になりますが、根本的な作り方を理解し、取り入れることでたくさんの人にアクセスしてもらえるページを作ることができます。

今回はそのレスポンシブデザインについて、
プログラミング初心者からレスポンシブデザインをマスターした
・レスポンシブデザインを採用したサイトの模写ができるようになった
この私が、わかりやすく解説していきます。

レスポンシブデザインの作り方

レスポンシブデザインとは

レスポンシブデザインとは、Webページにアクセスしてきた読み手が使っているデバイスに合わせて表示が変わるようにデザインすることです。

最近はパソコンだけでなく、タブレットやスマホなど、さまざまな画面サイズのデバイスでWebページにアクセスすることが可能になりました。なので、パソコンのように大きな画面で見るときと、スマホのような小さな画面で見るときとで、表示のデザインを変えることで、読み手にストレスを与えないページにする。それが、レスポンシブデザインなのです。

 

やることはたったの2ステップ

レスポンシブデザインの作り方としてやることはたったの2ステップ!この2つのステップを抑えておけばレスポンシブデザインを恐れることはありません。安心してレスポンシブ化していきましょう!

Step 1:Viewportを書き込む

HTMLのhead部分に下記↓のコードを書き込みましょう。

<meta name=”viewport” content=”width=device-width”>

これを書いておかないと、Step2で書き込むデザイン指示が反映されなくなってしまう可能性があります。

Internet Explorer(IE)とかGoogle Chromeなどのブラウザでは、勝手に画面の解像度を合わせようとする「フィット」と呼ばれる機能があります。(※この機能について、特に覚える必要はありません)HTMLにviewportを書いておかないと「フィット」が勝手に作動して、レスポンシブデザインがうまく働かなくなることがあります。せっかく書いたレスポンシブデザインのCSSを反映させるためにも、viewportは忘れず記述しましょう!

 

Step 2:CSSにデザイン指示を書き込む

基本的に、レスポンシブデザインはCSSにデザイン指示を書き込むことで指定します。これをメディアクエリと呼びます。メディアクエリには、2つの方法があります。どちらの方法がよいかについては、ご自身のやりやすい方法をお選びください!

  方法その1:1つのcssでまとめる

1つ目は、適応中のCSSの一番下に

@media screen (min-width: 480px) and (max-width: 720px) { /* cssの記述 */}

※【意味】最大720px~最小480pxの横幅では、{}内のCSSの記述が反映されます

というようなレスポンシブ化の指示を書き込む方法です。
こちらの方法では、「1つのHTMLファイルに対して1つのcss」となるので、すっきりまとめることができるのがメリットです。

@media screenで書く場合には、すでに記述されているコードの一番下に書く!

cssの特徴として、下に書かれたものほど最新の指示として読み込まれます。つまり、メディアクエリを途中に書いてしまうと、その下に書かれたコードのほうが優先されてしまうので、CSSには書いているのにうまくレスポンシブ化しないなんてことが起きてしまいます。
@media screenで書く場合には、必ずすでに記述されているコードの一番下に書くようにしましょう。

 

  方法その2:2つ以上にCSSを分ける

2つ目は、レスポンシブ用のCSSを新たに作り、読み込ませる方法です。
すでに書かれているcssを読み込むリンクの下に

<link rel=”stylesheet” href=”responsive.css” media=”screen and (max-width: 720px)”>

【意味】720px以下の横幅では、responsive.cssというcssの記述が反映されます

というようなレスポンシブ化の指示を与えるCSSを書き込む指示を書き加えます。このように書くことで、レスポンシブ用のcssを読み込ませることができます。

最近では、スマホやタブレットなど、デバイスの種類がたくさんあります。なので、画面サイズに合わせてCSSを作成し、読み込むことで、「スマホで見るときはこのcss」、「タブレットで見るときはこのcss」とはっきり区別をつけることができます。

「href=”   ”」内のcssファイル名は正しく!

読み込むcssのファイル名が正しくないと、せっかくデバイスごとに分けて記述したcssも読み込まれません。cssを分ける場合には、保存しているフォルダの階層などにも注意しながら、ファイル名があっているか確認して記述しましょう。

 

レスポンシブデザインを取り入れるべき理由

デバイスごとに画面サイズが違うから、読み手に優しいデザインにするためにレスポンシブデザインを取り入れるのはわかったけど、これって本当に必要なの!?と思っている方のために、取り入れるべき理由を主な2つの理由から解説します。

読み手にも管理者にも優しい

文字が小さかったり、画面からはみ出た表示のページは、読み手にとってわかりにくい印象を与え、「見にくい!このページから去ろう!」という気持ちにさせます。

では反対に、レイアウトの整ったわかりやすいページはどうでしょう?読み手に強い印象を与えることはなくても、「なんだか見やすい!」「わかりやすいページだな~」と無意識のうちに感じさせることができます。これがレスポンシブデザインの効果です。

インターネットが広がったことで、私たちが多くの情報から取捨選択しなくてはいけなくなりました。そんなとき、読みにくいページはすぐに読み捨てられます。

Webページは見られてなんぼです。無意識のうちに「わかりやすい」という印象を与えるデザインにすることで、そのページに長時間、滞在してもらったり、再度アクセスしてもらう可能性を広げることができるのです。

読み手だけでなく、管理者にもメリットがあります!レスポンシブ化していないと、1つの小さな修正をするにも複数のCSSを書き換えなくてはいけなくなり、手間だけでなく、ミスも起きやすくなります。しかし、レスポンシブ化しておくことで修正箇所を少なくすることができ、比較的かんたんに管理することができます

 

デメリットも理解しながら取り入れましょう

レスポンシブデザインは良いこともありますが、デメリットについても理解した上で取り入れていくことが大事です。

「読み手の使用するデバイスによって表示を変える」という指示を加えるわけですから、もちろん手間がかかります。また、レスポンシブ化すると、標準として書いたCSSを読み込んだ後、レスポンシブ化のCSSを読み込むため、読み込みに時間がかかるります。

レスポンシブデザインは必ずやらなくてはいけないというものではありません。見やすさという付加価値を提供するためのものなのです。

・その分しなければいけない作業工程が増える
・読み込むコード量が増えた分、表示されるのに時間がかかる

などのデメリットも踏まえた上で、取り入れることが重要だと思います。

 

レスポンシブデザインが簡単にできるようになる方法

読み手にわかりやすく情報を伝えるためにも、レスポンシブデザインが重要ということがわかったけど、具体的にどうやったらできるようになるの?と思った方!

基本的なレスポンシブデザインを簡単に理解するためのオススメ勉強サイトをお教えします!

おすすめサイト

今回、レスポンシブデザインの勉強サイトとしてオススメするのは、いつもおなじみTechAcademyさんの

です。「1-1」~「2-4」までは、CSSの発展的な用法を解説されています。こちらもとてもためになる内容ですが、レスポンシブデザインから学びたい方は、「3-1メディアクエリとは」からはじめてください

動画は初心者向けに解説されています。プログラミングについて、勉強しはじめたばかりの人でも理解できる内容まで、かみ砕いた解説をしてくれているので安心して取り組んでみてください。

勉強3ステップ

オススメした動画サイトを見るだけでも、十分勉強にはなります。しかし、より効率的に学習を進めて行くために、私の実践した【勉強3ステップ】に従って取り組んでみてください!

勉強3ステップについては、CSSの勉強法について解説した下記↓の記事で詳しく解説しています!

CSSを勉強するための最短ステップ【初心者向け】プログラミングをはじめたので、CSSを学びたいけど、何から始めればいいかわからない…。初心者でも勉強できるサイトや効率的な方法が知りたい...

この【勉強3ステップ】で取り組んでいただくことで、動画サイトを見て「わかった」となるだけでなく、自分自身でコーディングが「できた」という段階にまですることができます!また、後々にも活きる専用ノートも作成することができますよ!

 

まとめ

今回はレスポンシブデザインの作り方について解説してきました。

本記事のポイント
  1. レスポンシブデザインの作り方は2ステップ
  2. メリットとデメリットを理解して取り入れろ!
  3. 学習サイトと3ステップで習得せよ!

この記事が、レスポンシブデザインの作り方を知りたい、学習したいという方の力に少しでもなれていたら幸いです。

最後まで、お読みいただきありがとうございました。