[レベル: 初・中・上級]
英語版のGoogle公式ヘルプフォーラムでGoogle社員のZinebさんが、CMSへの移行が難しい静的なHTMLサイトをモバイルフレンドリーなサイトに変換する際に考慮すべきことをアドバイスしました。
参考になるので日本語に訳して紹介します。
なおリンク先ページは日本語のものも英語のものもあります。
静的サイトをモバイルフレンドリーに転換する方法
- Chromeのデバイスエミュレーションモード（※このブログでの解説はこちら）を使って、異なるスクリーンサイズと解像度でウェブサイト（がどのように表示されるか）をテストする。
- viewport（ビューポート）を設定する。このタグによって、ページのコンテンツをさまざまなスクリーンで拡大縮小できるようになる。ビューポートがないと、PCで見たときのようにコンテンツが表示されてしまう。
<font>タグや他のインラインHTML要素の代わりにCSSを使うことを検討する。- ページの横幅が広すぎるとしたら、広すぎるHTML要素がおそらく原因になっている。フロートやリサイズするCSSとともにHTMLを使用したほうがいい。CSSの配信の最適化についてはPageSpeed Insightsのページを見るといい。
- 固定ピクセル幅のwidthをすべて取り除き（例:
<table width="600">）、相対幅のwidth（例:<table width="80%">）か最大幅のwidth（例:<table style="max-width:600px;">）またはメディアクエリを使用したレスポンシブな幅にする。 - スタイルシートに
img { max-width:100% }を追加する。これは横幅が広い画像を処理しやすくする方法で、横幅が広い画像をすべてデバイスの幅に収まるように縮小してくれる。 - ページのレイアウト整えるために
<table>タグを使うことを避ける。<table>は本当のテーブル（表）だけに使うようにする。<table>でのレイアウトをすでに使っているなら、PCでも適切にレンダリングされるように、divタグとCSSのフロート/インラインブロックにまず最初に変換する。その次に、レスポンシブにするためにメディアクエリを追加する。レスポンシブ レイアウトを作成するための詳細と例は、Web Fundamentals レスポンシブ ウェブデザインの基礎とレスポンシブ ウェブデザインのパターンを参照。 - 幅が広いテーブル（3〜4列以上）を避ける。モバイルのスクリーンには入りきらない。そうしたテーブルをすでにを使っているなら、修正するか（例: 数式や行列の項目を移項する）、またはテーブルなしのスタイル（例:
<dl>）に変換することを推奨する。 <pre>タグはページ幅をさらに広くしてしまうことがよくあるので、可能であれば取り除く。方法は次のタグのコンテンツに依存する。- テキストのフォーマットには、CSSのmargin・padding・text-indentなどを使う
- テーブルには、
<table>タグを使う。先に説明した横幅が広いテーブルに対する指示も参照すること - 固定幅のフォントには、CSSの
font-family:monospaceを使う - 空白のスペースを本当に確保する必要があるときは（たとえばコンピュータのコード）、
<pre>タグを使っても構わないが、preのボックスのなかで横方向のスクロールができるようにstyle="overflow:auto;"を追加する
- Internet Explorer 8のような古いPCブラウザを使用しているユーザーのために、DOCTYPE宣言を追加する。HTMLの先頭に正しいDOCTYPEがないと、互換モードに入り標準ではない方法でレンダリングしてしまうPCブラウザがある。DOCTYPEを使うと、そうした標準に従わせることができて、古いブラウザでおかしなレンダリングが発生することが減る。
- モバイル端末で一般的にサポートされていないFlashや他のプラグインを使用しない。
以上です。
必要なことをすべて網羅しているというわけではないし、あらゆる静的サイトに全部を適用できるわけでもありません。
それでも、同じような状況にあるサイトの役に立つはずです。