ホームページビルダー１６、モバイルフレンドリー対応方法

ホームページビルダー１６は、手頃な価格で機能が豊富です。ホームページ作成ソフトでは一番人気でしょう。

しかし、モバイルフレンドリーに対応する方法が、スマートフォン用ページの作成しか有りません。
以下、ホームページビルダー１６、モバイルフレンドリー対応方法を記載して行きます。
（編集スタイル：スタンダード）

（項目１）
　・モバイルフレンドリーの重要性
　・インターネットを閲覧するデバイスは、デスクトップＰＣ、タブレットＰＣ、スマートフォンの３種類が
　　有ります。
　・スマートフォンによる検索が増加しており、スマートフォン対策が重要となって来てきます。
　・モバイルフレンドリーは、携帯できるデバイスで閲覧し易いＷｅｂサイトを意味します。

（項目２）
　・マルチデバイス対応方法
　・多様なデバイスに対応するには、以下の３つの方法が有ります。
　　�@デバイス毎に専用のＷｅｂサイトを作成する。
　　�A業者に依頼し専用サーバでページを変換する。
　　�BレスポンシブＷｅｂデザインでＷｅｂサイトを作成する。
　・上記３つ中で、�BレスポンシブＷｅｂデザインが有望です。

（項目３）
　・レスポンシブＷｅｂデザイン
　・レスポンシブＷｅｂデザインは、１つのｈｔｍｌ、複数のＣＳＳで、マルチデバイスに対応する方法です。
　・レスポンシブＷｅｂデザインでは、以下の４つが必要となります。
　　�@ビューポート　　（ｖｉｅｗｐｏｒｔ）
　　�Aメディアクエリ　（Ｍｅｄｉａ　Ｑｕｅｒｉｅｓ）
　　�Bフルードグリッド（Ｆｌｕｉｄ　Ｇｒｉｄ）
　　�Cフルードイメージ（Ｆｌｕｉｄ　Ｉｍａｇｅ）

（項目４）
　・ビューポートの設定
　・ビューポートでは、表示デバイスの画面サイズが指定できます。
　・お勧めの設定は、以下の通りです。下記をヘッダーに追記します。
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　・代表的な機種の画面サイズは、以下の通りです。
　　ｉＰｈｏｎｅ　４　　　　　　：　３２０ｐｘ
　　ｉＰｈｏｎｅ　４Ｓ　　　　　：　３２０ｐｘ
　　ｉＰｈｏｎｅ　５　　　　　　：　３２０ｐｘ
　　ｉＰｈｏｎｅ　５Ｓ　　　　　：　３２０ｐｘ
　　ｉＰｈｏｎｅ　６　　　　　　：　３７５ｐｘ
　　ｉＰｈｏｎｅ　６　Ｐｌｕｓ　：　４１４ｐｘ
　　ｉＰａｄ　ｍｉｎｉ　　　　　：　７６８ｐｘ
　　ｉＰａｄ　　　　　　　　　　：　７６８ｐｘ
　　ｉＰａｄ　３　　　　　　　　：　７６８ｐｘ
　　ｉＰａｄ　Ａｉｒ　　　　　　：　７６８ｐｘ

（項目５）
　・メディアクエリ（Ｍｅｄｉａ　Ｑｕｅｒｉｅｓ）
　・メディアクエリとは、表示デバイスの画面サイズ等の条件で、ＣＳＳを切り替える方法です。
　・効率良く記述したい場合は、画面サイズが小さい順から記載し、より大きな画面サイズで上書きします。
　・使用例は、以下の通りです。
　　/* 共通設定およびスマートフォン向けのスタイル */

　　/* タブレット向けのスタイル：481px 〜 768px */
　　@media only screen and (min-width: 481px) {
　　}

　　/* PC向けのスタイル：769px〜960px */
　　@media only screen and (min-width: 769px) {
　　}

（項目６）
　・フルードグリッド（Ｆｌｕｉｄ　Ｇｒｉｄ）
　・フルードグリッドとは、ページ幅を相対値で指定する方法です。
　・使用例は、以下の通りです。
　　body {
　　　width: 100%;
　　}

（項目７）
　・フルードイメージ（Ｆｌｕｉｄ　Ｉｍａｇｅ）
　・フルードイメージとは、画像を拡大縮小する方法です。
　・使用例は、以下の通りです。ベージ幅が変化すると、画像幅が最大１００％まで変わります。
　　img {
　　　max-width: 100%;
　　　height:auto;
　　}

以下は、随時、追記して行きます。

（項目８）
　・以上で、ホームページビルダー１６、モバイルフレンドリー対応方法は終了です。