レスポンシブWebデザインにする方法|パソコントラブル出張修理

レスポンシブWebデザインにする方法

TOP便利な使い方ホームページ作成 > レスポンシブWebデザインにする方法

レスポンシブWebデザインにする方法

最近はスマートフォンが普及し、そのほとんどがインターネットに繋がっておりますので、 Webページをスマートフォンで閲覧する人が増えています。

しかし、従来のPCでの閲覧用に作成されたWebページは、スマートフォンの狭い画面では縮小されてしまい、 文字を読むには拡大するなどの手間がかかってしまいます。 また、拡大されたWebページは、そのほとんどが横スクロールしないと文字が読めなくなり、 読みにくさが増大してしまいますので敬遠されがちになります。

これらを解消する方法として、スマートフォン専用のページを作る方法がありますが、 PC用ページとスマートフォン用ページの2つを作成する必要があり、 これにタブレット用などを追加するとなると、作成時間が増大し、 また、変更の手間も倍増する事になります。

そこで、1つのHTMLソースで、PCやスマートフォンなどの複数のデバイスに対応したページを表示する方法として、 レスポンシブWebデザインが採用されてきています。 レスポンシブWebデザインで作成されたWebページは、同じURLにもかかわらず、 そのデバイスの表示幅に最適化されたページデザインで表示されるので、 PCでは広く表示され、スマートフォンでは横スクロールしなくても的確な大きさの文字で表示されるようなWebページを作成する事ができます。

以下はレスポンシブWebデザインを作る上での要点です。

1.ビューポートの設定
ビューポートを設定する事で、閲覧されるデバイスのブラウザ表示幅に最適化された大きさで表示が制御できるようになります。 方法は、headタグ内に次の記述を入れます。
<meta name=viewport content="width=device-width, initial-scale=1">

2.コンテンツのサイズをビューポートに合わせる
もし、固定幅(絶対値)で指定されている画像やDIVブロックなどがある場合、 適切な大きさで表示できるように変更します。 例えば width:800px; などは width:100%; のように相対指定に書き換えます。 また、スマートフォンで表示すると小さくて見にくくなってしまう画像などは、 スマートフォン用に別に画像ファイルを用意してデバイス毎に切り替えます。 基本的にはスマートフォンなどで表示した場合に、 文字であれ画像であれ横スクロールなしに視認できるように表示できれば良い事になります。

3.メディアクエリを使用して各デバイスで表示するスタイルを指定する
CSS3では、ブラウザの幅に応じて表示を切り替えるメディアクエリが使えるようになりました。 これを利用して、CSS内にて各デバイスに対応する表示幅に応じて使用するスタイルシートを指定します。
(以下は基本的なCSS内の記述例ですが、ブラウザの横幅が640px以下とそれを超える幅とでスマートフォン用とPC用とに分けています)

/* 共通用 */

  /* 以下にブラウザに依存しない共通スタイル項目を記述する */


/* PC及びタブレット用 */
@media screen and (min-width: 641px) {

  /* 以下にブラウザの横幅表示が641ピクセル以上の場合のスタイル項目を記述する */

}


/* スマートフォン用 */
@media screen and (max-width: 640px) {

  /* 以下にブラウザの横幅表示が640ピクセル以下の場合のスタイル項目を記述する */



4.その他の留意事項

・スマートフォン用のメニューやリンクなどのアンカーが設定されている部分は、 指でタッチする事を考慮して適度にリンク同士の距離を取る。

・ FlashやSilverlightなどのプラグインは、スマートフォンやタブレットでは表示出来ないもが多いので使用しない。 動画やアニメーション、インタラクティブなメニューなどが必要な場合はHTML5で対応する。

・クリッカブルマップ(イメージマップ)などはjqueryプラグイン などを使用して、リンク部分も画像の大きさに応じて相対的に変化するような仕組みを取り入れる。

・CSSメディアクエリに対応していないブラウザ(例えばIE8など)を考慮する場合には、 フリーのJavaScriptなどを利用して対応する事もできますが、これらの古いタイプのブラウザはいずれ使われなくなるので、 それまでの応急的方法として、CSS内の共通スタイル項目(上記3番の共通用の部分)にPC用とCSSメディアクエリに対応しないブラウザ用のスタイルを記述し、 スマートフォンで重複する項目は、スマートフォン用のスタイル項目でそれを上書きする方法で対応する事も可能です。

以上、レスポンシブWebデザインの要点をまとめましたが、詳しい指定方法や各オプション値などはWebで検索してみて下さい。 また、googleのサイトに参考記事がありますので併せてご覧下さい。 参考) はじめてのマルチデバイス サイト
(2015年2月10日)

パソコントラブルの出張修理では、パソコンの故障や修理以外でもこのようなホームページなどの修正や作成も行っておりますのでお気軽にお問い合わせ下さい。
パソコントラブルの出張修理を依頼する

PC・インターネット・Windowsの便利な使い方やテクニックTOP


パソコントラブル出張修理 お問い合わせフォーム パソコントラブル出張修理の料金表 業務ソフト開発 アプリケーションソフト開発 ?