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

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

Safari
- HTML5とCSS3の解釈 -
W3C：World Wide Web Consortium
WWWで使われる技術を標準化する機関。
マサチューセッツ工科大学計算機科学研究所(MIT/
LCS)、フランス国立情報処理自動化研究所(INRIA)、日
本の慶應義塾大学SFC研究所(Keio-SFC)などのホスト機
関による共同運営。

Safari
HTML: HyperText Markup Language
web上のドキュメントを定義するマークアップ言語。
現在はW3Cで協議、勧告される。
HTML 1.0（1993.6）∼HTML 4.01（1999.12∼現在）
HTML 5（2012.5予定）

Safari
CSS: Cascading Style Sheets
HTML要素の修飾に関する定義。
W3Cにより勧告。
CSS 1.0（CSS, level1, 1996.12）∼

Safari
HTML5+CSS3 ▶ 強力な表現力。
FLASHに匹敵？
AppleはHTML5+CSS3を強力に支持。
過去の「ブラウザ戦争」との違いはメーカー各社に
よらず、W3Cの勧告によるところ。
FLASHレスで省エネやセキュリティ対応を図る。

Safari
各WebブラウザのHTML5対応状況：
http://fmbip.com/
使用ブラウザのHTML5, CSS3対応状況を提示。
各ブラウザの対応状況：
上記ページ右上の「Web Design」をクリック。
現状はブラウザ毎に各様。

Safari
SafariによるHTML5+CSS3+JavaScriptによる表現力。
Safariで以下のサイトにアクセス。
HTML5 Showcase:
http://www.apple.com/html5/

Webプログラミングの概要（p.
3~）
Web:
HTML（コンテンツ）
CSS（デザイン）
JavaScript（プログラミング）
内容はテキストファイルなので特別なプログラムが不要
（テキストエディタ（“メモ帳”など））。

HTML（p.3）
HTMLの編集作業
テキストエディタで要素を記述。
拡張子 “.html”で保存。
ファイル名は半角英数で。
Webブラウザで表示を確認。
修正はテキストエディタで開き、修正後は上書き保存。
ブラウザで再読込みして修正を確認。

HTML（p.3）
HTMLの編集作業
拡張子 “.html”で保存。

HTML（p.3）
要素（タグ）内に要素を記述することもある。
<ul>と<li>

HTML（p.3）
<ul>
<li>ピザ</li>
<li>ビール</li>
<li>ホットドッグ</li>
</ul>

HTML（p.4）
インラインタグ：
インラインタグで囲まれた文字は同一行内に表示。

HTML（p.4）
楽しんでもらえたらと心から思いま
す。

HTML（p.4）
インラインタグ：
インラインタグで囲まれた文字は同一行内に表示。
a（anchor）要素：

HTML（p.4）
これは、<a href="http://www.apple.com/
jp">Apple</a>へのリンクです。

HTML（p.4）

HTML（p.3）
HTMLの各要素：p.3-4
HTML, CSSの各要素についてはWebや参考書などで確
認すること。
“HTMLクイックリファレンス”:HTMLとCSS
http://www.htmq.com/

HTML（p.4~5）
完全なHTML：
HTML要素
HEAD要素
BODY要素

HTML（p.4~5）
<html>
<head>
…
</head>
<body>
…
</body>
</html>
◀head要素
◀body要素
◀HTML要素

HTML（p.5）
練習：p.5
例1−3を作り、ブラウザで表示を確認せよ。
例では「完全なHTML」と記述されているが、実際にはルール
上かなり抜けている要素がある（言語、文字コードなど）。
Safariで日本語が文字化けする場合には「表示 > テキストエ
ンコーディング > 」から適当なエンコードを指定する。

HTML（p.5）
練習：p.5
例1−3を作り、ブラウザで表示を確認せよ。
例では「完全なHTML」と記述されているが、実際にはルール
上かなり抜けている要素がある（言語、文字コードなど）。
Safariで日本語が文字化けする場合には「表示 > テキストエ
ンコーディング > 」から適当なエンコードを指定する。
Unicode(UTF-8)
日本語（Shift JIS）
など

HTML（p.6）
CSSの編集作業
拡張子 “.css”で保存。
ファイル名は半角英数で。
今回のサンプルでは適用するHTMLと同一階層に配置。

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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (6)

Similar to 2013sguヒューマンインターフェース論004

Similar to 2013sguヒューマンインターフェース論004 (6)

More from Chitose Institute of Science and Technology.

More from Chitose Institute of Science and Technology. (12)

Recently uploaded

Recently uploaded (6)

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