【CSS3編】サルでもわかるレスポンシブの基本の基本

前のページ（【スマホでもPCでもOK】レスポンシブ・ウェブデザインとは）でも書いたように、レスポンシブ・ウェブデザインであれば、スマホでもPCでもタブレットでも、一つのページでちゃんと表示することができます。

でも、昔はこれができませんでした。
なぜなら、CSS2やHTML4ではレスポンシブ化するための機能がなかったからです。

レスポンシブ化するための機能とは、端末の画面サイズによって、使うスタイルを切り替えると言う機能です。

昔は、インターネットするための端末なんてパソコンくらいしかなかったので、端末の画面サイズによって使うスタイルを切り替える必要なんてなかったのです。
だから、この機能もありませんでした。

レスポンシブ化するための機能は、新しいCSS3とHTML5に対応するブラウザが増えてから、やっと使えるようになったのでした。
（今でもCSS3に対応するブラウザででないとCSS3のレスポンシブ化の機能は発揮できないので、CSS3に対応するブラウザでない場合は、擬似的にその機能をスクリプトで再現してあげる必要があります）

では、そのCSS3とHTML5でレスポンシブするにはどうすればいいのか？
こちらのページでは、その方法について基本的なことから書いていこうと思います。

レスポンシブはこうして実現する

PCでもスマホでもタブレットでも見えるようにするわけですから、当然設定が変わってきてしまいます。

一番変わってしまうのは 『横幅』 です。
それぞれ、大きく異なります。

そのまんまPCのサイトをスマホで表示してしまうと、こんな感じで一部しか表示できません。

なぜなら、PCサイトの記事部分の横幅（サイドバーなしで）が700pxあるとすると、スマホでは横幅が足りないからです。

では、スマホに合わせてしまうとどうでしょう？

PCでスマホの横幅で表示してしまうと、横ががら空きになってしまいます。
しかも、画面を何度も左右に往復せねばならず、PC画面なのに異様に目が疲れます。
（読みづらくなるだけで、PCのメリットが何もない！）

そんなわけで、PCにはPC用の横幅を、スマホにはスマホの横幅を適用してあげます。

CSS3とHTML5の違い

CSS3とHTML5は、両方とも画面サイズによって適用するスタイルを切り替えます。

でも、CSS3はCSSを全部読み込んだ後で振り分けます。
HTML5は最初にCSSを振り分けてしまいます。

CSS3もHTML5も読み込んだ直後は同じなのですが、パソコンのブラウザサイズを変えたり、スマホを横向けにしたり縦にした時に違いが現れます。

全てのCSSを読み込んでいるCSS3は臨機応変にCSSが切り替わりますが、必要な画面サイズ用のCSSだけ読み込んでいるHTML5は、更新ボタンを押さないと、それ用のCSSが表示できないのです。

また、読み込むファイルサイズにも違いが出てきます。
（HTML5は必要なスタイルだけ読み込むのに対して、CSS3はスマホやタブレット用のスタイル（CSSのデータ）まで全部読み込んでしまうので、どの画面サイズでもだいたい上手く非常時できるのですが、どうしてもサイズが大きくなりがちです）

HTML5

更新ボタンを押さないとCSSが切り替わらない
（スマホの縦・横の変更時）
更新ボタンを押さないとCSSが切り替わらない
（ブラウザのサイズ変更時）
ダウンロードするファイルサイズが小さい
（必要なCSSファイルだけ読み込ませるため）

CSS3

スマホを縦・横にしても対応
（更新ボタンを押さなくても良い）
ブラウザサイズを変えても対応
（更新ボタンを押さなくても良い）
ダウンロードするファイルサイズが大きい
（全種のCSSを読み込ませるため）

CSS3によるレスポンシブの方法

CSS3によるレスポンシブのやり方は、CSS（スタイルシート）の @media screen を使います。

●●●px以上、▲▲▲px以下の横幅の端末

最小が●●●pxで、しかも最大が▲▲▲pxの端末の場合。
横幅の上限と横幅の下限の両方が決まっている端末で使います。

縦向きのスマホほど小さくはないけどPCほど大きくない 『タブレットや横向けのスマホ端末用』 として適用したい場合などに使います。

