※現在辻はAmazonの「この本を買った人はこの本も買っています」

Presentation on theme: "※現在辻はAmazonの「この本を買った人はこの本も買っています」"— Presentation transcript:

1 ※現在辻はAmazonの「この本を買った人はこの本も買っています」
といった図書推薦」のシステム作りを行っています（図書館のOPAC につけるのが夢です） 。もし被験者になってもよいという方がいたら にメールを下さらないでしょうか。 辻が推薦する図書6～18冊に対して関心度を3段階でつける 簡単なお仕事です（お礼はジュース1本とか？）。 HTML版パスファインダーの作成 CSSの利用 をダウンロードして下さい。 辻慶太

2 1. 今回の予定 CSSを使って統一的にhtmlに色や枠線を付ける方法を 学ぶ。まずサンプルとして難民に関するごく簡単なパス
　　学ぶ。まずサンプルとして難民に関するごく簡単なパス ファインダーを作る。次にCSSを使って前回のフェアト レードのパスファインダーとスタイルを統一する。 (2) 現在作成している自分の好きなテーマに関するパスファインダーと以下のテーマのうちの１つに関するパスファインダーを作り，CSSで統合する： 　　　・地球温暖化 　　　・循環型社会 　　　・ジェンダーフリー論争 　　　・健康食品・サプリメント 　　　・インターネット広告

3 1. 今回の予定 CSSを使って統一的にhtmlに色や枠線を付ける方法を 学ぶ。まずサンプルとして難民に関するごく簡単なパス
　　学ぶ。まずサンプルとして難民に関するごく簡単なパス ファインダーを作る。次にCSSを使って前回のフェアト レードのパスファインダーとスタイルを統一する。 (2) 現在作成している自分の好きなテーマに関するパスファインダーと以下のテーマのうちの１つに関するパスファインダーを作り，CSSで統合する： 　　　・地球温暖化 　　　・循環型社会 　　　・ジェンダーフリー論争 　　　・健康食品・サプリメント 　　　・インターネット広告

4 1. 今回の予定 CSSを使って統一的にhtmlに色や枠線を付ける方法を 学ぶ。まずサンプルとして難民に関するごく簡単なパス
　　学ぶ。まずサンプルとして難民に関するごく簡単なパス ファインダーを作る。次にCSSを使って前回のフェアト レードのパスファインダーとスタイルを統一する。 (2) 現在作成している自分の好きなテーマに関するパスファインダーと以下のテーマのうちの１つに関するパスファインダーを作り，CSSで統合する： 　　　・地球温暖化 　　　・循環型社会 　　　・ジェンダーフリー論争 　　　・健康食品・サプリメント 　　　・インターネット広告

5 1. 今回の予定 CSSを使って統一的にhtmlに色や枠線を付ける方法を 学ぶ。まずサンプルとして難民に関するごく簡単なパス
　　学ぶ。まずサンプルとして難民に関するごく簡単なパス ファインダーを作る。次にCSSを使って前回のフェアト レードのパスファインダーとスタイルを統一する。 (2) 現在作成している自分の好きなテーマに関するパスファインダーと以下のテーマのうちの１つに関するパスファインダーを作り，CSSで統合する： 　　　・地球温暖化 　　　・循環型社会 　　　・ジェンダーフリー論争 　　　・健康食品・サプリメント 　　　・インターネット広告

6 1. 今回の予定 CSSを使って統一的にhtmlに色や枠線を付ける方法を 学ぶ。まずサンプルとして難民に関するごく簡単なパス
　　学ぶ。まずサンプルとして難民に関するごく簡単なパス ファインダーを作る。次にCSSを使って前回のフェアト レードのパスファインダーとスタイルを統一する。 (2) 現在作成している自分の好きなテーマに関するパスファインダーと以下のテーマのうちの１つに関するパスファインダーを作り，CSSで統合する： 　　　・地球温暖化 　　　・循環型社会 　　　・ジェンダーフリー論争 　　　・健康食品・サプリメント 　　　・インターネット広告

7 2. 今週のレポート課題と出席課題 詳細はレジュメ参照　　　

8 レポート提出に向けて確認 ブラウザ上で以下のURLのページが見られるか確認して下さい：
　　　　　　レポート提出に向けて確認 ブラウザ上で以下のURLのページが見られるか確認して下さい： 上記URLを入力して「Forbidden」などと表示された場合は 前回のレジュメを開き、puttyを使ってファイルの属性を変更 して下さい。 上記3ファイルがブラウザ上で見られなければ、採点する ことができません。最悪「評価対象外」となりますから注意

