レスポンシブ・ウェブデザインの事例

当サイトの構成について

このサイトでは、HTML5+CSS3でサイト制作しています。
使用しているパーツが、各ブラウザ・キャリアでどう見えるか検証してみましょう。

レスポンシブ・ウェブデザインの検証

まず、PCサイズでの見え方です。パソコンで普段ご覧のブラウザで、当サイトのトップページを出来るだけ横幅を広げてご覧ください。
このように見えると思います。Firefox、Safari、Chrome、IE7~9での表示を確認しています。


次にタブレットでの見え方です。ここからの検証は、Media Queriesに対応したブラウザでしかできません。
※IEはバージョン9からの対応です。
各ブラウザの対応状況はこちらの参考サイトでご確認ください。
http://caniuse.com/#feat=css-mediaqueries

現在ご覧のブラウザがMedia Queriesに対応したバージョンである場合は、ブラウザの横幅を少しずつ縮めていってください。メニューがコンパクトになり、コンテンツ幅がせまくなるところがあります。また、下部に3つある誘導コンテンツのレイアウトが2行に変化します。


最後にスマホでの見え方です。もっと横幅を狭くしていってください。大きく見え方が変わるところがありますが、スマホ版ではタッチしやすいようにナビゲーションボタン小さくならないよう、2行にしています。また、コンテンツは縦一列に並びます。

このように、見ている側の環境によって、同じファイルのレイアウトが最適化されることを「レスポンシブ・ウェブデザイン」と言います。

レンダリングエンジンによるブラウザの区分け

ブラウザは大きく分けて、Safari・Chrome の「WebKit(ウェブキット)」、Firefoxの「Gecko(ゲッコー)」、IEの「Trident(トライデント)」となり、それぞれに解釈の違うレンダリングエンジンをつんでいます。つまり、同じHTMLやCSSを読み込んでも、各グル―プさらにはバージョンによって、どう表示するかが違うのです。

現状では、CSS3で記載する場合、それぞれの頭に、Safari・Chrome は -webkit-、Firefoxは -moz- と指定することになっています。そのため、ひとつの効果を記載するのに「Safari・Chrome」用と「Firefox」用と、将来、全てが統合された時用の3種類の記述を併記しています。

角丸のコーディング例:
              -moz-border-radius: 10px;
              -webkit-border-radius: 10px;
              border-radius: 10px;

CSS3の検証

では次に、このサイトでのCSS3の検証をしてみましょう。

トップページの下部にある3つのコンテンツ枠では、画像を使わずに枠の角を丸くするCSS「border-radius」を使っています。また、タイトル部分にはグラデーション「linear-gradient」とドロップシャドウ「box-shadow」をつけていますが、このCSSに対応していないIE8以下のブラウザで見ると単色に見えます。

IE や Opera にも実装させる場合はJavaScript 等を使用するのですが、ここでは指定していません。そのため、IEでは角丸にはならず、四角い枠に見えます。

このように、CSS3はご覧のブラウザによって、同じパーツのデザインが違って見えます。しかし今回のような使用方法は、WEBサイトの情報を伝えるにあたって大きな支障はありません。

CSS3ではいろいろと便利なことが出来るのですが、現状では、見栄えが変わっても内容に支障はないという部分にとどめるのが現実的です。