HTML5 head要素の定義 iPhone対応版

<!DOCTYPE html>
<html lang=”ja”>
<meta charset=”utf-8″ />
<title></title> ←文字コードより後に配置すること。
<meta name=”format-detection” content=”telephone=no” /> ←電話番号認識の無効化
<link rel=”apple-touch-icon” href=”img/home.png” /> ←ホーム画面用アイコンの指定
<link rel=”stylesheet” href=”css/iphone.css” media=”screen” /> ←スマートフォン向けのmedia属性

※ホーム画面用のアイコンは、114×114以上のPNG画像。ホーム画面の角丸と光沢はiPhoneが自動でつけるので、アイコンに大して角丸・光沢をつける必要はない。
(自動での装飾をさせたくない場合、<link rel=”apple-touch-icoun-precomposed” href=”img/home.pmg” />と書く。ただし、角丸は必ず適用される)

参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

iPhoneからのアクセスをJavaScriptで振り分ける

<head>
<script>
if(navigator.userAgent.indexOf(‘iPhone’) != -1) {
    location.href=”http://www.hogehoge.com/iphone/”;
}
</script>
</head>

↑のコードをデスクトップ向けトップページ(index.html)のhead要素内に記述しておくと、iPhoneから「http://www.hogehoge.com/」にアクセスした時に、「http://www.hogehoge.com/iphone/」に自動転送される。

参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

Viewportで画面に合わせたサイズを指定する

Viewportとは、表示領域のサイズを指定するプロパティのこと。

Viewportはmeta要素を使って下記のように定義する。

<meta name=”viewport” content=”値” />

content属性には、width, height, initial scale, user-scalable, minimum-scale, maximau-scaleを指定できる。(横幅、縦幅、ページ読み込み時の拡大率、ユーザーに寄る拡大操作の許可、拡大率の最小、拡大率の最大)

Mobile Safariのデフォルトは↓と同じ状態。

<meta name=”viewport” content=”width=980px, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=1.6″ />

横幅をdevice-widthと指定すると、表示領域の横幅はデバイスのサイズに応じて自動的に調整される。

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

参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

CSS3 擬似クラスセレクタ

擬似クラスセレクタでは、「最初の要素」「最後の要素」といった条件によって、自動的に対象の要素を選ぶことができる。

・主な擬似クラスセレクタ(要素名 スタイルが適用される要素)

:first-child 親要素の最初の子要素となる要素
:last-child 親要素の最後の子要素となる要素
:nth-child(n) 親要素のn番目の子要素となる要素
:nth-child(odd) 親要素の奇数番目の要素となる要素
:nth-child(even) 親要素の偶数番目の要素となる要素
:first-of-type 親要素の子要素として最初に出現する要素
:last-of-type 親要素の子要素として最後に出現する要素
:nth-of-type 親要素の子要素としてn番目に出現する要素

例 最後のli要素のmargin-bottomを0にしたい場合

・クラスセレクタを使用

.parent li {
    margin-bottom:16px;
}

.parent li.last {
    margin-bottom:0;
}

・擬似クラスセレクタを使用

.parent li {
    margin-bottom:16px;
}

.parent li:last-child{
    margin-bottom:0;
}

参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト