HTML 版パスファインダーの作成 CSS の利用 tsujikeita.hpseek.co.jp/cje10.doc...

HTML 版パスファインダーの作成

CSS の利用

http://tsujikeita.hp.infoseek.co.jp/cje10.doc をダウンロードして下さい。

辻慶太

1

1. 今回の予定

(1) CSS を使って統一的に html に色や枠線を付ける方法を

　　学ぶ。まずサンプルとして難民に関するごく簡単なパス

ファインダーを作る。次に CSS を使って前回のフェアト

レードのパスファインダーとスタイルを統一する。

(2) 以下のテーマから１つを選び， html 版パスファインダーを

作成する（前回の続き）：　　　・地球温暖化　　　・循環型社会　　　・ジェンダーフリー論争　　　・健康食品・サプリメント　　　・インターネット広告

1. 今回の予定

(3) 1 年後に始まる卒業研究を視野に入れ，自分の関心あるテーマを 1 つ決めてその html 版パスファインダーを作成する。

　　　

1. 今回の予定

(4) 前回逸村先生の課題の続きとして完成させた html 版パス

　　ファインダーと， (2)(3) のパスファインダーで計 3つのパス

　　ファインダーを作成することになる。

　　　→ これら 3 つのパスファインダーのスタイルを，　　　　　 CSS ファイルを使って統一する。

　　　　　→ 完成したら計 4 つのファイルを www/local_only に

　　　　　　　アップする。採点しやすいよう htmlファイルはそれ

　　　　　　　ぞれ p1.html ， p2.html ， p3.html という名称にし，

　　　　　　　 CSS ファイルは path.css という名称にする。

2. 今週のレポート課題

先ほどの (2)(3)(4) を行うこと。締切は 11 月 27 日（金） 16 時。

　　　　　　　　　　※後述の難民パスファインダーのスタイルを

　　　　　そのまま使ったパスファインダーよりも、　　　　　画像とか背景とか独自に凝ったものを　　　　　提出した方がもちろん評価は高い。

3. 出席課題

以下の画面を再現するような 2 つの html ファイルと 1つの CSS ファイルを作成し， www/local_only にアップする。完成したら画像をメールで送ること。

→ 詳しくはレジュメ参照

＜ CSS で出来ること＞

前回は html の基本を学習した。今回は CSS を使ってWeb ページに色や枠線をつけ，文字の大きさを変える方法を学ぶ。

CSS を使わず html だけで色をつけることも可能なのだが， html は本来文書の構造を記述するものなので，そうした使い方は本来のものではない。

CSS を使うことで複数の html を同じスタイルに統一したり， html だけでは実現できない表現も可能になる。　

　　　　（例えば段落や見出しに枠線を付けて，線と背景，文字　　　　　にそれぞれ別の色を付けるといったことも可能になる）

＜ CSS の基本的な記述方法＞

CSS は「プロパティ」に「値」を設定することで使用する。

　・「プロパティ」とは「フォントのサイズ」「色」など，設定しよ　　うとする項目のこと。

　・「値」とは「 18 ポイント」「黄色」など具体的な設定値のこと。

CSS ではコロン「 : 」を使ってプロパティに値を設定する。例えば以下では「 color 」プロパティに「 blue 」という値を設定している。

　　　　　　　　　　 color:blue

＜ CSS の記述場所＞

CSS を記述する場所には以下の 3 つがある：

(1) style 属性の値として記述する

(2) ヘッダ部分に記述する

(3) 別ファイルに記述する

19