@media screen and (min-width:●●●px) and (max-width:▲▲▲px){ この中にCSSを記述する }

▲▲▲pxよりも小さい横幅の端末

最大が▲▲▲pxの端末の場合。
スマホやタブレット端末などの、だいたいのモニターの画面の横幅の上限が決まってる端末に使います。

下限を指定しない場合は、0pxからと言うことになります。

@media screen and (max-width:▲▲▲px){ この中にCSSを記述する }

●●●pxよりも大きい横幅の端末

最小が●●●pxの端末の場合。
パソコン端末などの、モニターの画面の横幅の下限がだいたい決まってる端末に使います。

上限を指定しない場合は、下限に指定したpxから全部になります。

@media screen and (min-width:●●●px){ この中にCSSを記述する }

最初は min-width と max-widthの感覚が 『？』 ですが、慣れればどうということはありません。
（慣れるまでは混乱しまくりでしたが。（;´_`;））

実際に使う場合は、こんな感じになります。

@media screen and (min-width:●●●px) and (max-width:●●●px){ body{width:■■%;}/* bodyの横幅 */ }

これは、●●●px以上、●●●px以下の横幅の端末では、横幅は■■%にしなさいと言う指定です。

例えば、最大で899pxまでの画面サイズ（スマートフォンとタブレット端末全部）にスタイルを適用したい場合は

@media screen and (max-width:899px) { body{ width:100%;/* bodyの横幅は100%にする */ max-width:899px;/* bodyの横幅は最大で899pxにする */ } }

となります。

width:100% と書いてあるのは、『端末によって横幅がバラバラだから』 です。
横幅がそれぞれのバラバラの端末であっても、それぞれの端末で横幅は１００％キッチリ使って欲しいので、width:100% と指定してあげます。

pxで横幅を指定してしまうと、かなり細かく（それこそ全ての端末ごとに）指定してあげないと、横に 『謎の空白』 ができてしまいます。

max-width:899px; と書いてあるのは、『最大でも899pxまでですよ』 と言う意味です。
要するに、『一応、100%とは書きましたけど、最大でも899pxまでですよ』
と言う意味です。

例えば、最大でも899pxまでしか考えてデザインしていなかったのに、1200pxの画面で100%で表示されてしまったら、横幅が異様な長さになり ヽ(｀Д´#)ﾉ となってしまうのです。

じゃあ、元から横幅1200pxのパソコン端末はどうすれば良いのかと言う話なんですが、PC用はこのように書きます。

@media screen and (min-width:899px) { body{ width:100%;/* bodyの横幅は100%にする */ max-width:1200px;/* bodyの横幅は最大で1200pxにする */ } }

width:100%; と言うのは、『 899px以上の長さの画面（端末）では、横幅が100%になりますよ』 と言う指定です。

max-width:1200px;と言うのは、『最大で1200pxになります。
それ以上には横幅は広げません』と言う意味です。

これは、BODYタグ <body> だけでなく、DIVタグ <div> でも P <p> タグでも同じように指定できます。

ですので、横幅が 380px 以下のスマホの時は <div class="headder"> はスマホの幅ギリギリまで使って欲しい場合には、

@media screen and (max-width:380px) { div.headder{ width:100%;/* headderの横幅は100%にする */ } }

と書けばOKです。

この他、スマホとPCでフォントを変えることも可能です。

/* スマホ・タブレット端末の時 */ @media screen and (max-width:899px) { body{ font-family:"Verdana" color:#333333; } }

/* パソコン端末の時 */ @media screen and (min-width:899px) { body{ font-family:"ＭＳＰゴシック" color:#ff0000; } }

このような具合で、パソコンとスマホ・タブレット端末で、適用するフォントや色などを変更することもできます。

次のページは、HTML5でのCSSの切り替え方法について解説します。

次ページ

【HTML5編】サルでもわかるレスポンシブの基本の基本

前ページ

【スマホでもPCでもOK】レスポンシブ・ウェブデザインとは

このカテゴリの記事

その他のカテゴリを見る

【CSS3編】 サルでもわかるレスポンシブの基本の基本