Your SlideShare is downloading. ×
0
ヒューマンインターフェース論Vol.7そが としおき曽我 聡起北海道文教大学 外国語学部・国際言語学科13年5月27日月曜日
iPhone向けのCSS(p.17)Interface1:デバイスに適した文字サイズmeta要素, viewport13年5月27日月曜日
iPhone向けのCSS(p.17)13年5月27日月曜日
課題002(講義連絡・レポート提出利用)例1−9を元に例1−10を作成せよ。jQueryを使う事で記述がシンプルになる。上記を以下のように改造しファイル名を “学籍番号.html”として提出せよ。(ただしjquery.jsの提出は不要)<h1 ...
iPhone向けのCSS(p.19)「iPhoneアプリケーションらしい表示を実現するためには、ユーザーインタフェース(UI)に関するいくつかのルールに従う必要が」ある。タイトルバー、角が丸い箇条書きリスト、光沢があるリンクのボタンなどこれらを...
iPhone向けのCSS(p.19)13年5月27日月曜日
h1要素のmarginh1要素のmarginh1要素のpaddingh1要素のpaddingCSS:MarginとPaddingとBorder(p.19)<h1>見出し</h1>border(色、種類、太さ)13年5月27日月曜日
CSS:MarginとPaddingとBorderの例(p.19) border: 4px solid orange;border-left: 1em double blue;padding-left: 1em;padding-top: 10p...
iPhone向けのCSS (1)(p.19)“iphone.css”を”index.html”ファイルと”images”フォルダを同一階層に配置し、例2−2を確認せよ。index.htmlと同一階層に配置すること。ウィンドウサイズを小さくすると...
iPhone向けのCSS (1)(p.19)フォント変更背景色変更マージン、パディングを0に設定13年5月27日月曜日
iPhone向けのCSS (2)(p.19)iphone.cssに追記して保存,Webを再表示して効果を確認する。ID: header:(各IDはhtmlに定義済み)h1をクリックできるタイトルバーにする。#header h1:margin, ...
iPhone向けのCSS (2)(p.19)背景色(background-color)をグレー(#ccc)とし、枠線の下線に1pxの線を付けることでボタンのように見える。13年5月27日月曜日
iPhone向けのCSS (3)(p.20)リスト部の定義:#header ul: 二つの箇条書き部を10px空ける。#header ul li a: 箇条書き要素のリンク部は、背景色(#FFFFFF◀白色)や実線の枠線(solid)を付けるな...
iPhone向けのCSS (3)(p.20)箇条書き部分を10px空けている。箇条書き要素のリンク部分は、背景色を白としたり、枠線を付けることでボタンのように見せている。13年5月27日月曜日
iPhone向けのCSS (4)(p.20-21)テキストを参考にして以下をCSSに追記せよ。#sidebar, #content:文章を右に寄せる。#footer:サービス、自己紹介などを隠す(display:none;)。13年5月27日月曜日
iPhone向けのCSS (4)(p.20-21)文章を右に10px寄せる。重複部分を隠す。(削除しないのは、別のcssでは表示するため。)13年5月27日月曜日
Upcoming SlideShare
Loading in...5
×

2013sguヒューマンインターフェース論007

161

Published on

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
161
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "2013sguヒューマンインターフェース論007"

  1. 1. ヒューマンインターフェース論Vol.7そが としおき曽我 聡起北海道文教大学 外国語学部・国際言語学科13年5月27日月曜日
  2. 2. iPhone向けのCSS(p.17)Interface1:デバイスに適した文字サイズmeta要素, viewport13年5月27日月曜日
  3. 3. iPhone向けのCSS(p.17)13年5月27日月曜日
  4. 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. 5. iPhone向けのCSS(p.19)「iPhoneアプリケーションらしい表示を実現するためには、ユーザーインタフェース(UI)に関するいくつかのルールに従う必要が」ある。タイトルバー、角が丸い箇条書きリスト、光沢があるリンクのボタンなどこれらをCSSなどで表現する。13年5月27日月曜日
  6. 6. iPhone向けのCSS(p.19)13年5月27日月曜日
  7. 7. h1要素のmarginh1要素のmarginh1要素のpaddingh1要素のpaddingCSS:MarginとPaddingとBorder(p.19)<h1>見出し</h1>border(色、種類、太さ)13年5月27日月曜日
  8. 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. 9. iPhone向けのCSS (1)(p.19)“iphone.css”を”index.html”ファイルと”images”フォルダを同一階層に配置し、例2−2を確認せよ。index.htmlと同一階層に配置すること。ウィンドウサイズを小さくすると、iphone.cssが適用されることを確認せよ。※p.17: 3∼4行目のlink要素を”index.html”のhead要素に追記する13年5月27日月曜日
  10. 10. iPhone向けのCSS (1)(p.19)フォント変更背景色変更マージン、パディングを0に設定13年5月27日月曜日
  11. 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. 12. iPhone向けのCSS (2)(p.19)背景色(background-color)をグレー(#ccc)とし、枠線の下線に1pxの線を付けることでボタンのように見える。13年5月27日月曜日
  13. 13. iPhone向けのCSS (3)(p.20)リスト部の定義:#header ul: 二つの箇条書き部を10px空ける。#header ul li a: 箇条書き要素のリンク部は、背景色(#FFFFFF◀白色)や実線の枠線(solid)を付けるなどして、ボタンのように見せる。13年5月27日月曜日
  14. 14. iPhone向けのCSS (3)(p.20)箇条書き部分を10px空けている。箇条書き要素のリンク部分は、背景色を白としたり、枠線を付けることでボタンのように見せている。13年5月27日月曜日
  15. 15. iPhone向けのCSS (4)(p.20-21)テキストを参考にして以下をCSSに追記せよ。#sidebar, #content:文章を右に寄せる。#footer:サービス、自己紹介などを隠す(display:none;)。13年5月27日月曜日
  16. 16. iPhone向けのCSS (4)(p.20-21)文章を右に10px寄せる。重複部分を隠す。(削除しないのは、別のcssでは表示するため。)13年5月27日月曜日
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×