今回はCSSを使ってiPhoneアプリケーションらしい表示の実現。
- 特徴的なタイトルバー
- 角丸箇条書きリスト
上記2点を実装して行くみたい。
2.2 iPhone向けのCSS
body要素に対してのスタイル設定
body { background-color: #ddd; color: #222; font-family:"Hiragino Kaku Gothic Pro", Helvetica; font-size: 14px; margin: 0; padding: 0; }
iPhoneのデフォルトフォントがHelvetica、日本語フォントはHiragino Kaku Gothic Proを使っているため、よっぽどのことが無い限りこのフォントを利用するべきらしい。
#header h1 { margin: 0; padding: 0; } #header h1 a { background-color: #ccc; border-bottom: 1px solid #666; color: #222; display: block; font-size: 20px; font-weight: bold; padding: 10px 0; text-align: center; text-decoration: none; } #header ul { list-style: none; margin: 10px; padding: 0; } #header ul li a { background-color: #fff; border: 1px solid #999; color: #222; display: block; font-size: 17px; font-weight: bold; margin-bottom: -1px; padding: 12px 10px; text-decoration: none; } #content, #sidebar { padding: 10px; }
ここまでは特別なことはやってないのでさらっと流す。
注意:bodyでpadding設定するとh1のタイトルバーが画面いっぱい表示されないのでNG
2.3 iPhoneのアプリーションのルック&フィール
タイトルバーと角丸スタイルの設定
#header h1 a { text-shadow: 0 1px 0 #fff; background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999)); }
↑テキストにシャドーと背景にグラデーションが適応
#header ul li:first-child a { -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; } #header ul li:last-child a { -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; }
↑ナビゲーション部分の四隅が半径8pxの角丸が適応
今回はここまで。
次回は2.4jQueryによる簡単なふるまいの追加。
iPhoneアプリケーション開発ガイド —HTML+CSS+JavaScript による開発手法
を使って勉強会を行っています。