Mobile Safari 向けクリアフィックス

・html

<nav class=”nav-topicpath”>
    <ul>
      <li>a</li>
      <li>b</li>
 (ここに擬似要素が入る)
    </ul>
  </nav>

・CSS

.nav-topicpath ul:after{ ←擬似要素セレクタ「:after」でul要素の終了タグの直前に擬似要素を挿入
  content: “”; ←contentプロパティで擬似要素として””(中身なし)を挿入
  display:block;
  clear:both;
}

なお、擬似要素としては他にも :before があり、要素の開始タグの直後に要素が挿入される。

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

HTML5 CSS3 クラスセレクタを使って「保険」をかける

nav, headerのようなHTML5の新要素をcssで装飾する際は、

header nav{ padding:10px; }

のように要素名をセレクタにするのが普通のやり方だが、これではマークアップするタグを変更する時(nav→div)や、新要素が廃止になってしまった時に、HTMLとCSSの双方を修正する必要がある。

そこで、nav要素にクラスをつけておいて(例:<nav class=”nav-topicpath”>)、

.nav-topicpath{ padding:10px; }

と指定してやると、nav→divと変更するような時にHTMLを変更するだけで済む。

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

Mobile Safari CSS HTML5の新要素をブロックレベルにする

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display:block;
}

HTML5で追加された新要素の場合、ブラウザーによってはdisplayのデフォルト値がセットされていないことがある(Firefox3.6ではheaderがインライン要素になってたような…)。ブロックレベルに該当する要素には、あらかじめ display;block をかけておくと安心。

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

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サイト