niwadesign

ホームページ制作のネタ発信

iAKG会

第3回iAKG会 iPhone向けのCSS

投稿日:

今回はCSSを使ってiPhoneアプリケーションらしい表示の実現。

  • 特徴的なタイトルバー
  • 角丸箇条書きリスト

上記2点を実装して行くみたい。

第3回iAKG会 iPhone向けのCSS

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による簡単なふるまいの追加。

iAKG会(iPhoneアプリケーション開発ガイドを読みながらの勉強会)では
iPhoneアプリケーション開発ガイド —HTML+CSS+JavaScript による開発手法
を使って勉強会を行っています。

-iAKG会
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

第2回iAKG会 iPhone上での表示に適した体制に変換するための基本的なテクニック

2章 2.1はじめの一歩 PCサイトをiPhoneで表示させて「改善の余地が多いね」って実感するための項。 このページは流し読みでオッケー! 2.1.1iPhone用のスタイルシート 共通HTMLを使 …

no image

第1回iAKG会(iPhoneアプリケーション開発ガイドを読みながらの勉強会)

iPhoneが日本で発売されて2年以上が経ちました。 そこでそろそろ本格的にiPhone用のサイトを作ってみようと手に取ったのがこの1冊! とにかく “Making App Store A …

第4回iAKG会 jQueryによる簡単なふるまいの追加

今回はjQueryを使って簡単な動きを追加します。 2.4jQueryによる簡単なふるまいの追加 ヘッダー部分のナビゲーションメニューをユーザーが表示、非表示と切り替えられるようにする。 ヘッダー内の …