9 レポート提出に向けて確認 ブラウザ上で以下のURLのページが見られるか確認して下さい：
　　　　　　レポート提出に向けて確認 ブラウザ上で以下のURLのページが見られるか確認して下さい： 上記URLを入力して「Forbidden」などと表示された場合は 前回のレジュメを開き、puttyを使ってファイルの属性を変更 して下さい。 上記3ファイルがブラウザ上で見られなければ、採点する ことができません。最悪「評価対象外」となりますから注意

10 レポート提出に向けて確認 ブラウザ上で以下のURLのページが見られるか確認して下さい：
　　　　　　レポート提出に向けて確認 ブラウザ上で以下のURLのページが見られるか確認して下さい： 上記URLを入力して「Forbidden」などと表示された場合は 前回のレジュメを開き、puttyを使ってファイルの属性を変更 して下さい。 上記3ファイルがブラウザ上で見られなければ、採点する ことができません。最悪「評価対象外」となりますから注意

11 3. 出席課題 以下の画面を再現するような2つのhtmlファイルと1つのCSSファイルを作成し，www/local_only にアップする。完成したら画像を印刷して提出すること。 → 詳しくはレジュメ参照

12 ＜CSSで出来ること＞ 前回はhtmlの基本を学習した。今回はCSSを使ってWebページに色や枠線をつけ，文字の大きさを変える方法を学ぶ。
CSSを使わずhtmlだけで色をつけることも可能なのだが，htmlは本来文書の構造を記述するものなので，そうした使い方は本来のものではない。 CSSを使うことで複数のhtmlを同じスタイルに統一したり，htmlだけでは実現できない表現も可能になる。 　　　　（例えば段落や見出しに枠線を付けて，線と背景，文字 　　　　　にそれぞれ別の色を付けるといったことも可能になる）

13 ＜CSSで出来ること＞ 前回はhtmlの基本を学習した。今回はCSSを使ってWebページに色や枠線をつけ，文字の大きさを変える方法を学ぶ。
CSSを使わずhtmlだけで色をつけることも可能なのだが，htmlは本来文書の構造を記述するものなので，そうした使い方は本来のものではない。 CSSを使うことで複数のhtmlを同じスタイルに統一したり，htmlだけでは実現できない表現も可能になる。 　　　　（例えば段落や見出しに枠線を付けて，線と背景，文字 　　　　　にそれぞれ別の色を付けるといったことも可能になる）

14 ＜CSSで出来ること＞ 前回はhtmlの基本を学習した。今回はCSSを使ってWebページに色や枠線をつけ，文字の大きさを変える方法を学ぶ。
CSSを使わずhtmlだけで色をつけることも可能なのだが，htmlは本来文書の構造を記述するものなので，そうした使い方は本来のものではない。 CSSを使うことで複数のhtmlを同じスタイルに統一したり，htmlだけでは実現できない表現も可能になる。 　　　　（例えば段落や見出しに枠線を付けて，線と背景，文字 　　　　　にそれぞれ別の色を付けるといったことも可能になる）

15 ＜CSSの基本的な記述方法＞ CSSは「プロパティ」に「値」を設定することで使用する。
　・ 「プロパティ」とは「フォントのサイズ」「色」など，設定しよ 　　うとする項目のこと。 　・ 「値」とは「18ポイント」「黄色」など具体的な設定値のこと。 CSSではコロン「:」を使ってプロパティに値を設定する。例えば以下では「color」プロパティに「blue」という値を設定している。 　　　　　　　　　　color:blue

16 ＜CSSの基本的な記述方法＞ CSSは「プロパティ」に「値」を設定することで使用する。
　・ 「プロパティ」とは「フォントのサイズ」「色」など，設定しよ 　　うとする項目のこと。 　・ 「値」とは「18ポイント」「黄色」など具体的な設定値のこと。 CSSではコロン「:」を使ってプロパティに値を設定する。例えば以下では「color」プロパティに「blue」という値を設定している。 　　　　　　　　　　color:blue

17 ＜CSSの基本的な記述方法＞ CSSは「プロパティ」に「値」を設定することで使用する。
　・ 「プロパティ」とは「フォントのサイズ」「色」など，設定しよ 　　うとする項目のこと。 　・ 「値」とは「18ポイント」「黄色」など具体的な設定値のこと。 CSSではコロン「:」を使ってプロパティに値を設定する。例えば以下では「color」プロパティに「blue」という値を設定している。 　　　　　　　　　　color:blue

