2014年11月22日

WEBのスマホ対応ってどうやるの?! レスポンシブ・デザインとメディアクエリについて

css-responsive-300

こんにちは! ヨス(@yossense)です。

スマホ対応を考えたときにたどり着く「レスポンシブデザイン」と「メディアクエリ」という言葉。

これってどういう意味なんでしょうか? 今回はこの2つの専門用語について説明します。

ヨス

WEB制作やブログを運営している人向けの記事です。

スマホ対応について

スマホからの訪問が半分に!
スマホからの訪問が半分に!

このブログも当初は見てくれる方の9割がパソコンでした。でも気がつけば今は半分以上がスマホからのアクセスになっています(2016年10月22日追記: 現在では7割以上がスマホです)。

こうなると当然ながら、スマホで見ても見やすいデザインってのが必須になってきますよね。

このブログは、開始して1年以上経ってやっと、重い腰を上げてスマホ対応しました。

ヨス

ものすごく面倒くさかったです。いえ。作業でいうと、5時間ぐらいで終わりましたが、やろうと思うのが面倒くさいんですよね(笑)。

スマホ対応は「レスポンシブ・デザイン」がカギ

で、スマホ対応、スマホ対応と耳にしますが、具体的にどうやればいいんでしょうね?

当初はパソコンとスマホって別々にページを作ったりしてたんですよ。大変ですよね。

だって、PCの文章にミスが見つかって修正したら、同じ修正をスマホ側でもやらないといけなかったから。

レスポンシブ・デザインってこんなもの

でも今は「レスポンシブ・デザイン」というものが主流です。どんなものかと言うと……

レスポンシブデザインのイメージ
レスポンシブ・デザインのイメージ

例えば、HTMLはPCもスマホも全く同じ(というか同じファイル)で用意します。

で、PCでもスマホでもいい感じに見えるようにそれぞれに合ったスタイルシート(CSS)を用意するんですね。

レスポンシブ・デザイン」は、CSSを2つ用意し、HTMLファイルは全く同じなのにPCとスマホでは違ったように見える……という合理的なやり方です。

ヨス

こういったデザインを
レスポンシブ・デザインと呼びます。

「responsive(レスポンシブ)」というのは「反応する・回答する」という意味で、違うデバイス(PCとかスマホ)によって、CSSで違う「反応」を示すから「responsive」なんですね。

CSSの「メディア・クエリ」を使うだけ!

「レスポンシブ・デザイン」を実行するために具体的にどうすればよいかというと、「メディア・クエリ(Media Queries)」というものを使います。

ヨス

わけわからんカタカナ語ばっか使うなよっ!

……って言いたくなる気持ち、わかります!

でも大丈夫です。今回出てくる専門用語は「レスポンシブ・デザイン」と「メディア・クエリ」だけです!

メディアクエリって??

メディアクエリ」は、「横幅480px以下(スマホサイズ)の画面で見た時だけ別のCSSを使うよ!」みたいな指示です

記述としては以下の様にします。

@media screen and (max-width: 480px) {   ※ ここにCSSを普通に入れる   }

メディア・クエリの具体例

では具体例を出してみます。

PCでの表示
文字の大きさを20pxで表示
スマホでの表示
文字の大きさを15pxで表示

こんなふうにPCとスマホで違う文字の大きさにしたいとします。ではどうやってCSSを記述するのでしょうか?

p { font-size : 20px ; }

ヨス

ここまでは大丈夫ですか? これで、文字のサイズが20pxになりました。

でもスマホで見ても同じ大きさになります。そこでさっき出てきた「メディアクエリ」の記述内に、調整したいCSSを入れるだけです。

p { font-size : 20px ; }

@media screen and (max-width: 480px) {
p { font-size : 15px ; }
}

たったこれだけで、スマホで見たときだけ文字が15pxになります。

簡単でしょ? なお、{ } が入れ子になってダブって気持ち悪いと思いますが、正しい記述なので大丈夫ですよ(笑)。

さて、今回は「レスポンシブ・デザイン」と「メディア・クエリ」についてお話しました。

なんかよく聞くけどあんまりピンときてなかったんだよなーって方に「よくわかったよヨス!」って言ってもらえるとうれしいです。

具体的にどうやってCSSを書くかというのはこちらの記事に書いています。

WEB関係のスキルを学ぶのって独学では時間がかかりますが、今ならオンラインで学べるスクールもあります。

たとえば完全にオンラインで学べるTechAcademy [テックアカデミー]なら、「Webリニューアル集中プログラム」という超ターゲットを絞ったコースがあります。

このコースがオススメな理由は、今現在運営しているサイトをリニューアルすることがゴールであること。

つまり、例えば学生なら10万円以下で今のサイトのリニューアルができ、さらに技術が身につくという一石二鳥なコースです。

プロにお願いするとものすごく制作費がかかるので長い目でみると、今学ぶことはかなり合理的です。

この記事が気に入ったら
「いいね!」で情報GET!

Twitterでヨスをフォローしよう!

この記事のシェアはこちら♪

※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!