レスポンシブサイトの作り方

閲覧する端末に応じて表示を最適化するレスポンシブウェブデザインで、ホームページをスマートフォンやタブレット端末に対応させる方法をご紹介します。

手順は以下のとおりです。

①htmlファイルのheadタグ内に、以下のメタタグを追加してviewportを設定する。

<meta name="viewport" content="width=device-width" />

②スタイルシートの下の方に、スマホ用のメディアクエリを記述する。

@media screen and (max-device-width: 480px) {スマホ用のCSSを記述}

スマホ用のCSSの箇所は個別に記述する必要がありますが、これでスマートフォンに対応することができます。

レスポンシブデザインに対応していないデフォルトでの状態

当ホームページをスマートフォンで閲覧してみると、レスポンシブウェブデザインに対応していないデフォルトの状態ではこのように表示されています。

スマホのデフォルトでの表示

これでは文字が小さいのでピンチアウトしないと読みにくいです。
この原因についてですが、iPhoneのサファリではサイトを閲覧した際、横幅の表示領域を980pxとした上で、それをiphone解像度の320pxまで縮小して表示させるためです。

追記:iPhone 6が発売になりました。(iPhone 6の解像度は375pxです。)

当サイトのレイアウト幅は810pxですので、表示領域を980pxとして取った場合は上記のように左右に余白が生じてしまいます。

ネット上の大部分のサイトはスマホ用に最適化しているわけではないので、サファリでは一般的なサイトの横幅を980pxとみなし、それを端末幅の320pxまで縮小して表示させることで、どのサイトでもぶなんに表示する仕様になっています。

つまり、表示領域を980pxとしてとり、縮小しない状態の場合、解像度320pxのスマホで閲覧するとこのような状態になりますが、

width980pxでの表示

これではiphoneの解像度でははみ出してしまうため、デバイス幅の320pxまで自動で縮小して表示します。

スマホのデフォルトでの表示

そのため、文字が小さくなってしまうわけです。つまり、デフォルトの状態では縮小されたものを閲覧している形になります。

これでも、ピンチアウトすればかろうじて読めはしますが、サイトによっては文字がかなり小さく表示されてしまうため、できるだけレスポンシブウェブデザインで最適化しておいた方がよいでしょう。

※このページでの「px」は「csspx」の意味で使ってます。公式サイト上で表示されているデバイスピクセルの解像度とは数値が違っていますので、ウェブ作成においてはcssのピクセルで対応することをおすすめします。また、スマホはiPhoneだけではありませんが、便宜上、iPhoneを例にご紹介しております。

①viewportのメタタグで980pxの設定を解除する

方法としては、まず、デフォルトの「横幅980pxでの表示領域の設定」を解除し、スマホ解像度の320pxで表示領域をとるようにします。

これが①の箇所になります。

viewportのメタタグを追加して設定しますが、文字どおり、320pxに設定する場合は以下のように記述します。

<meta name="viewport" content="width=320" />

ただ、スマホによっては解像度が違うため、320pxとは限りません。iphone6などでは大きめになりますので、端末幅を意味するdevice-widthで記述した方がぶなんかと思います。

<meta name="viewport" content="width=device-width" />

この場合、iPhone5の表示領域は320pxですので、横幅を320pxでとるとこのように表示されます。

width320pxでの表示

当サイトの全体の横幅が810px、コンテンツの幅が550pxですので、320pxではちょうどこのくらいです。この場合、サイト全体のレイアウト幅が810pxに対し、viewportを指定することで、表示領域が980pxから320pxになりましたので余白はなくなっています。

ただ、実際に上記のメタタグを設置してスマホで閲覧した場合は自動で縮小して表示されますので、このようになります。

device-width追加後の表示

②メディアクエリでサイトの横幅を320pxに設定する

この状態で、スタイルシートでホームページのfloatの回り込みを解除し、コンテンツやサイドバーなどの横幅も320pxに設定すれば、縮小されずにそのまま表示されますので、文字がちいさくなることもありません。

これを設定するには、②の箇所になりますが、スタイルシートの下の方にメディアクエリを追加し、スマホで閲覧した際にだけ適用されるスタイルシートを設定しておきます。

@media screen and (max-device-width: 480px) {スマホ用のCSSを記述}

これはデバイス幅が最大480pxのスマートフォンの端末で閲覧した際に、このスタイルシートを適用してくださいという意味です。ただし、パソコンなどの480pxをこえる解像度の大きな端末で閲覧した際には無視されます。

このスマホ用のスタイルシートの箇所に、サイドバーなどのフロートの回り込みの解除を設定し、それぞれの要素の横幅が320pxで表示されるように書いておきます。

そうすると、スマホで閲覧した際、CSSの上からまずはパソコン上の横幅810pxが読み込まれますが、さらにこのメディアクエリの記述箇所でスマホ用の横幅320pxが読み込まれて上書きされますので、サイトの横幅が320pxとして表示されます。

この場合、viewportの表示領域と実際の横幅が320pxで合致しますので、拡大も縮小もされずに initial-scale=1 の状態で表示され、文字もちいさくならずに表示されます。

実際に記述する際は、当サイトの場合、ヘッダーやコンテンツ、サイドバー、フッターの各回り込みの解除し、ワンカラムに設定したうえで、それぞれの幅を320pxで指定するのではなく、width:100%;で指定しています。

また、文字サイズも微妙に大きくしたりしてスマホ用に調節しています。

見やすいスマホサイトの完成

PCサイトでは、1行の文字数を40~45文字前後に調整するのが見やすいと思いますが、スマホサイトでは1行18文字~20文字程度で最適化することをおすすめします。

気を付けたい点は、paddingやmarginの取り方や、あるいはサイト内で横幅が320px以上で設定されているものがあれば、くずれて表示されてしまうことです。

特に、画像がそれにあたるかと思いますが、img {zoom:80%;}、あるいはimg {max-width: 100%;height: auto;}などを記述して縮小しておくことをおすすめします。

さらに、iPadなどの中型タブレット端末などで閲覧した際のデザインについても、以下のように指定しておけばよいでしょう。

@media screen and (max-device-width: 800px) {中型タブレット用のスタイルシート}

これをスマホ用のメディアクエリよりも上部に設置し、パソコン→中型タブレット→スマホ用の順で読み込まれるように設定するとうまくいくはずです。

当サイトでは中型タブレットについては、特に対応しておりませんが、かなり文字が小さくなるスマートフォンだけでも対応しておくとよいかと思われます。

ツールを利用してスマホでの表示を確認

このページではiPhone 5のみチェックしていますが、ブラウザ・クロームの「その他ツール - デベロッパーツール」からスマホ画面をクリックすれば、ほぼすべての端末の表示具合を確認できます。

chrome デベロッパーツール

アクセス解析を確認し、シェアの多い端末から対応していくとよいでしょう。

chrome スマホ確認

また、うまくスマートフォンに対応しているかを詳細にチェックするには、こちらのモバイルフレンドリーテストでチェックしてみるとよいでしょう。
モバイルフレンドリーテスト