私のホームページへ - 前の授業へ - 次の授業へ

情報処理IIA(HTML入門)第3回

目次
  1. タグの入れ子
  2. スタイルシート
  3. 演習3
  4. レポート課題

タグの入れ子

前回の授業では、字をイタリック体にしたり大きくしたりする方法を学びました。 イタリック体の大きな字を表示するには、<i>タグと<big>タグを組み合わせます。

例3.1
ABCDEFGHIJ<big><i>KLMNO</i></big>PQRSTUVWXYZ<br>
ABCDE<big>FGHIJ<i>KLMNO</i>PQRST</big>UVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ

実は、タグで囲むときには、入れ子nest)にしなくてはいけません。 入れ子とは、物の構成要素の中に、その物と同種の物があるという構造です。 HTMLファイルの場合、タグで囲まれたものの中に、またタグで囲まれたものがあるということです。

例えば、

ABCDE<big>FGHIJ<i>KLMNO</i>PQRST</big>UVWXYZ

は入れ子になっています。 <big></big>に囲まれたものの中に、<i></i>に囲まれたものがあるからです。 一方、

ABCDE<big>FGHIJ<i>KLMNO</big>PQRST</i>UVWXYZ

は入れ子になっていません。 <big></big>に囲まれたものの中から、<i></i>に囲まれたものがはみ出していますし、<i></i>に囲まれたものの中からも、<big></big>に囲まれたものがはみ出しています。

タグが入れ子になっていないと、ブラウザはうまく処理できません。 そのような場合、ブラウザはタグを色々補正してみて、入れ子の構造になるようにします。 上記の場合、おおよそ次のように補正されます。

ABCDE<big>FGHIJ<i>KLMNO</i></big><i>PQRST</i>UVWXYZ

タグの補正は時間がかかりますし、ホームページの作者の思った通りに直してくれるとも限りません。 始めからHTMLファイルを入れ子の構造で書くのが一番です。

参考資料
ABCDEFGHIJKLMNOPQRSTUVWXYZ
parse tree 1
ABCDE<big>FGHIJKLMNOPQRST</big>UVWXYZ
parse tree 2
ABCDE<big>FGHIJ<i>KLMNO</i>PQRST</big>UVWXYZ
parse tree 3
ABCDE<big>FGHIJ<i>KLMNO</big>PQRST</i>UVWXYZ
parse tree 4
ABCDE<big>FGHIJ<i>KLMNO</i></big><i>PQRST</i>UVWXYZ

スタイルシート

スタイルシートとは

ホームページでは、フォントを切り替える、字の大きを変える、字や背景に色を付ける、文字列に下線を引く、中央に揃えて表示するなど、色々なことができます。 このような、ホームページの見栄えのことを、ここではスタイルstyle)とよびます。 HTMLでスタイルをどのように指定するかについては、色々な歴史的経緯があり、現在では、スタイルシートstyle sheet、具体的にはCSS)を使うことが勧められています。

スタイルシートとは、ホームページのスタイルを系統的に指定する、非常に高度な仕組みです。 スタイルシートを使うと、見栄えに統一性がある、読みやすいホームページが少ない作業量で作れます。 ただし、その使い方は、今までのようにタグで囲めばよいという簡単なものではありません。

この授業では、スタイルシートそのものは扱いません。 スタイルシートの一部を使ったスタイルの指定の仕方を説明します。

注意: もしかしたら、<center>タグを使えば中央に揃えて表示する、<font>タグを使えば字の大きさや色が変えられるということを知っている人がいるかもしれません。 これらの歴史的なタグは、スタイルシートの規格化によって、いずれHTMLの規格から除外されることになっています。

スタイル属性

スタイルシートを利用する最も簡単な方法は、<span>タグと<div>タグを使うことです。 ただし、単に文字列を<span></span>で囲っても、ブラウザは何もなかったように表示します。 一方、文字列を<div></div>で囲むと、その前後とは独立して表示します。

例3.2
<span>ABCDE</span>FGHIJ<div>KLMNO<br>PQRST</div>UVWXYZ
ABCDEFGHIJ
KLMNO
PQRST
UVWXYZ

HTMLでは、属性attribute)を用いてタグにより詳しい情報を与えます。 この場合、開始タグは<tag att="value">という形になります。 終了タグは今まで通り、</tag>です。 attは属性の名前で、その属性の値をvalueにするという意味になります。