18 ＜CSSの基本的な記述方法＞ CSSは「プロパティ」に「値」を設定することで使用する。
　・ 「プロパティ」とは「フォントのサイズ」「色」など，設定しよ 　　うとする項目のこと。 　・ 「値」とは「18ポイント」「黄色」など具体的な設定値のこと。 CSSではコロン「:」を使ってプロパティに値を設定する。例えば以下では「color」プロパティに「blue」という値を設定している。 　　　　　　　　　　color:blue

19 ＜CSSの記述場所＞ CSSを記述する場所には以下の3つがある： (1) style属性の値として記述する (2) ヘッダ部分に記述する
(3) 別ファイルに記述する

20 ＜CSSの記述場所＞ CSSを記述する場所には以下の3つがある： (1) style属性の値として記述する (2) ヘッダ部分に記述する
(3) 別ファイルに記述する

21 <title>タイトル</title> </head> <body>
(1) style属性の値として記述する： スタイルを設定したい要素ごとに設定する方法で，「style=“プロパティ:値”」のように二重引用符を使って記述する。以下は「第1章」「第2章」「第3章」というh2要素を青色にする設定である： <html> <head> 　　　　　　<title>タイトル</title> </head> <body> 　　　　　　<h2 style="color:blue">第1章</h2> 　　　　　　<h2 style="color:blue">第2章</h2> 　　　　　　<h2 style="color:blue">第3章</h2> </body> </html> 21 21

22 ＜CSSの記述場所＞ CSSを記述する場所には以下の3つがある： (1) style属性の値として記述する (2) ヘッダ部分に記述する
(3) 別ファイルに記述する

23 ＜CSSの記述場所＞ CSSを記述する場所には以下の3つがある： (1) style属性の値として記述する (2) ヘッダ部分に記述する
(3) 別ファイルに記述する

24 <title>タイトル</title> <style type="text/css">
(2) ヘッダ部分に記述する： 文書内の同じタグすべてに同じスタイルを設定したい時は，htmlのヘッダ部分にstyle要素を用いて以下のように記述する。こうしておくと例えば「h2の色は青ではなく緑にしよう」と思った時，1箇所を変えるだけで済む： <html> <head> 　　　　　　<title>タイトル</title> 　　　　　　<style type="text/css"> 　　　　h2 { color:blue } 　 </style> </head> <body> 　　　　　　<h2>第1章</h2> 　　　　　　<h2>第2章</h2> 　　　　　　<h2>第3章</h2> </body> </html> 24 24

25 ＜CSSの記述場所＞ CSSを記述する場所には以下の3つがある： (1) style属性の値として記述する (2) ヘッダ部分に記述する
(3) 別ファイルに記述する

26 ＜CSSの記述場所＞ CSSを記述する場所には以下の3つがある： (1) style属性の値として記述する (2) ヘッダ部分に記述する
(3) 別ファイルに記述する → これが今回の課題

27 (3) 別ファイルに記述する： 複数のhtmlファイルに同じスタイルを適用したい時は，独立したCSSファイルを作成し，それをhtmlに読み込ませる形を取る。CSSファイルとは拡張子を「.css」とする以下のようなテキストファイルである： h2 { color:blue } このファイルの名前を aoiro.css とすると，htmlでの読み込みは以下のようにする： <html> <head> 　　　　　　<title>タイトル</title> 　　　　　　<link rel="stylesheet" 　　　　　　　　　　 type="text/css" 　　　　　　　　　　 href="aoiro.css" > </head> <body> 　　　　　　<h2>第1章</h2> 　　　　　　<h2>第2章</h2> 　　　　　　<h2>第3章</h2> </body> </html> 27 27

28 (3) 別ファイルに記述する： 複数のhtmlファイルに同じスタイルを適用したい時は，独立したCSSファイルを作成し，それをhtmlに読み込ませる形を取る。CSSファイルとは拡張子を「.css」とする以下のようなテキストファイルである： h2 { color:blue } このファイルの名前を aoiro.css とすると，htmlでの読み込みは以下のようにする： <html> <head> 　　　　　　<title>タイトル</title> 　　　　　　<link rel="stylesheet" 　　　　　　　　　　 type="text/css" 　　　　　　　　　　 href="aoiro.css" > </head> <body> 　　　　　　<h2>第1章</h2> 　　　　　　<h2>第2章</h2> 　　　　　　<h2>第3章</h2> </body> </html> 28 28

29 (3) 別ファイルに記述する： 複数のhtmlファイルに同じスタイルを適用したい時は，独立したCSSファイルを作成し，それをhtmlに読み込ませる形を取る。CSSファイルとは拡張子を「.css」とする以下のようなテキストファイルである： h2 { color:blue } このファイルの名前を aoiro.css とすると，htmlでの読み込みは以下のようにする： <html> <head> 　　　　　　<title>タイトル</title> 　　　　　　<link rel="stylesheet" 　　　　　　　　　　 type="text/css" 　　　　　　　　　　 href="aoiro.css" > </head> <body> 　　　　　　<h2>第1章</h2> 　　　　　　<h2>第2章</h2> 　　　　　　<h2>第3章</h2> </body> </html> 29 29

