各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

All About ホームページ作成ガイド 西村 文宏
All About ホームページ作成ガイド
西村 文宏 (ニシムラ フミヒロ)
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
コーポレートサイトhttp://allabout.co.jp/gm/gt/1053/
講師PR
RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です!『にししふぁくとりー』
http://www.nishishi.com/

スマートフォン対応サイトの作りかたの基礎(第1回)

  • publish_advertise
2011/11/08

みなさま、こんにちは。

 

普段、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要素内(=「」タグと「」タグの間)ならどこでも構いません。ぜひ試してみて下さい。

 

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

 


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


 


 

今回はここまで。

 

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

 

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

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
続きを読む>>
続編
2011.11.10
スマートフォン対応サイトの作りかたの基礎(第2回)

▲ページトップへ戻る

1CLICKアンケート!!
Loading...
1CLICKアンケート!!
アフィリエイトで稼ぐための心構え3カ条
1.「稼ぐ気持ち」を出しすぎない
稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
2.「納得できる方法」で稼ぐ
報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
3.実績のある方法や考え方などを「学ぶ」
「成功者のノウハウ」、「今盛り上がっている市場は?」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください!

▲ページトップへ戻る