ホームページ作成講座　　　STEP13　レスポンシブデザイン

レスポンシブデザインの作り方です。
スマートフォン、タブレットなど携帯端末からのアクセスが増加してきて、これらのモバイル端末の 画面サイズに適切な表示を行うレシポンシブデザインが重要視されてきています。
レシポンシブデザインの作り方を基礎からやってみましょう。

★モバイルフレンドリー

Webサイトページなどが、スマートフォンなどの携帯端末に対応していることをモバイルフレンドリーといいます。
google検索のアルゴリズムにモバイルフレンドリー含まれるようになり、モバイルフレンドリーでなければ検索順序も下がるため、 レスポンシブデザインの導入は大事な要素となっています。

ページがモバイルフレンドリーの条件を満たしているかどうかは、以下のサイトが役に立ちます。
●モバイル フレンドリー テスト
●Google のウェブマスター向けモバイル ガイド
● [モバイル ユーザビリティ] レポート
●サードパーティ ソフトウェア向け手順ガイド

【参照】
検索ユーザーがモバイル フレンドリー ページを見つけやすくするために

このページのトップ

★2カラムのボックスのレスポンシブデザイン

このレイアウトをレシポンシブにしてみましょう。
★サイドバー幅固定、メイン幅可変の2カラムのボックスレイアウト

基本はこのデザインに、以下のCSSのコードを追加するだけです。

ソースコード（CSS)

@media (max-width: 1000px) は、画面の横幅が1000pxまでのとき、つまり幅が1000px以下のとき時にこのスタイルを適用する意味。
div#dummy_main_box, div#main_box, div#right_box でスタイルを再定義しています。
float: none; でフローティングをやめて回り込みをしない。
margin: 0; で回り込みの時の幅調整用のマージンをリセットしています。
width: auto; で幅をいっぱいに戻しています。
ちなみに、width: 100%;とwidth: auto; との違いは、
・width:”auto”の場合は、paddingやborderを含んで100%
・width:”100%”の場合は、paddingやborderを含まないで100%なので、全体で100%より大きくなる場合がある
・デフォルトは、width:”auto”
【CSS】width:”auto”とwidth:”100%”の違い を参照してください。

これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方を参照しました。

★ビューポートの設定

右のサイドバーが回り込みをやめて、横いっぱいに表示されるようになり確かにレシポンシブになったわけですが、 このままだと、文字が小さすぎてよくありません。
実際に、上記 モバイル フレンドリー テストでは、
　×テキストが小さすぎて読めません
　×モバイル用 viewport が設定されていません
の理由から、「モバイル フレンドリーではありません」の判断が出ます。
そこで、理由の２つめであるビューポートを設定してあげる必要があります。
次のメタコードをを追加してください。
これで、モバイル用に適切に表示されるよう最適化されます。
ビューポート設定については、ビューポートを設定する を参照してください。

ソースコード（HTML)

元の画面（１）、CSSのコードを追加（２）、さらにビューポートの設定（３）

サンプル

このページのトップ

とりあえず、レシポンシブの基礎の基礎でした。
しばらくしたら、次の内容を追加します。