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

今の時代、レスポンシブデザインできないWeb屋なんてWeb屋じゃありません。ただ残念なことに、少し勉強すれば考え方は理解できるレスポンシブを理解しないまま枯れはじめているWeb屋が多いのも事実です。

時代に取り残されないように、レスポンシブサイトのつくり方を紹介します。たった2つのことを覚えるだけです。どうですか?簡単でしょう。

はにわまん
メディアクエリーとビューポートだけは抑えておきましょう!

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

レスポンシブデザインとは、単一のファイルで、スマホ、タブレット、パソコンの表示を切り替えられるように設計されたデザインのことです。

メリットとしては、
PC用とスマホ用の2種類のファイルを用意しなくて済むので、

  • 管理が楽(らく)
  • 作成の工数が少ない

といったことが挙げられます。

逆にデメリットとしては、デザインの自由度が下がること。HTML構造はPCとスマホで同じなため、基本的には同様のデザインで表現することとなります。

また、パソコンでの表示を意識した作りになるので、サイトが重たくなる可能性があるっていうのもあります。

これらのメリット・デメリットをまとめると、

【メリット】

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

【デメリット】

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

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

レスポンシブデザインで覚え類ことは大きく2つ!

レスポンシブデザインは難しいイメージがあるかもしれませんが、2つのことを覚えておくだけで作ることは可能です!

その覚える2つですが、

  • メディアクエリー
  • ビューポート

です。

では、順に紹介していきます!

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用のスタイルで表示されてしまいます。

これを解消するために、仮想的にスマホサイズの幅にするためのコードがあって、以下のとおりです。
参考:レスポンシブ ウェブデザインの基本  |  Web  |  Google Developers

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

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

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

おわり



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

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

になります。

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

最低限この2つさえ覚えておけば、レスポンシブなサイトはだれでも作れます!
あとは、HTMLの構成やCSSの書き方のお勉強ですね。

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事