レスポンシブWebデザインを構成するスタイルシートの役割

レスポンシブWebデザインのサイトは、パソコン・スマホのみのホームページに比べて制作費が高くなるという説明をしましたが、同じ1サイトを作るだけなのにどうして価格が上がるのか?と、疑問に思われる方もいらっしゃるのではないでしょうか。
また、価格が上がるにしてもそんなに手間のかかる作業なのか、悪い言い方をすれば足元を見て料金を吊り上げているだけなのではないか?と思っている方もいらっしゃるかもしれません。

そこまでは思っていないという方でも、ある程度実態がわかった方が話をしやすいという場合が多いでしょう。
少なくとも、スマホ対応とレスポンシブWebデザインのホームページについて、どういった仕組みになっているのかをある程度理解しておいた方が、価格設定に対して納得できるのではないでしょうか。
そこで、今回はレスポンシブWebデザインを完成させるための構造について簡単に説明します
少し専門的な内容になりますが、HTMLやCSSの意味まで理解しなくても問題ないので、ざっくりとイメージができる程度にはしておきましょう。

Webサイトの構成に欠かせない「メディアクエリ」とは?

Webでページを閲覧するにあたって、今や欠かせないものとなっているパソコンとスマートフォンへの対応。レスポンシブ対応やスマホ対応という言葉が世の中には飛び交っていますが、インターネットに繋がっているデバイスはパソコンやスマートフォンだけでなく、プリンタやテレビ、プロジェクターなど、さまざまなものがあります。
ホームページでは「media」というタグ使うことによってページを見ている媒体を取得させ、それぞれに合わせたカタチで表示させるように指示を出しています。特に仕分けをする必要がなければ「media=”all”」とする方法もあり、一般的なホームページはほとんどがscreenかallになっています。

アクセスしてきたデバイスを把握した上で、画面幅が600以上の場合はこの指示書(ファイル)を、300以上の方はこっちの指示書を、それ以下の方はこっちの指示書を読み、ルールに従って表示させてください。
といった案内係のような役割を担当しているのが「メディアクエリ」ということになります。

CSSでもディスプレイ幅によって表示を調整できる

HTMLで指示書の場所を案内したら、今度は指示書の内容を整理していきます。この指示書のことを専門的には「スタイルシート」と呼んでいて、ほとんどの場合「CSS(シーエスエス)」という言語を使って記述されます。
厳密にはふたつはまったく違ったものなのですが、スタイルシートのファイル名が「style.css」となっているせいか、場合によってはスタイルシートのことを指してCSSと呼ぶケースもあるので混乱しないようにしておきましょう。

メディアクエリでスタイルシートを分けて記述する場合は、それぞれの幅によって仕分けされたスタイルシートごとに、文字の大きさはこのくらい、幅に対する枠のとり方はこのくらい、といった感じで1つひとつ指示書を書いていきます。
メディアクエリでディスプレイのサイズごとにスタイルシートを分けていない場合は、CSSを使って「@media screen and (min-width: 300px) ※横幅が300以上の場合に適用」と記述し、同じスタイルシートの中にまとめて書く方法もあります。
いずれにしても、スマートフォン、タブレット、パソコンと3種類の端末があるので、レスポンシブに対応したホームページを制作する場合は3種類以上の幅に対してスタイルシートを設定するのが一般的です。

パソコンのことだけを考えてホームページを制作する場合に比べ、スマホに対応できるようなHTMLを記述し、関連する項目のスタイルシートも最低3種類は作成するレスポンシブWebデザインと、パソコンユーザーのことだけを考えて制作し、スタイルシートも1種類しか作成しないパソコンサイトを比べた時、レスポンシブWebデザインの方が割高になるというのは、ここまでの内容が理解できれば納得できるのではないでしょうか。

スマホ対応にする場合はどうなるのか

では、現在パソコン用のホームページを持たれていて、スマホ対応するためにスマホサイトを制作する場合、どのような方法になるのか。今度はスマートフォンのことだけを考えたサイトだけを制作するので、パソコン専用サイトのようにスタイルシートは1種類だけなのかというと、これも微妙なところです。
というのも、現在運用しているパソコンサイトが、タブレット端末で使いやすいWebサイトになっていないことが多いので、どのように対応するのかを考えていく必要があるのです。

全体の7割以上のアクセスがスマートフォン、2割より少し多いくらいのパソコンサイト。多くのWebサイトがこのアクセスの比率に近い数字になっているため、残りの数字であるタブレットは1割にも満たないアクセス数になっていることがほとんどですが、そうは言っても完全に無視するわけにもいきません。
そこで、デザインはあくまでもスマートフォンベースで考えていきますが、スマホサイトのCSSに「media」の記述を入れ、タブレットにも対応させるという手段も一案として出てきます。

タブレット端末はスマートフォンに比べてディスプレイ幅がかなり大きいので、スマホサイトをそのまま表示させるよりもパソコンサイトを表示させた方が良いのでは?と思われがちですが、実際には横長のディスプレイに合わせて制作されているパソコンのホームページよりも、縦長のディスプレイに合わせて制作されているスマホサイトの方が、同じ縦スクロールのタブレットにとって操作がしやすいことが多いのです。
もちろん、デザインをどこまで対応させていくかによって対応も異なりますし、ここまでやるならPCサイトはやめてレスポンシブのホームページにした方が都合が良いということも出てきますので、最終的な判断は制作会社との話し合いの中で決めていく流れになります。

まとめ

レスポンシブWebデザインのホームページを構成しているHTMLとスタイルシートの関係性はなんとなく理解できたでしょうか。
ホームページの制作やリニューアルを進めていくにあたって、レスポンシブやスマホ対応は今や必須条件となっています。
HTMLやCSSを自ら記述できるようになる必要はありませんが、ざっくりとでも仕組みを理解することで、最良の選択はどれなのかが分かってくることもあるので、ぜひひと通り覚えておきましょう。

この事業についてもっと詳しく知りたい方は、

Webサイト制作へ