低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

今から始めるiPhoneコーディング

何だか周りにiPhoneを持ってる人が増えてきたなぁと思う今日この頃です。
それにつれてiPhone用のサイトをコーディングする案件も増えて来ましたので、コーディングするときのポイントをまとめました。

iPhoneの特徴

まずは、iPhoneの特徴を見てみましょう。

  1. 一つの端末で複数の解像度を持つ
    iPhoneの特徴の一つとして、縦持ち・横持ちのときで横幅の解像度が変わります。
    例えば、縦持ちのときは320pxで、横持ちのときは480pxとなります。

    photo01

    ※縦持ちのとき

    photo02

    ※横持ちのとき

    そのため、320pxに最適化したコーディングをすると、横持ちのときに160px分の余白が空いてしまうため、320pxにも480pxにも対応出来るコーディングをする必要があります。
    ※そのためには、デザインをしっかりと考えたものにしなければいけませんが…。

  2. HTMLやCSSの実装状況はパソコンと同様
    iPhoneに搭載されているブラウザ(Safari)では、パソコン版のSafariと同程度のHTML/CSSが実装されているため、パソコンサイトと同じ感覚でコーディングが出来ます。

大きく二つの特徴を挙げましたが、iPhoneサイト構築の際には1番目の特徴を考えて、デザイナーはリキッドなデザインをする必要があります。

コーディング時の注意点

それでは実際どうやってコーディングするのかというと、基本的にパソコンサイトのコーディングと変わりませんが、viewportという概念を新しく覚える必要があります。

  1. viewportとはなにか
    まず、iPhoneサイトのコーディングではviewportを指定します。
    viewportとは、パソコンでいうところのウィンドウと同じ意味と思ってください。
    iPhone用Safariではこのviewportのサイズが980pxに設定されているため、ただコーディングしただけでは、コンテンツサイズは横幅980pxとなりiPhoneの解像度(320px)を越えます。
    photo03
    ※赤い枠線がデフォルトのviewportサイズです。

    そしてそのサイトをiPhoneで表示すると、980pxを320pxに収めた形で表示、つまり約1/3の大きさで表示されてしまいます。
    photo04
    ※160pxのマスが横に6個と少しあるのが分かるかと思います。

    そのため、次のようにviewportの設定をheadの中に指定することで320pxに収まったコンテンツサイズになります。

    1<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

    設定している項目は次の通りです。
    width=device-width…ウィンドウの横幅をデバイスの横幅(iPhoneの場合は320px)と指定
    initial-scale=1 … 表示倍率の初期値
    maximum-scale=1 … 表示倍率の最大値
    user-scalable=no … ユーザー側の操作で、拡大/縮小を出来るようにするかの可否
    photo05
    ※160pxのマスが2つぴったり並び、iPhoneでの表示に最適化されています。

  2. リキッドに対応したコーディング
    デザインがリキッドに対応できるものであることが大前提ですが、ユーザーの持ち方によって、横幅が320pxや460pxになることがあります。
    そのため、コンテンツサイズが可変可能なコーディングをしましょう。

iPhone用サイトコーディング時のテンプレート

最後に私が使っているテンプレートをご紹介。
smartphone.jsというjsファイルを用意し、iPhoneでアクセスされた場合は body に iphone というクラスを追加し、Androidの場合は android というクラスを追加します。
これにより、iPhoneとAndroid間で発生する微妙なレンダリングの差を調整します。
また、同様に縦の場合は portrait、横の場合は landscape というクラスを body に追加し、縦・横での調整に使っています。

index.html(HTML5対応)

01<!DOCTYPE html>
02<html lang="ja">
03<head>
04<meta charset="UTF-8">
05<meta http-equiv="content-script-type" content="text/javascript">
06<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
07<title></title>
08<link rel="stylesheet" href="css/common/layout.css" type="text/css">
09<link rel="stylesheet" href="css/common/general.css" type="text/css">
10<script type="text/javascript" src="js/jquery.js"></script>
11<script type="text/javascript" src="js/smartphone.js"></script>
12</head>
13<body>
14<a name="top" id="top"></a>
15<article id="container">
16    <header id="gHeader">
17 
18    </header>
19 
20    <section id="conts">
21 
22    </section>
23 
24    <footer id="gFooter">
25 
26    </footer>
27</article>
28</body>
29</html>

