アフィリエイトは2001年から運営実績がある安心のアクセストレード

アフィリエイトのアクセストレード

パートナーログイン

ID・パスワードを忘れたかたはこちら

広告主(マーチャント)ログイン

サイト運用

スマートフォン対応サイトの作りかたの基礎

情報更新日:2011/11/08

All About ホームページ作成ガイド

西村 文宏 (ニシムラ フミヒロ)

みなさま、こんにちは。

普段、All Aboutという情報サイトでウェブサイト制作について記事を連載している 西村 文宏(ニシムラ フミヒロ)と申します。

今回は、スマートフォン用サイトの作りかたの基礎についてご紹介させていただきますので お付き合いいただけますと幸いです。

PC用サイトとは別の、スマートフォン用サイト

スマートフォンは、PC用に作られたウェブページをそのまま閲覧できます。

ですから、すでにPC用サイトがあるなら、スマートフォン用サイトを別途用意する必要は 必ずしもありません。

しかし、最近の大手サイトでは、PC用サイトとは別にスマートフォン用サイトを 用意していることがよくあります。

画面の小さなスマートフォンでは、いくらPC用ページが表示できるといっても 縮小表示せざるを得ないため、ユーザに拡大・縮小操作を強いることになるからです。

快適に閲覧してもらうためには、スマートフォン専用ページを用意する方が望ましいということでしょう。

スマートフォン用サイトを作るには?

スマートフォン用サイトを作るために、特殊な環境やツールは不要です。
普段、PC用サイトを作っているのと同じツール・方法が使えます。

iPhoneやAndroidといったスマートフォンには、HTML5やCSS3を解釈できる最新のブラウザが搭載されています。初期のiPhoneやAndroidに搭載のブラウザでも同様なので、スマートフォン用サイトを作る際には、過去の互換性を気にすることなく、最新のHTML5+CSS3で作って問題ありません。

せっかく最新の表示環境が整っているのですから、HTML5+CSS3で作るのが望ましいといえますが、 必須ではありません。従来通り、HTML4.01などで作っても問題なく表示できます。

ですから、HTML5やCSS3が分からないなら、分からないままでも問題ありません。

特別に新しいことを学ぶ必要なく、今までの知識のままでもスマートフォン用ページは作成できます。
(もちろん、HTML5やCSS3を使う方が、より多くのデザインや機能を実現可能ですが。)

では、何も注意することなく普通にウェブページを作るだけで、 「スマートフォン用ページ」になるのでしょうか。

……実は、そうではありません。

ウェブページをスマートフォン用にする際の問題点

スマートフォン用ページを作ろうとしたとき、1点だけ問題になることがあります。
それは、『勝手に縮小表示されてしまう』という点です。

スマートフォン用ページを実際に作ってスマートフォンで表示させてみると、自動的にページ全体が 縮小表示されてしまうという問題に気づくはずです。

スマートフォンに搭載されているブラウザは、PC用ページをうまく表示できるよう設計されていますから、「画面の横幅がPC用画面のように広い場合」を想定してレンダリング(描画)し、それを「スマートフォンの実際の画面横幅に合うよう縮小」して表示する仕様になっています。

スマートフォン側には、表示しようとしているページが「スマートフォン用に作られたページ」なのか 「PC用に作られたページ」なのかを判断する方法がありません。

どちらも作り方が同じなのですから当然ですね。

ですから、たとえウェブページの作成者が「これはスマートフォン用だ」と思って作成しても、そのままでは自動的に縮小されてしまうのです。

スマートフォン用ブラウザが勝手に縮小表示してしまうのを回避するには

ウェブページそのものの作り方は、PC用もスマートフォン用も同じですが、 スマートフォンに対して「実寸で表示して(縮小せずに表示して)欲しい」と伝える方法が 用意されています。

それが、以下の1行です。


<meta name="viewport" content="width=device-width">


上記のmeta要素をHTMLソース内に記述しておくと、スマートフォンで閲覧された場合でも勝手に縮小されることはなくなります。

つまり、ユーザに拡大操作を強いることのない、見やすい「スマートフォン用ページ」が作れます。

スマートフォン用サイトを1から作成する際には、HTML内に必ず上記の1行を記述するようにすると 良いでしょう。

記述する場所は、HTMLソースのhead要素内(=「<head>」タグと「</head>」タグの間)ならどこでも構いません。ぜひ試してみて下さい。

なお、XHTMLを使ってページを作っている場合は、以下のように記述します。


<meta name="viewport" content="width=device-width" />


今回はここまで。

次回は、PC用に作ったサイトを、大きく改修することなくスマートフォンでも見やすくする方法をご紹介いたします。

ぜひ、お付き合い下さい。


All About ホームページ作成ガイド

西村 文宏 (ニシムラ フミヒロ)

2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。

同じ著者の記事

関連コンテンツ

ご注意ください

  • ・本ページの内容は、2011/11/08更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
  • ・一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合があります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合は責任を負いかねますので、内容を御確認のうえ、ご自身の判断のもとでご利用ください。
  • ・掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。