Tag Archives: css3

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

Posted by takehito on 2010/10/6 水曜日 None comments

今回はjQueryを使って簡単な動きを追加します。

第４回iAKG会　iPhone向けのCSS

2.4jQueryによる簡単なふるまいの追加

ヘッダー部分のナビゲーションメニューをユーザーが表示、非表示と切り替えられるようにする。

  • ヘッダー内のulをdisplay: none;に指定する
  • html内にボタンを設置する 
    <div class="leftButton" onClick="toggleMenu()">メニュー</div>

このclass=”leftButton” に対してスタイルをつけていきます。
そこで注目するのがrgba()という関数をつかってスタイルを指定することができます。

text-shadow: rgba(0,0,0,0.6) 0 -1px 0px;

最後の4つめの値にアルファ値(不透明度)を指定することができます。
値は0(完全な透明)から1(完全な不透明)。

最後にjavascriptを読み込んで完成

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="iphone.js"></script>

続けて書こうと思ったけど、ブログ書くのを挫折します。
説明が難しい。。。本の丸写しになっちゃうし。
ってことで勉強会は続けますが、ブログへの記録はここで終わり。
すべて読み終わったらあらためてまとめのブログを書きます。

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

第３回iAKG会　iPhone向けのCSS

Posted by takehito on 2010/9/28 火曜日 None comments

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

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

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

第３回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会　iPhone上での表示に適した体制に変換するための基本的なテクニック

Posted by takehito on 2010/9/27 月曜日 None comments

２章

2.1はじめの一歩

PCサイトをiPhoneで表示させて「改善の余地が多いね」って実感するための項。
このページは流し読みでオッケー！

2.1.1iPhone用のスタイルシート

共通HTMLを使ってCSSでiPhone用とPC用を切り替えよう。

  1. media属性のonlyキーワードでスタイルシートを切り替え
  2. IE専用の条件分岐を追加
スタイルシートの切り分け
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" />

メディア機能「max-width」「min-width」とピクセル値の組み合わせでスタイルシートを切り替えるみたい。
でもここで疑問が１つ。iPhone 4の解像度は960×640ピクセルなのでこのやりかたじゃダメなんじゃない！？
と思ったけど、iPhone4もmax-width: 480px)でいけるみたい。

さてこのままだとIEは上記の振り分けを理解しないの、IE専用のスタイルシートも参照するようにする。

IE専用の条件分岐
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="explorer.css" media="all" />
<![endif]-->

2.1.2ページの幅の調整

iPhone用に表示領域を指定してあげます。これをしないと、iPhone版Safariがページの横幅を980pxとみなしてしまいます。

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


viewpoint指定前


viewpoint指定後

まとめ

今回の勉強会で覚えたのは以下の通りです。

    <head>
        <title>Jonathan Stark</title>
        <meta name="viewport" content="user-scalable=no, width=device-width" />
        <link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" />
        <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" />
		<!--[if IE]>
		<link rel="stylesheet" type="text/css" href="explorer.css" media="all" />
		<![endif]-->
    </head>

今日はここまで。
次回は2.2iPhone向けのCSS

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

Posted by takehito on 2010/9/27 月曜日 None comments

iPhoneが日本で発売されて２年以上が経ちました。
そこでそろそろ本格的にiPhone用のサイトを作ってみようと手に取ったのがこの１冊！

とにかく
“Making App Store Apps Without Object-C or Cocoa”
の１文に惹かれて始めることにしました。

この本ではhtml、css、javascriptを使って開発を進めていきます。

1章

まえがき、１章はhtml,css,javascriptの概要が書かれているだけなので軽く読み飛ばして終わり。

さあ次回はいよいよ実践にはいります。