スタイルも属性の一つです。 その名前はstyleです。 したがって、あとはスタイル属性の値valueの書き方さえ分かれば、<span style="value"></span><div style="value"></div>で囲むことによって、その範囲が値valueに割り当てられたスタイルに基づいて表示されることになります。

フォントの大きさ

HTMLファイルで、<span style="font-size: size"></span>に囲まれた部分は、ブラウザで、大きさのキーワードsizeに割り当てられた大きさのフォントで表示されます。 大きさのキーワードの割り当ては、表の通りです。

表3.1 大きさのキーワードの割り当て
大きさのキーワード大きさ
xx-smallごく小さなフォント
x-small小さなフォント0123456789
smallやや小さなフォント0123456789
medium普通の大きさのフォント0123456789
largeやや大きなフォント0123456789
x-large大きなフォント0123456789
xx-largeごく大きなフォント
例3.3
ABCDE
<span style="font-size: x-small">FGHIJ</span>
KLMNO
<span style="font-size: x-large">PQRST</span>
UVWXYZ
ABCDE FGHIJ KLMNO PQRST UVWXYZ

フォントの色と背景色

HTMLファイルで、<span style="color: color"></span>に囲まれた字は、ブラウザで、色のキーワードcolorに割り当てられた色で表示されます。 色のキーワードの割り当ては、表の通りです。

また、<span style="background-color: color"></span>に囲まれた部分は、ブラウザで色のキーワードcolorに割り当てられた背景色で表示されます。

表3.2 色のキーワードの割り当て
色のキーワード
aqua水色
black
blue
fuchsia桃色
grayグレー
green
lime黄緑
maroon茶色
navy
olive黄土色
purple
red
silver灰色
teal深緑
white
yellow黄色
例3.4
ABCDE
<span style="background-color: aqua">FGHIJ
   <span style="color: blue">KLMNOPQRST</span>
</span>
UVWXYZ
ABCDE FGHIJ KLMNOPQRST UVWXYZ

注意: この例で、終了タグ</span>が2つ続きました。 前者の</span>は開始タグ<span style="color: blue">に対応しています。 後者の</span>は開始タグ<span style="background-color: aqua">に対応しています。 </span>を1つにまとめることはできません。

字の装飾

HTMLファイルで、<span style="text-decoration: deco"></span>に囲まれた部分は、ブラウザで、キーワードdecoに割り当てられた装飾が施されます。 装飾のキーワードの割り当ては、表の通りです。

表3.3 装飾のキーワードの割り当て
装飾のキーワード装飾
underline下に線を引くABCDEFGHIJ
overline上に線を引くABCDEFGHIJ
line-through中央に線を引くABCDEFGHIJ
blink点滅させるABCDEFGHIJ
例3.5
ABCDE
<span style="text-decoration: underline">FGHIJ</span>
KLMNO
<span style="text-decoration: line-through">PQRST</span>
UVWXYZ
ABCDE FGHIJ KLMNO PQRST UVWXYZ

字の位置揃え

HTMLファイルで、<div style="text-align: left"></div>に囲まれた部分は、字が左に揃って表示されます。 <div style="text-align: right"></div>に囲まれた部分は、字が右に揃って表示されます。 <div style="text-align: center"></div>に囲まれた部分は、字が中央に揃って表示されます。

例3.6
<div style="text-align: center">abcde<br>fghijklmno</div>
<div style="text-align: right">abcde<br>fghijklmno</div>
<div style="text-align: left">abcde<br>fghijklmno</div>
abcde
fghijklmno
abcde
fghijklmno
abcde
fghijklmno

演習3

新規にファイルを用意し(例えばex3.html)、雛形をすべて消した後で、テスト文を考え、例を参考にしてホームページを作成してください。 ただし、

例3.7
4月27日
今日は、朝6:00に起きたので、とても眠いです。

レポート課題

今日の演習3にしたがってホームページを作成し、konishi@twcu.ac.jpあてにメールでそのURIを報告してください。 メールには、学生番号、氏名、科目名、授業の日付けを明記してください。


私のホームページへ - 前の授業へ - 次の授業へ
このページの複製は、東京女子大学学内に限り許可します。 このページへのリンクを許可します。
2000年5月8日更新
製作・著作:小西善二郎<konishi@twcu.ac.jp>