ホームページ制作講座

ホームページ制作のHTMLやCSS、JavascriptやDTDとかDreamweaverなどWEB制作について

スマホサイト制作と基礎知識

Webブラウザで閲覧可能でありながら、端末の液晶画面サイズが小さいことから、スマートフォン用のサイトの制作もアクセス数が多いサイトではほとんど採用されるようになりました。

一日に数十前後の非商用のサイトであればそれほど必要度は高くないかもしれませんが、日に何万、何十万というアクセスがある商用のサイトとなると、そうもいきません。

さてスマートフォンのサイト制作を初めて行う場合に抑えておきたいポイント、基本的に必要な知識についてまとめてみました。

まずはiPhonesafariの仮想的なウィンドウサイズを指定するmeta要素でズームや可視領域を設定をするためのmeta要素のviewport属性があります。

viewportはサイズ指定をデフォルト値で980×1470ピクセルしており、メタタグ属性での指定をすることで、Webページを最初に開いた時の画面サイズ、拡大率などあらかじめ指定することが可能。iPhone端末を縦向き(portlateモード)にしても、横向き(landscapeモード)にしてもデフォルトの値は変わらないので、meta要素のviewportで各属性を指定して表示させます。

またAndroidのブラウザはオープンソースのSafarと同じレンダリングエンジン「WebKit」を採用しているので、スマホサイトではほぼ同様のブラウザレビューが可能であることも知っておこう。

具体的な記述は、
<meta name=”viewport” content=”width=[横幅], initial-scale=[初期の倍率], maximum-scale=[拡大可能な最大の倍率]“>

上記のようになる。

そしてスマホサイト全体はHTML5でのマークアップにも...


続きはこちら ⇒ WEB制作システムズ-WEB制作