ゼミI実習


ゼミIで使用しているテキストがあります

HTML実習(その3)CSS


前回の練習で作ったファイルは残しておきましょう。後で使うかもしれません。

練習1.ezHTMLを使用してindex.htmのファイルを開いて、別の名前で保存しておいてください。次に練習用のファイルを用意します。メニューでファイル>新規作成から用意し、ファイル名はcss_test.htmとして保存しておきましょう。操作を忘れた方は前のテキストを参考にしてください。

できたファイルを一度ブラウザで確認してみましょう。何も表示されませんが、それで大丈夫です。

これからCSSについて練習していきます。

HTMLを利用してページの文章を記述することが本来の目的でしたが、最近では個性的なページを表現するためにタグのパラメータを多用するようになり、HTMLプログラムは複雑になりました。

そこで、スタイルシートを使いこのようなレイアウトやスタイルに関する要素を文書から分離して考えるようになりました。このスタイルシートの規格としてW3C(HTMLの仕様を決定する機関)はCSS(Cascading Style Sheet)を採用しています。

さらにHTMLを拡張したXMLではスタイルシートは完全に分離されています。このようにスタイルシートはこれからのマークアップ言語を学ぶ上で、必ず出てくる概念なので、今のうちに慣れておきましょう。

スタイルシートについていろいろな例を見ていきましょう。

まず、次のHTMLプログラムを試してみましょう。ezHTMLを使ってプログラムを作ってください。コピーしてペーストしてもかまいませんが、やはりツールの使い方を練習しておいた方が勉強になります。

文書構造タブのところで一番左側のアイコンがpタグ、左から3番目がcenterタグを設定します。標準タブではFのアイコンがfontタグ、hrタグは横線が描いてあるアイコンです。

またエディタで直接入力していくと入力補完機能により入力が簡単に行えます。使いやすい方で入力するとよいでしょう。

<html>
<head>
<title>
スタイルシートの練習
</title>
</head>
<body>
<center>
<hr>
<br><br>
<p>
<font color="#ff4500">
HTMLにはもう慣れましたか。
</font>
</p>
<br><br>
<p>
<font color="#ff4500">
次はスタイルシートの練習です。
</font>
</p>
<br><br>
<p>
<font color="#ff4500">
スタイルシートを勉強しておくと
</font>
</p>
<br><br>
<p>
<font color="#ff4500">
XMLも比較的楽に学べるでしょう。
</font>
</p>
<hr>
</center>
</body>
</html>

上書きしてどのように表示されるか確認してみましょう。

重複している部分がかなりあります。今、fontタグを使っていますがスタイルシートを利用することで、この部分をpタグの属性として設定することができます。

次の例を試してみましょう。ezHTMLを使う時は次の項目に従ってください。
・styleタグを入力する時はまず、headタグではさまれた部分をクリックします。
・メニューで標準>スタイルシート>埋め込みスタイルシートの順にクリックします。
で囲まれた部分をクリックします。
・例と同じpで始まる一行を入力します。