30 ＜色の名称＞ 色の指定では次に述べるRGBによる指定が推奨されているのだが，以下の16色については言葉（blue，grayなど）で指定することができる： black, silver, gray, white, maroon, red, purple, fuchsia，green, lime, olive, yellow, navy, blue, teal, aqua 30 30

31 ＜RGBとは＞ Webページに限らず，コンピュータ上で表現される色は，光の3原色と呼ばれる赤（red），緑（green），青（blue）の組合せで表現される。これを3色の英語名の頭文字をとって「RGBカラー」と呼ぶ。それぞれの色が0～255までの256段階の強さを持つため，理論上256×256×256=16,777,216色を表すことができる。 上記の0～255は一般には16進数を使って指定する。例えば「赤の強さが最大で，緑と青は最小」（＝赤）という色は「#FF0000」と表現される。「赤と青が最小で緑が最大」（＝緑）という色は「#00FF00」と表現される。 31 31

32 ＜RGBとは＞ Webページに限らず，コンピュータ上で表現される色は，光の3原色と呼ばれる赤（red），緑（green），青（blue）の組合せで表現される。これを3色の英語名の頭文字をとって「RGBカラー」と呼ぶ。それぞれの色が0～255までの256段階の強さを持つため，理論上256×256×256=16,777,216色を表すことができる。 上記の0～255は一般には16進数を使って指定する。例えば「赤の強さが最大で，緑と青は最小」（＝赤）という色は「#FF0000」と表現される。「赤と青が最小で緑が最大」（＝緑）という色は「#00FF00」と表現される。 32 32

33 ＜RGBとは＞ Webページに限らず，コンピュータ上で表現される色は，光の3原色と呼ばれる赤（red），緑（green），青（blue）の組合せで表現される。これを3色の英語名の頭文字をとって「RGBカラー」と呼ぶ。それぞれの色が0～255までの256段階の強さを持つため，理論上256×256×256=16,777,216色を表すことができる。 上記の0～255は一般には16進数を使って指定する。例えば「赤の強さが最大で，緑と青は最小」（＝赤）という色は「#FF0000」と表現される。「赤と青が最小で緑が最大」（＝緑）という色は「#00FF00」と表現される。 33 33

