最近では、Webデザイナーとして仕事をしていく上でレスポンシブ対応は必須のスキルになってきています。
スマホの普及率も高まっているので、今後も必要とされるスキルでしょう。
もちろんですが、レスポンシブ対応がきちっとできるだけで仕事の単価も上がります。
目次
CSSのテンプレートを知る
Webデザインの勉強を始めたばかりの時は、レスポンシブというと何か魔法のように聞こえることもあることでしょう。
とにかく耳にする機会は多いし、できたほうがいいという気はするんだけど、なかなか手をつけられない。
難しそうというイメージがかなりあるんですね。
ただ、実はレスポンシブ対応とはいってもCSSのメディアクエリというものを使って、1つのページについて3ページ分のCSSを書いているみたいなものなのです。
つまり、CSSが普通に書けるようになってしまえばレスポンシブだろうとあまり関係ないわけです。
簡単にメディアクエリというものについて説明をしておきますね。
CSSのメディアクエリって何？
CSSにおいて、メディアクエリと呼ばれるものの例を紹介します。下のようなコードです。
|
1 2 3 4 5 |
@media all and (min-width: 920px) { body{ width:100%; } } |
これは表示メディア(スマホかダブレットかPCかなど)の表示領域(表示に使われるサイズ)が920px以上の時に適応されるCSSを意味しています。
この例だと、920px以上の場合(PCなど)はbodyが横幅100%になります。
このように、@mediaという記述を使って表示メディアに応じて適用するCSSを変更するものをメディアクエリと呼びます。
メディアクエリのテンプレート２つ
そして、このメディアクエリの記述方法には大きく２通りのテンプレートが存在します。
それは「モバイルファースト」と呼ばれるものと「デスクトップファースト」と呼ばれるものです。
モバイルファースト：スマホなどのモバイルでの表示スタイルを先に指定する方法。
スマホ→タブレット→PCという順番でCSSをメディアクエリを用いて追記する。
デスクトップファースト：PCなどの表示スタイルを先に指定する方法。
PC→タブレット→スマホという順番でCSSをメディアクエリを用いて追記する。
という２つのタイプが存在します。
モバイルファーストの場合は、CSSが適用される表示メディアのサイズをだんだんと大きくしてメディアクエリの分岐を作っていきます。
例えば「基本スタイル」→「640px以上のスタイル」→「920px以上のスタイル」のように書いていきます。
デスクトップファーストの場合はこの逆になりますね。
それでは、実際のテンプレートのコードです。
CSSコードのテンプレート
モバイルファースト
まずは、モバイルファーストから紹介します。モバイルファーストの場合はmin-widthを用いた分岐になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
body{ width:100%; } @media all and (min-width:480px) { /* 480px以上の場合はこのCSSが適用されます */ body{ width:90%; } } @media all and (min-width:768px){ /* 768px以上の場合はこのCSSが適用されます */ body{ width:80%; } } @media all and (min-width:1024px) { /* 1024px以上の場合はこのCSSが適用されます */ body{ width:70%; } } |
デスクトップファースト
次はデスクトップファーストの紹介です。こちらはmax-widthを使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
body{ width:70%; } @media all and (max-width:1024px) { /* 1024px以下の場合はこのCSSが適用されます */ body{ width:80%; } } @media all and (max-width:768px){ /* 768px以下の場合はこのCSSが適用されます */ body{ width:90%; } } @media all and (max-width:480px) { /* 480px以下の場合はこのCSSが適用されます */ body{ width:100%; } } |
注意すべきポイント
メディアクエリを使うに際して、気をつけるべきポイントが幾つかあります。
1.CSSのルールとして同じ重要度であれば後のスタイルが適用される
2.分岐点を逆にすると全く分岐しない
まず、1つめの内容に関してですが、CSSは同じ重要度(セレクタの指定の仕方などで決まる)の場合は、後から書いたCSSが適用されます。
それを忘れてしまっていると、メディアクエリを書いているのに適応されないといった混乱が起こりやすくなります。
また、これは2つめの内容に影響が及んで、分岐の順番をメチャクチャにすると、スタイルの適用もめちゃくちゃになります。
例えば「420px以下」→「640px以下」→「920px以下」のように分岐させると、全て920px以下に当てはまるので
最後のスタイルがどのサイズでも適用されることになります。
これらの注意ポイントだけをしっかりカバーしておけば、困ることはあまりないでしょう。
まとめ
レスポンシブをCSSのメディアクエリを書いていくにあたって、モバイルファーストとデスクトップファーストというテンプレート(本当は手法)はかなり使えます。
この考え方を上手く使って、実際にCSSのコーディングに役立ててください。
※一般的には、スマホ表示の方が制限が強いため、モバイルファーストで作ったほうが作りやすいとは言われています。
僕は勉強初めの頃からデスクトップファーストで慣れているので、そちらで書いています。
Webデザイン最新情報をニュースレターで配信中
こういった、Webデザインの最新情報・テクニックやツールの紹介をニュースレターで行っています。Webデザイナーを目指す方が、少しでも最新の情報に触れる機会を多くできればと思って配信をします。
スクールにも通わず、制作会社にも勤めたことがない状態でフリーで仕事をするようになった方法なども消化していきます。
今なら、期間限定の特典もついて配信中。登録に必要なものはアドレスだけ。登録は1分で終わります。
こちらの画像をクリックすると、詳細が見れます。
