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

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

CSS: Cascading Style
Sheets（p.6）
CSSはHTML文書の表示形式を決めるスタイルシートを定
義する言語。

Sheets（p.6）
body{
color:red;
}
セレクタ: HTML上のスタイル
の適用対象。（何処の）
プロパティ: 色やフォントサイズ
などのスタイル要素。（何を）
値: 色やフォントサイズなどの値。
（どうする）

CSS（p.6）
CSSの編集作業
テキストエディタで要素を記述。
拡張子 “.css”で保存。
ファイル名は半角英数で。
今回のサンプルでは適用するHTMLと同一階層に配置。
Webブラウザで表示を確認。
修正はテキストエディタで開き、修正後は上書き保存。
ブラウザで再読込みして修正を確認。

Sheets（p.7）
セレクタ：
要素名：（body，h1，ｐなど）
クラス名：自分で作ることが出来る
（.loud, .subtitle, .errorなど）。クラス名は “.”が付く。
ID：自分で作ることが出来る（#highlight, #login, #promo
など）。ID名は “#”が付く。ページ内で重複できない。

Sheets（p.7）
セレクタ： HTML側の適用部の表記
クラス名：class= “クラス名”
例：<h1 class= “loud”>こんにちは！</h1>
ID： id= “ID名”（HTML側には “.”を付けない）
例：<p id= “highlight”>私のページを見に来てくれてあ
りがとう。</p>

CSS（p.8）
練習：p.8
例1−6を作り表示を確認せよ（例1-3との違い）。
CSSにおける “:”と “;”などを間違えないように。

CSS（p.8）

課題001
例1−3、例1-6を改造して、札幌学院大学の学部・学科構
成を紹介するWebを作成せよ。
注：HTML, CSSを使うこと。ファイル名はそれぞれ
以下の通り。提出はポータルサイトを使用する予定．
“自分の学籍番号”.html
“自分の学籍番号”.css

JavaScript
アプリケーションのふるまいを定義：プログラミング
変数や配列
オブジェクト
制御構造（If, While, forなど）

JavaScriptの特徴（ルール）
（p.9）
文の末尾にはセミコロンが記述。
var foods=[‘りんご’, ‘バナナ’, ‘みかん’];
コードブロックは中カッコで囲まれる。
for (var i in foods){…}
変数はvarというキーワードによって宣言する。

（p.9）
配列要素にアクセスするには角カッコ間にインデックス
を指定。
インデックスの値はゼロから始まる。

（p.9）
を指定。
「iが1つ目、2つ目、…」×

（p.9）
を指定。
「iが1つ目、2つ目、…」×「iが0つ目、1つ目、…」○

（p.9）
変数への値の代入は=を使用。
2つの値が等しいかどうかを調べるには==を使用。
if (foods[i] == ‘りんご’){…}
+は文字列の連結にも使われる。
alert(foods[i] + ‘は大好きです！’);

JavaScriptを用いたページ内の
構成要素変更の例（p.10）第2章例1−9：
<html>
<head>
<meta charset="UTF-8">

<title>私の素敵なページ</title>
<script type = "text/javascript">
function sayHello() {

document.getElementById('foo').innerHTML='こんにちは！';
}
</script>
</head>
<body>

<h1 id="foo" onclick="sayHello()">クリックしてみて！</h1>
</body>
</html>

JavaScriptを用いたページ内の
構成要素変更の例（p.10）第2章例1−9：
<html>
<head>
<meta charset="UTF-8">

<title>私の素敵なページ</title>
<script type = "text/javascript">
function sayHello() {

document.getElementById('foo').innerHTML='こんにちは！';
}
</script>
</head>
<body>

<h1 id="foo" onclick="sayHello()">クリックしてみて！</h1>
</body>
</html>
ドキュメント内のfooというIDの要素を探し、
そのコンテンツ(innerHTML)を ‘こんにちは！’に
書き換える。
fooというIDを与える。
クリック（onclick）されたら “sayHello”関数を実行する。
他のイベントハンドラを試してみては？
http://w3g.jp/xhtml/dic/event

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

Recommended

Recommended

More Related Content

More from Chitose Institute of Science and Technology.

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

Recently uploaded

Recently uploaded (10)

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