34 <html> <head> <title>タイトル</title> <style type="text/css"> 　　　h1 { color:#FF0000 } 　　　h2 { color:#0000FF } 　　　p { color:#00FFFF } </style> </head> <body> <h1>HTML入門</h1> <h2>第1章</h2> <p>まずはじめに...</p> <h2>第2章</h2> <p>次にここでは...</p> </body> </html> ＜文字色の指定＞ 先ほどの「color:blue」をRGBの16進数を使って表し，かつ他の要素には他の色を指定する場合，例えば左のようにする。 34 34

35 ＜背景色の指定＞ <html> <head> <title>タイトル</title>
<style type="text/css"> 　　　h1 { color:#FF0000 ; background-color:#aaccff} 　　　h2 { color:#0000FF ; background-color:#3300aa} 　　　p { color:#00FFFF ; background-color:#ffcc00} </style> </head> <body> <h1>HTML入門</h1> <h2>第1章</h2> <p>まずはじめに...</p> <h2>第2章</h2> <p>次にここでは...</p> </body> </html> ＜背景色の指定＞ 背景の色を指定する場合は background-color プロパティを使用する。h1，h2，pの文字色はそのままに，それぞれ違う背景色を指定する場合は例えば左のようにする。文字色，背景色のように，2つ以上のプロパティを設定する時は間に「;」を入れる。 35 35

36 ＜クラスを使った設定＞ 「クラス」にスタイルを設定し，クラスを各要素に適用するという書き方もある。先ほどの書き方だとh1とh2それぞれに文字色・背景色を設定しなければならなかったが，この書き方だとakairoというクラスに指定するだけで済む。気が変わって他の色にしたくなったときakairoの部分だけ変えれば良いので楽である。classはCSSで頻繁に用いられるのでよく覚えておくこと： <html> <head> <title>タイトル</title> <style type="text/css"> 　　　.akairo { color:#FF0000 ; background-color:3300aa } </style> </head> <body> <h1 class="akairo">HTML入門</h1> <h2 class="akairo">第1章</h2> 　　<p>まずはじめに...</p> <h2 class="akairo">第2章</h2> 　　<p>次にここでは...</p> </body> </html> 36 36

37 ＜ページの一部をまとめて 設定：div＞ <html> <head>
h1，h2など要素ごとに設定するのではなく，Webページの一部をまとめて設定したい時は<div>タグを用いる。即ち，スタイルを設定したい部分を<div>と</div>で囲み，それにクラスを適用する。このdivタグもCSSで多用されるのでよく覚えておくこと。 <html> <head> <title>タイトル</title> <style type="text/css"> .akairo { color:#FF0000 } .midori { color:#00FF00 } </style> </head> <body> <h1>HTML入門</h1> <div class="akairo"> <h2>第1章</h2> <p>まずはじめに...</p> </div> <div class="midori"> <h2>第2章</h2> <p>次にここでは...</p> </body> </html> 37 37

38 ＜ページの一部をまとめて 設定：span＞ <html> <head>
<title>クラス</title> <style type="text/css"> .akairo { color:#FF0000 } .midori { color:#00FF00 } </style> </head> <body> <h1>HTML入門</h1> <h2>第1章</h2> <p>まず<span class="akairo">htmlの仕様</span>を定義 　 　する<span class="midori">W3Cについて</span>述べる</p> </body> </html> ＜ページの一部をまとめて 　　設定：span＞ 先ほどの<div>で囲んだ場合は改行される。テキスト中の一部分など，改行したくない箇所は<div>ではなく<span>を用いる。 38 38

39 ＜文字の大きさ＞ 文字の大きさはfont-sizeプロパティで指定する。指定の仕方はいくつかあるが数値+単位で指定すると柔軟なデザインが可能となる。以下の単位が使用できる； pt：ポイント（1ポイントは72分の1インチ） px：ピクセル数 cm：センチメートル mm：ミリメートル in：インチ（1インチは約2.54センチメートル） pc：パイカ（6分の1インチ） em：1階層上のタグに適用されている文字の 　　　　　　　　　大きさに対する割合 ex：小文字のxの高さに対する大きさの割合 %：親要素のフォントのサイズに対する割合 39 39

40 例えばh1要素を48ptにし，箇条書きを14ptにしたいときは以下のようにする：
<html> <head> <title>クラス</title> <style type="text/css"> h1 { font-size:48pt } ul { font-size:14pt } </style> </head> <body> <h1>ここを48ptで表示</h1> <ul> <li>箇条書き1は14pt <li>箇条書き2は14pt </ul> </body> </html> 40 40

41 ＜斜体・太字＞ 文字を斜体，太字にしたいときはfont-styleプロパティの値をそれぞれitalic，boldにする。例えば以下のようにする： <html> <head> <title>クラス</title> <style type="text/css"> h1 { font-style:italic } p { font-style:bold } </style> </head> <body> <h1>ここは斜体</h1> <p>ここは太字</p> </body> </html> 41 41

42 ＜枠線＞ CSSを使うとテキストの周りに枠線を付けることもできる。例えば以下のようにborder-styleプロパティを設定すると，テキストを点線で囲むことができる： <html> <head> <title>クラス</title> <style type="text/css"> h1 { border-style:dotted } </style> </head> <body> <h1>この周りに点線</h1> </body> </html> 42 42

43 border-styleプロパティに設定できる値は以下の通りである： dotted 点線 dashed ダッシュ solid １本線
double ２本線 groove 窪んだ線 ridge 盛り上がった線 inset 枠線内が窪む outset 枠線内が盛り上がる none （枠線無し） また枠線にはborder-widthプロパティで太さを，border-colorプロパティで色を指定することもできる。 43 43

44 ＜2段組やマウスのロールオーバー＞ CSSを使って2段組のページを作ったり，マウスのポインタが上に来ると色が変わるようにする場合は以下の2ファイルを参考にすること： 上記 sample.html では左側にメニューを置き，そこからページ内のテーブルに飛ぶようにしてある。メニュー項目を図書，雑誌論文，新聞記事などにし，テーブルをそれに対応するものにすれば比較的簡単にパスファインダーが出来るかもしれない。 44 44

45 レポート提出に向けて確認 ブラウザ上で以下のURLのページが見られるか確認して下さい：
　　　　　　レポート提出に向けて確認 ブラウザ上で以下のURLのページが見られるか確認して下さい： 上記URLを入力して「Forbidden」などと表示された場合は 前回のレジュメを開き、puttyを使ってファイルの属性を変更 して下さい。 上記3ファイルがブラウザ上で見られなければ、採点する ことができません。最悪「評価対象外」となりますから注意

46 46 46