本文へスキップ
  1. トップページ>
  2. Tips>
  3. ホームページビルダー16、モバイルフレンドリー対応方法

Tipstips

備忘録として、主にパソコン関係のTipsを記載して行きます。


新着情報
Access2010、最新のレコードを安定して取得する方法
Windows10、マッハドライブはアンイストールすべき
パソコンの動作が遅い、SSDによる高速化2
Netflix、解像度が低い時の対処方法
Access2010、定義XMLによるスキーマの確認が失敗する時の対処方法

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

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

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

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

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

(項目3)
 ・レスポンシブWebデザイン
 ・レスポンシブWebデザインは、1つのhtml、複数のCSSで、マルチデバイスに対応する方法です。
 ・レスポンシブWebデザインでは、以下の4つが必要となります。
  @ビューポート  (viewport)
  Aメディアクエリ (Media Queries)
  Bフルードグリッド(Fluid Grid)
  Cフルードイメージ(Fluid Image)

(項目4)
 ・ビューポートの設定
 ・ビューポートでは、表示デバイスの画面サイズが指定できます。
 ・お勧めの設定は、以下の通りです。下記をヘッダーに追記します。
  <meta name="viewport" content="width=device-width, initial-scale=1">
 ・代表的な機種の画面サイズは、以下の通りです。
  iPhone 4      : 320px
  iPhone 4S     : 320px
  iPhone 5      : 320px
  iPhone 5S     : 320px
  iPhone 6      : 375px
  iPhone 6 Plus : 414px
  iPad mini     : 768px
  iPad          : 768px
  iPad 3        : 768px
  iPad Air      : 768px

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

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

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


(項目6)
 ・フルードグリッド(Fluid Grid)
 ・フルードグリッドとは、ページ幅を相対値で指定する方法です。
 ・使用例は、以下の通りです。
  body {
   width: 100%;
  }


(項目7)
 ・フルードイメージ(Fluid Image)
 ・フルードイメージとは、画像を拡大縮小する方法です。
 ・使用例は、以下の通りです。ベージ幅が変化すると、画像幅が最大100%まで変わります。
  img {
   max-width: 100%;
   height:auto;
  }


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

(項目8)
 ・以上で、ホームページビルダー16、モバイルフレンドリー対応方法は終了です。



contents

エクセル将棋館

日本国

地方都市

e−mail(e−mail


スポンサード リンク