(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>

22

(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>





(3) 別ファイルに記述する → これが今回の課題

25

(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>

26

＜色の名称＞

色の指定では次に述べる RGB による指定が推奨されているのだが，以下の 16 色については言葉（ blue ， gray など）で指定することができる：

black, silver, gray, white, maroon, red, purple, fuchsia ， green, lime, olive, yellow, navy, blue, teal, aqua

27

＜ RGB とは＞

Web ページに限らず，コンピュータ上で表現される色は，光の 3原色と呼ばれる赤（ red ），緑（ green ），青（ blue ）の組合せで表現される。これを 3 色の英語名の頭文字をとって「 RGBカラー」と呼ぶ。それぞれの色が 0～ 255 までの 256 段階の強さを持つため，理論上256×256×256=16,777,216 色を表すことができる。

上記の 0～ 255 は一般には 16進数を使って指定する。例えば「赤の強さが最大で，緑と青は最小」（＝赤）という色は「 #FF0000 」と表現される。「赤と青が最小で緑が最大」（＝緑）という色は「 #00FF00 」と表現される。

28

<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進数を使って表し，かつ他の要素には他の色を指定する場合，例えば左のようにする。

29

<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 つ以上のプロパティを設定する時は間に「 ; 」を入れる。

30

＜クラスを使った設定＞「クラス」にスタイルを設定し，クラスを各要素に適用するという書き方もある。先ほどの書き方だと 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>

31

<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>

</div></body></html>

＜ページの一部をまとめて　　設定： div ＞h1 ， h2 など要素ごとに設定するのではなく， Web ページの一部をまとめて設定したい時は <div> タグを用いる。即ち，スタイルを設定したい部分を <div> と </div> で囲み，それにクラスを適用する。この div タグも CSS で多用されるのでよく覚えておくこと。

32

<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> を用いる。

33

＜文字の大きさ＞文字の大きさは font-size プロパティで指定する。指定の仕方はいくつかあるが数値 + 単位で指定すると柔軟なデザインが可能となる。以下の単位が使用できる；

pt ：ポイント（ 1 ポイントは 72 分の 1 インチ）

px ：ピクセル数cm ：センチメートルmm ：ミリメートルin ：インチ（ 1 インチは約 2.54センチメー

トル）pc ：パイカ（ 6 分の 1 インチ）em ： 1階層上のタグに適用されている文字

の　　　　　　　　　大きさに対する割合

ex ：小文字の x の高さに対する大きさの割合

% ：親要素のフォントのサイズに対する割合

34

例えば h1 要素を 48pt にし，箇条書きを 14pt にしたいときは以下のようにする：

<html><head>


h1 { font-size:48pt }ul { font-size:14pt }

</style></head><body>

<h1> ここを 48pt で表示 </h1><ul>

<li>箇条書き 1 は 14pt<li>箇条書き 2 は 14pt

</ul></body></html>

35

＜斜体・太字＞文字を斜体，太字にしたいときは font-style プロパティの値をそれぞれ italic ， bold にする。例えば以下のようにする：

<html><head>


h1 { font-style:italic }p { font-style:bold }

</style></head><body>

<h1> ここは斜体 </h1><p> ここは太字 </p>

</body></html>

36

＜枠線＞CSS を使うとテキストの周りに枠線を付けることもできる。例えば以下のように border-style プロパティを設定すると，テキストを点線で囲むことができる：

<html><head>


h1 { border-style:dotted }</style>

</head><body>

<h1> この周りに点線 </h1></body></html>

37

border-style プロパティに設定できる値は以下の通りである：

dotted 点線dashed ダッシュsolid １本線double２本線groove 窪んだ線ridge 盛り上がった線inset 枠線内が窪むoutset 枠線内が盛り上がるnone （枠線無し）

また枠線には border-width プロパティで太さを， border-color プロパティで色を指定することもできる。

　　　　　　レポート提出に向けて確認

ブラウザ上で以下の URL のページが見られるか確認して下さい：

http://www.u.tsukuba.ac.jp/~s0xxxxxx/local_only/p1.html http://www.u.tsukuba.ac.jp/~s0xxxxxx/local_only/p2.htmlhttp://www.u.tsukuba.ac.jp/~s0xxxxxx/local_only/p3.htmlhttp://www.u.tsukuba.ac.jp/~s0xxxxxx/local_only/path.css

上記 URL を入力して「 Forbidden 」などと表示された場合は前回のレジュメを開き、 putty を使ってファイルの属性を変更して下さい。

上記４ファイルがブラウザ上で見られなければ、採点することができません。最悪「評価対象外」となりますから注意して下さい。

HTML 版パスファインダーの作成 CSS の利用 tsujikeita.hpseek.co.jp/cje10.doc...

Documents

Transcript of HTML 版パスファインダーの作成 CSS の利用 tsujikeita.hpseek.co.jp/cje10.doc...