第七回講義時使用スライドです。

1. ヒューマンインターフェース論
Vol.7
そが としおき
曽我 聡起
北海道文教大学 外国語学部・国際言語学科
13年5月27日月曜日

2. iPhone向けのCSS（p.17）
Interface1:
デバイスに適した文字サイズ
meta要素, viewport
13年5月27日月曜日

3. iPhone向けのCSS（p.17）
13年5月27日月曜日

4. 課題002
（講義連絡・レポート提出利用）
例1−9を元に例1−10を作成せよ。
jQueryを使う事で記述がシンプルになる。
上記を以下のように改造しファイル名を “学籍番号.html”として提出せ
よ。（ただしjquery.jsの提出は不要）
<h1 id="number" onclick="sayNumber()">番号</h1>
<h1 id="name" onclick="sayName()">氏名</h1>
上記「番号」「氏名」をクリック時に「自分の学籍番号」と「自分の氏
名」に置換えるスクリプトを作れ。
13年5月27日月曜日

5. iPhone向けのCSS（p.19）
「iPhoneアプリケーションらしい表示を実現するために
は、ユーザーインタフェース（UI）に関するいくつかのル
ールに従う必要が」ある。
タイトルバー、角が丸い箇条書きリスト、光沢があるリ
ンクのボタンなど
これらをCSSなどで表現する。
13年5月27日月曜日

6. iPhone向けのCSS（p.19）
13年5月27日月曜日

7. h1要素のmargin
h1要素のmargin
h1要素のpadding
h1要素のpadding
CSS:MarginとPaddingと
Border（p.19）
<h1>見出し</h1>
border（色、種類、太さ）
13年5月27日月曜日

8. CSS:MarginとPaddingとBorder
の例（p.19） border: 4px solid orange;
border-left: 1em double blue;
padding-left: 1em;
padding-top: 10px;
margin-top: 100px;
padding-bottom: 10px;
margin-left: 50px;
13年5月27日月曜日

9. iPhone向けのCSS (1)（p.19）
“iphone.css”を”index.html”ファイルと”images”フォルダを同
一階層に配置し、例2−2を確認せよ。
index.htmlと同一階層に配置すること。
ウィンドウサイズを小さくすると、iphone.cssが適用され
ることを確認せよ。
※p.17: ３∼４行目のlink要素を”index.html”のhead要素
に追記する
13年5月27日月曜日

10. iPhone向けのCSS (1)（p.19）
フォント変更
背景色変更
マージン、パディング
を0に設定
13年5月27日月曜日

11. iPhone向けのCSS (2)（p.19）
iphone.cssに追記して保存，Webを再表示して効果を確認する。
ID: header：（各IDはhtmlに定義済み）
h1をクリックできるタイトルバーにする。
#header h1:
margin, paddingを0に初期化。
#header h1 a:リンク要素に定義。
背景色をグレー（#ccc）、枠線の下線を付けてボタンのよう
に見せる。
13年5月27日月曜日

12. iPhone向けのCSS (2)（p.19）
背景色（background-color）をグレー
（#ccc）とし、枠線の下線に1pxの線を付け
ることでボタンのように見える。
13年5月27日月曜日

13. iPhone向けのCSS (3)（p.20）
リスト部の定義：
#header ul: 二つの箇条書き部を10px空ける。
#header ul li a: 箇条書き要素のリンク部は、背景色
（#FFFFFF◀白色）や実線の枠線（solid）を付けるなどし
て、ボタンのように見せる。
13年5月27日月曜日

14. iPhone向けのCSS (3)（p.20）
箇条書き部分を10px空け
ている。
箇条書き要素のリンク部分
は、背景色を白としたり、枠
線を付けることでボタンのよ
うに見せている。
13年5月27日月曜日

15. iPhone向けのCSS (4)（p.
20-21）
テキストを参考にして以下をCSSに追記せよ。
#sidebar, #content:
文章を右に寄せる。
#footer:
サービス、自己紹介などを隠す（display:none;）。
13年5月27日月曜日

16. iPhone向けのCSS (4)（p.
20-21）
文章を右に10px寄せる。
重複部分を隠す。
（削除しないのは、別のcss
では表示するため。）
13年5月27日月曜日