layout.css

01@charset "utf-8";
02/*------------------------------------------------------------
03    デフォルトスタイル
04------------------------------------------------------------*/
05html, body, div, span, applet, object, iframe,
06h1, h2, h3, h4, h5, h6, p, blockquote, pre,
07a, abbr, acronym, address, big, cite, code,
08del, dfn, em, font, img, ins, kbd, q, s, samp,
09small, strike, strong, sub, sup, tt, var,
10b, u, i, center,
11dl, dt, dd, ol, ul, li,
12fieldset, form, label, legend,
13table, caption, tbody, tfoot, thead, tr, th, td {
14    margin: 0;
15    padding: 0;
16    background: transparent;
17    border: 0;
18    outline: 0;
19 
20    font-size: 1em;
21}
22 
23body,
24table,
25input, textarea, select, option {
26    font-family: HiraKakuProN-W3;
27    font-size: 1em;
28}
29 
30article, aside, canvas, details, figcaption, figure,
31footer, header, hgroup, menu, nav, section, summary {
32    display: block;
33}
34 
35ol, ul {
36    list-style: none;
37}
38 
39blockquote, q {
40    quotes: none;
41}
42 
43:focus {
44    outline: 0;
45}
46 
47ins {
48    text-decoration: none;
49}
50 
51del {
52    text-decoration: line-through;
53}
54 
55a:link {
56 
57}
58 
59a:visited {
60 
61}
62 
63a:hover {
64 
65}
66 
67a:active {
68 
69}
70 
71/*------------------------------------------------------------
72    レイアウト
73------------------------------------------------------------*/
74body {
75    text-align: center;
76    line-height: 1.5;
77}
78 
79/*------------------------------------------------------------
80    ヘッダー
81------------------------------------------------------------*/
82#gHeader {
83 
84}
85 
86/*------------------------------------------------------------
87    コンテンツ
88------------------------------------------------------------*/
89#conts {
90 
91}
92 
93/*------------------------------------------------------------
94    フッター
95------------------------------------------------------------*/
96#gFooter {
97 
98}

general.css

01@charset "utf-8";
02/*------------------------------------------------------------
03    書式設定
04------------------------------------------------------------*/
05/* テキストの位置 */
06.taLeft { text-align: left !important; }
07.taCenter { text-align: center !important; }
08.taRight { text-align: right !important; }
09 
10/* フォントの大きさ(プラス) */
11.fsP1 { font-size: 1.08em !important; }
12.fsP2 { font-size: 1.16em !important; }
13.fsP3 { font-size: 1.24em !important; }
14.fsP4 { font-size: 1.32em !important; }
15.fsP5 { font-size: 1.4em !important; }
16 
17/* フォントの大きさ(マイナス) */
18.fsM1 { font-size: 0.92em !important; }
19.fsM2 { font-size: 0.84em !important; }
20.fsM3 { font-size: 0.76em !important; }
21.fsM4 { font-size: 0.68em !important; }
22.fsM5 { font-size: 0.6em !important; }
23 
24/* フォントの太さ */
25.fwNormal { font-weight: normal !important; }
26.fwBold { font-weight: bold !important; }
27 
28/*------------------------------------------------------------
29    微調整用クラス(※多用しないこと)
30------------------------------------------------------------*/
31.mt0 { margin-top: 0 !important; }
32.mb0 { margin-bottom: 0 !important; }
33 
34/*------------------------------------------------------------
35    汎用スタイル
36------------------------------------------------------------*/
37.clearfix:after {
38    height: 0;
39    visibility: hidden;
40    content: ".";
41    display: block;
42    clear: both;
43}

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