ぱんぶろ

パンジーの「いいね!」ブログ

レスポンシブデザインサイトの作り方。たった2つのことを覚えておけば簡単に作れますよ!

      2016/03/27  

medium_162799808
photo credit: End User via photopin cc

Googleが推奨しているレスポンシブデザイン。

1つのファイルでパソコンもタブレットもスマホも対応できたら、
なんかカッコいいですよね。

Webサイトの制作依頼でも、
「今あるサイトをレスポンシブに対応させてほしい」

という内容も増えています。

つまり、Webサイトエンジニアとしては、
レスポンシブデザインくらいは知っていないと恥ずかしいレベル・・・なのかもしれません。
(そもそもわたしはエンジニアと呼べるレベルにいませんが。)

「そんなこと言ったって、レスポンシブデザインってなんだか難しそう・・・後回しだ!」、
と思っているあなた。

実は、2つのことを覚えておくだけで作れちゃうくらい簡単なんです!

スポンサード リンク

レスポンシブデザインって?

冒頭でも少し説明しましたが、
単一のファイルで、スマホ、タブレット、パソコンの表示を切り替えられるように設計されたデザインのことです。

何がいいかって、作れるとなんかカッコいい。

そして用意するスマホ用、パソコン用と複数のファイルを用意する必要がないので、
作るのが楽(そう)。

また、Googleが推奨する理由はここにありそうですが、

検索エンジンやアクセス解析に内容が重複した複数の異なるURLが出現することも避けられる。

レスポンシブデザインとは 【 responsive design 】 - IT用語辞典

ということみたいです。

たしかに当ブログはレスポンシブデザインではないんですけど、
同じページなのに別ページとしてアクセス解析されているところが多々あります。

逆に、デメリットはと言うと、
デザインがどうしてもしょぼくなっちゃうところですね。

スマホとパソコンとでファイルを切り分けているサイトに比べて、
格段にデザインの自由度は下がります。

あとは、パソコンでの表示を意識した作りになるので、
スマホで同じファイルを表示させると、
重たくなる可能性があるっていうのもあります。

これらをまとめると、

【メリット】

  • 作れるとなんかカッコイイ
  • 単一ファイルなので楽(工数が少なくて済む)
  • Google推奨(かと言ってSEO的に強いわけではない)
  • ファイルが重複しない

【デメリット】

  • デザインの自由度が下がる
  • スマホでの表示が重くなるかも

この辺のメリット・デメリットを天秤にかけて、
レスポンシブデザインにするかどうか決めるといいかもしれません。

レスポンシブデザインは(最低限)たった2つのことさえ覚えておけば作れる!

レスポンシブデザインって難しい(とっつきにくい)イメージがありますが、
実は、2つのことを覚えておくだけで作ることはできるんです!

この2つを覚えておけば、あとは自分のHTMLとCSSのスキル次第になります。

最低限覚える2つですが、
1つは、メディアクエリー、もう1つは、ビューポートです。
では順に紹介していきます!

1、メディアクエリー

クエリーはIT業界に携わっていれば、よく聞く言葉ですね。
「お問い合わせ」という意味です。

メディアを問い合わせるということですが、
ここでは、「ブラウザの表示サイズ」にお問い合わせをしています。
書き方としては、「○○px以上であれば、このスタイルを利用する。」といった感じです。

具体的なコードを見たほうが分かりやすいと思うので、早速見ていきましょう。
メディアクエリはCSSファイルに記述します。

style.css

@media all and (min-width: ○○px) {
// ほにゃらら
}

min-widthの右側のpxに任意の値を入力して問い合わせる画面の大きさを決めます。
○○px以上だったら、ほにゃららのスタイルを利用するということです。

メディアクエリーはいくつでも書くことができて、

例えば、

  • タブレットだったら、min-width: 480px
  • パソコンだったら、min-width: 768px

といった感じで大きさを決めていきます。

メディアクエリーの外に書くCSSは、
スマホ、タブレット、パソコン共通のスタイルと、
スマホ単体のスタイルです。

簡単な全体図のイメージとしては、

style.css

/* 共通のスタイル */
// ほにゃらら

/* スマホのスタイル */
// ほにゃらら

/* タブレットのスタイル */
@media all and (min-width: 480px) {
// ほにゃらら
}

/* パソコンのスタイル */
@media all and (min-width: 768px) {
// ほにゃらら
}

って感じです。
タブレットはスマホのスタイルを上書きするイメージで、
パソコンはタブレットのスタイルを上書きするイメージで書いていきます。(メディアクエリは上から幅の小さい順番に書いていきます。)

これでブラウザの幅が、

  • 0px ~ 480pxまでの時は、共通のスタイルとスマホのスタイル、
  • 480px ~ 768pxまでの時は、共通のスタイルとタブレットのスタイル、
  • 768px ~ 無限までの時は、共通のスタイルとパソコンのスタイル、

で表示されるようになります。

2、ビューポート

上で作成したCSSにすることでレスポンシブな表示になったんですが、
1つだけ問題があります。

それは、スマホで表示させてもレスポンシブな表示にならない・・・。
ということです。

これは、ビューポートと言ってスマホ上でもPCのサイトがちゃんと表示されるように、
画面の幅(px)が980pxと設定されているからなんですね。

なので、スマホで見ても768px以上ということで、PC用のスタイルで表示されてしまいます。

これを解消するために、仮想的にスマホサイズの幅にするためのコードがあって、

index.html

<meta name="viewport" content="width=device-width, initial=1.0" />

 

HTMLファイルに書くことで、980pxとならずにスマホで幅で表示させることができるようになります。

メディアクエリーでCSSにブラウザの幅ごとのスタイルを設定し、
スマホには、HTMLに仮想的なスマホ幅を設定してあげることで
スマホにもレスポンシブなデザインを対応させることができるようになります。

まとめ

レスポンシブデザインを作る方法は最低限2つ覚えておけばOKで、

  • CSSファイルに書く「メディアクエリー」
  • HTMLファイルに書く「メタ属性(ビューポート)」

になります。

なんか取っ付きにくかったレスポンシブデザインが、
2つ覚えるだけで書けるんだと思うと気が楽になりませんか?

最低限この2つさえ覚えておけば、レスポンシブなサイトはだれでも作れます!
あとは、HTMLの構成やCSSの書き方のお勉強ですね。
どれだけカッコいいサイトにできるかは、勉強量とセンスに比例してくると思います。

最後に、参考までにカッコいいデザインのレスポンシブなサイトをまとめた
サイトを見つけたので紹介しておきます。
Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト

こういうサイトがあるんだーと眺めているだけでも楽しいかもしれませんね。