<html>
<head>
<title>
スタイルシートの練習
</title>
<style type="text/css">
<!--
p{color:#ff4500}
-->
</style>
</head>
<body>
<center>
<hr>
<br><br>
<p>
HTMLにはもう慣れましたか。
</p>
<br><br>
<p>
次はスタイルシートの練習です。
</p>
<br><br>
<p>
スタイルシートを勉強しておくと
</p>
<br><br>
<p>
XMLも比較的楽に学べるでしょう。
</p>
<hr>
</center>
</body>
</html>

表示は前の例と変わりませんが、fontタグを使わずにpタグで色の指定を行うことができます。

headタグで次のコードを書いています。

<style type="text/css">
<!--
p{color:#ff4500}
-->
</style>

まず、スタイルシートを利用するということでstyleタグを使います。次に<!--と-->で囲んでいますが、これは本来この範囲をコメントとして指定するものです。スタイルシートを使う場合、ブラウザによっては未対応のものがあり、コメントとしておかない場合、このコードが画面に表示されてしまいます。このような、書き方に慣れておきましょう。

p{color:#ff4500}

そしてこのようにタグ名を書き、次に{}で属性を指定することができます。属性はこの他にサイズなどいろいろなものを指定できます。詳細については専門の解説書を見てください。属性は属性名の次に:を置いて値を指定します。

次に同じタグに複数のスタイルが適用できるようにしてみましょう。次の例を試してみてください。

入力時pタグに対しclass属性をエディタの隣のタグ解析を使って設定することができます。設定値の方はp.orangeのような値で設定されてしまいます。このままでは正しく効果が現れないので、設定値のところでp.の部分を削除しておきます。

<html>
<head>
<title>
スタイルシートの練習
</title>
<style type="text/css">
<!--
p.orange{color:#ff4500}
p.gold{color:#ffd700}
p.green{color:#228b22}
p.blue{color:#4682b4}
-->
</style>
</head>
<body>
<center>
<hr>
<br><br>
<p class="orange">
HTMLにはもう慣れましたか。
</p>
<br><br>
<p class="gold">
次はスタイルシートの練習です。
</p>
<br><br>
<p class="green">
スタイルシートを勉強しておくと
</p>
<br><br>
<p class="blue">
XMLも比較的楽に学べるでしょう。
</p>
<hr>
</center>
</body>
</html>

同様にスタイルシートを使っていますが、次のように

p.orange{color:#ff4500}

タグ名の次にドットで名前を指定し、その名前により属性をいろいろ設定することができます。このように定義した名前は

<p class="orange">

のようにタグのパラメータとしてclassの値として指定することで、その名前に割り当てられた属性を利用することができます。

この応用として、この属性を他のタグにも適用することができます。次の例を試してみてください。

同様に、入力時pタグに対しclass属性をエディタの隣のタグ解析を使って設定することができます。設定値の方は.orangeのような値で設定されてしまいます。このままでは正しく効果が現れないので、設定値のところで.の部分を削除しておきます。

<html>
<head>
<title>
スタイルシートの練習
</title>
<style type="text/css">
<!--
.orange{color:#ff4500}
.gold{color:#ffd700}
.green{color:#228b22}
.blue{color:#4682b4}
-->
</style>
</head>
<body>
<center>
<hr class="blue">
<br><br>
<p class="orange">
HTMLにはもう慣れましたか。
</p>
<br><br>
<p class="gold">
次はスタイルシートの練習です。
</p>
<br><br>
<p class="green">
スタイルシートを勉強しておくと
</p>
<br><br>
<p class="blue">
XMLも比較的楽に学べるでしょう。
</p>
<hr class="orange">
</center>
</body>
</html>

スタイルシートの定義は次のように

<style type="text/css">
<!--
.orange{color:#ff4500}
.gold{color:#ffd700}
.green{color:#228b22}
.blue{color:#4682b4}
-->
</style>

タグを指定せずにドットで始まるような書き方をすることで、他のタグに属性を適用することができます。この例ではhrタグにパラメータとしてclassを使い、値を渡すことで色を指定しています。

また、このようなスタイルシートの設定を別ファイルとしておくことで、このスタイルを他のページにも利用することができます。統一したデザインを実現するためにはとても便利な機能です。

次の例を試してみましょう。

・この例はezHTMLを作って簡単に作ることができます。headタグの次の部分をドラッグして選択しておきます。

.orange{color:#ff4500}
.gold{color:#ffd700}
.green{color:#228b22}
.blue{color:#4682b4}

・それからメニューでスペシャル>内部スタイルシートの書き出しをクリックします。
・保存用のウィンドウが出てくるので、保存する場所はWebページが保存されているフォルダを指定します。ファイル名はcss1のように自分のわかりやすい名前をつけておきましょう。ファイルの種類にはCSSを選択しておきます。
・保存ボタンをクリックします。
・linkタグ(要素)として置き換えるか聞いてくるのではいボタンをクリックします。

<html>
<head>
<title>
スタイルシートの練習
</title>
<link rel="stylesheet"
type="text/css"
href="./style1.css">
</head>
<body>
<center>
<hr class="blue">
<br><br>
<p class="orange">
HTMLにはもう慣れましたか。
</p>
<br><br>
<p class="gold">
次はスタイルシートの練習です。
</p>
<br><br>
<p class="green">
スタイルシートを勉強しておくと
</p>
<br><br>
<p class="blue">
XMLも比較的楽に学べるでしょう。
</p>
<hr class="orange">
</center>
</body>
</html>

 スタイルの設定を別ファイルとして設定した場合には、このファイルにリンクしておく必要があります。

<link rel="stylesheet"
type="text/css"
href="./style1.css">

パラメータrelにstylesheetと指定し、typeパラメータにスタイルシートのタイプ"text/css"を指定します。リンクの仕方は同じですが、linkタグを利用しています。また、別ファイルとしたスタイルシートのファイルの拡張子はcssです。

以上、スタイルシートの使い方について練習してきました。この他にもHTMLでできなかった細かな設定もできるようになっています。2、3例を示してみます。

・行間の設定

<html>
<head>
<title>
スタイルシートの練習
</title>
<style type="text/css">
<!--
.orange{color:#ff4500}
.gold{color:#ffd700}
.green{color:#228b22}
.blue{color:#4682b4}
p.a{line-height:15px;color:#ff4500}
p.b{line-height:30px;color:#ffd700}
p.c{line-height:200%;color:#228b22}
-->
</style>
</head>
<body>
<center>
<hr class="blue">
<br><br>
<p class="a">
HTMLにはもう慣れましたか。<br>
HTMLにはもう慣れましたか。<br>
HTMLにはもう慣れましたか。<br>
</p>
<br><br>
<p class="b">
次はスタイルシートの練習です。<br>
次はスタイルシートの練習です。<br>
次はスタイルシートの練習です。<br>
</p>
<br><br>
<p class="c">
スタイルシートを勉強しておくと<br>
スタイルシートを勉強しておくと<br>
スタイルシートを勉強しておくと<br>
</p>
<br><br>
<p class="blue">
XMLも比較的楽に学べるでしょう。
</p>
<hr class="orange">
</center>
</body>
</html>

スタイルシートの属性にline-heightを使います。単位はpx,pt,in,cm,%を利用することができます。それぞれピクセル、ポイント、インチ、センチメートル、デフォルトに対するパーセントを意味しています。

設定時、属性を複数並べる時には;を使って区切ってください。

・背景色のスタイル指定

<html>
<head>
<title>
スタイルシートの練習
</title>
<style type="text/css">
<!--
.orange{color:#ff4500}
.gold{color:#ffd700}
.green{color:#228b22}
.blue{color:#4682b4}
p.a{line-height:15px;color:#ff4500}
p.b{line-height:30px;color:#ffd700}
p.c{line-height:200%;color:#228b22}
p.ap{background:skyblue;color:#ff4500}
p.cp{background:hotpink;color:#228b22}
-->
</style>
</head>
<body>
<center>
<hr class="blue">
<br><br>
<p class="ap">
HTMLにはもう慣れましたか。<br>
HTMLにはもう慣れましたか。<br>
HTMLにはもう慣れましたか。<br>
</p>
<br><br>
<p class="b">
次はスタイルシートの練習です。<br>
次はスタイルシートの練習です。<br>
次はスタイルシートの練習です。<br>
</p>
<br><br>
<p class="cp">
スタイルシートを勉強しておくと<br>
スタイルシートを勉強しておくと<br>
スタイルシートを勉強しておくと<br>
</p>
<br><br>
<p class="blue">
XMLも比較的楽に学べるでしょう。
</p>
<hr class="orange">
</center>
</body>
</html>

属性にbackgroundを使うことで、背景色を指定することができます。

以上スタイルシートを利用することで、HTMLドキュメントとスタイルを分離して利用できるようになります。ここで、取り上げていない属性もいろいろあるので、興味のある方は調べてみるとよいでしょう。

このように便利なスタイルシートですが、インターネット・エクスプローラとネットスケープ・ナビゲータでは統一されていない機能もあるので注意が必要です。

<参考書>
・HTMLポケットリファレンス、シーズ、技術評論社

練習.2006年ワールドカップの組別に表を作ってください。国旗、国名、出場回数、最高の戦績を項目とします。出場回数、戦績については前回ダウンロードしたファイルの中に2006senseki.txtがあるのでそれを参考にしてください。

<ヒント>次のHTMLプログラムを参考にしてみてください。

<html>
<head>
<style type="text/css">
<!--
table.s{border-collapse:collapse}
td.b{border-style:solid;border-width:1px;border-color:#ff4500}
-->
</style>
</head>
<body>
<table class="s">
<tr>
<td width="100" class="b">テスト</td><td width="100" class="b">テスト</td>
</tr>
<tr>
<td width="100" class="b">テスト</td><td width="100" class="b">テスト</td>
</tr>
</table>
</body>
</html>