レスポンシブWebデザインページの作り方

様々なネット接続機器やブラウザでウェブページを見ると横幅が違う為に見え方も様々です。見え方を改善する為にレスポンシブWebデザインのページにしました。スマホでは、RESS(Responsive Web Design with Server Side Components)にしています。

様々な機器やブラウザによるページの見え方

パソコンやディスプレイによって画面の横幅は様々であり、ホームページ(ウェブページ)の見え方も違ってきます。自分のパソコンではちょうど良い見え方をしていても、他のパソコンではその通りに見えているとは限りません。

つまり、パソコンなどの機器やブラウザによって画面の横幅や見え方が千差万別になっているのが普通で、同じ見え方をしている場合はほとんどありません。

スマートフォンの画面の横幅とページの見え方

スマートフォンの画面のサイズは最低320x480pxであり、最近のスマートフォンは解像度が上がる傾向があります。そして、一般的にスマートフォンは画面のサイズが約3~6インチと小さいのが特徴です。

タブレット端末はスマートフォンと同様な機能を持っていますが、これはスマートフォンに比べると表示画面が7~10インチ程度と大きくなっています。

スマートフォンに普通のウェブページをそのまま表示させると、全体が縮小されて非常に見にくい画面になってしまいます。

レスポンシブWebデザインとは

このように機器やブラウザの横幅によって見え方が異なる為に考えられたウェブデザインの方法のひとつが、レスポンシブWebデザインです。

つまり、レスポンシブWebデザインでは、ウェブページのデザインをブラウザや機器の種類で判別するのではなく、表示する横幅で判別して表示を切り替える方法です。

レスポンシブ・ウェブデザインの利点

レスポンシブWebデザインにすれば、同一のHTMLファイルをCSS3で制御して表示を最適化することができるので、URLが一つで良いのです。この為、ウェブページの製作や管理をしやすくなる特長があります。

また、シェア耐性が高い特長もあります。シェア耐性とは次のような事です。SNSやメールで、あるページを紹介することがよくあります。この時送られて来たURLを見てみると、PC用のページのものであり、スマートフォンや携帯電話で見ると、とても見にくいページになることがあります。このようにURLをシェアした時、レスポンシブ・ウェブデザインのページは単一のURLなので問題が無く、シェア耐性が高いと言えます。

レスポンシブWebデザインはSEOにも良く、グーグルでも推奨しています。

レスポンシブWebデザインにする為の条件

レスポンシブWebデザインにするには、あらかじめWebデザインをやりやすいページにしておく必要があります。HTMLを書く順番を重要なことから書いておく必要があります。つまり本文を先に書いて、ナビゲーションなどを後から書くようにします。

画像や表などの縦横の幅などは、パーセント指定するか、何も指定しないようにしておく必要があります。縦横の幅を指定してしまうと、CSSで変更することができません。

また、ウェブページの見え方のデザインは全てスタイルシートで行なっておく必要があります。レイアウトはリキッドレイアウトにしておくと簡単にレスポンシブWebデザインにできます。

Media Queriesを使って画面の横幅でデザインを切り替える

メディアクエリ(Media Queries)を使って、スクリーンサイズ(画面の横幅)ごとにCSSを切り替えます。次のようにCSSファイルに直接追加して書きます。

元々リキッドレイアウトの上に3段構えで横幅を自動的に変えているので、どんな横幅で見ても全く問題なくページを見ることができます。

@media screen and (max-width:800px) {
#main {max-width:635px;margin:5px 0 10px 165px}
#side {max-width:160px;position:absolute;top:5px;left:1px}
}
@media screen and (max-width:550px) {
#main {max-width:550px;margin:0}
#side {max-width:550px;position:relative;top:0;left:0;margin:0}
}

これは私の場合の例です。画面の横幅が800px以下になると、メインの左側の余白を小さくしています。つまり、無駄なスペースをできるだけ省いています。

横幅が550px以下になると、段組を解消して、サイドバーをメインコンテンツの後ろに持って来ます。

Media QueriesのIEへの対応

インターネットエクスプローラー(IE)ではMedia Queriesが使えません。しかし、次のようにGoogleで公開されているcss3-mediaqueries.jsを使えば、IEでも media queriesが使えるようになります。これをヘッドタグ内に記述してやります。

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

スマートフォンとタブレット端末用にviewportを指定します

viewportを指定しないと、スマートフォン楽天などでは、横幅が980pxに固定されて表示されます。この為、横幅が狭いにもかかわらず、縮小して表示されてしまいます。

メタタグで「viewport」を、下記のように「width=device-width」と設定することにより、スマートフォンで最適な横幅に表示させることができます。initial-scale=1.0はiphoneでスマホを横にした時、拡大し過ぎるのを防止する為です。

<meta name="viewport" content="width=device-width,initial-scale=1" />

また、最近のスマートフォンでは横幅が最大640pxあるので、最大の横幅を640pxにして、マージンを全て0にして、横幅を有効に使うようにします。元々、画像ファイルの横幅の最大値をスクリーンの幅に制限していますので画像についてはここでは指定しません。これは、インラインスタイルシートにして、次のように指定しています。実際は改行も無くして1行にしています。

<style>
<!--
<?php include(/***/style.css); ?>
<?php if(is_mobile()) { ?>
body{font-size:1.2em}
#main{max-width:640px;margin:0}
#side{max-width:640px;position:relative;top:0;left:0;margin:0}
.sp_lh{line-height:1.8}
<?php } ?>
-->
</style>

レスポンシブデザインでグーグル広告も切り替える

AdSense広告コードの改変は認められていませんでしたが、レスポンシブ・ウェブデザインに対応する為に広告コードの一部改変が認められました。また、レスポンシブ広告コードもあります。

HTML部分のデザインをPHPで切り替えて表示(RESS)

ページの一部をPHPを使ってサーバーサイドで処理して、レスポンシブWebデザインも適用します。そうすると一つのテンプレートで全デバイス向けのウェブサイトを構築できます。これはRESS(Responsive Web Design with Server Side Components)と呼んでいます。

具体的には、スマートフォンでは、サーバーサイドで動作するPHPを使って、スマートフォン用に広告の切り替えやCSSの切り替えもやっています。

広告が切り替わって表示されると同時に、デザインも切り替えています。お気づきの点がありましたらお知らせくださると嬉しく思います。

結果

以上の結果、スクリーンの横幅が800pxより大きいと、従来通り、サイドバーの付いた2段組で、右側のメイン部分の最大幅が710pxで表示されます。

右側はリキッドレイアウトです。更に、画面の横幅が800px以下ではサイドバーの余白が少なくなるようにしています。

横幅が550px以下になると、段組を解消して表示されます。これもリキッドレイアウトです。なかなか良い感じです。