前回の授業では、字をイタリック体にしたり大きくしたりする方法を学びました。
イタリック体の大きな字を表示するには、<i>
タグと<big>
タグを組み合わせます。
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
ABCDE<big>FGHIJKLMNOPQRST</big>UVWXYZ
ABCDE<big>FGHIJ<i>KLMNO</i>PQRST</big>UVWXYZ
ABCDE<big>FGHIJ<i>KLMNO</big>PQRST</i>UVWXYZ
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>
で囲むと、その前後とは独立して表示します。
<span>ABCDE</span>FGHIJ<div>KLMNO<br>PQRST</div>UVWXYZ
ABCDEFGHIJKLMNOUVWXYZ
PQRST
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に割り当てられた大きさのフォントで表示されます。
大きさのキーワードの割り当ては、表の通りです。
大きさのキーワード | 大きさ | 例 |
---|---|---|
xx-small | ごく小さなフォント | |
x-small | 小さなフォント | 0123456789 |
small | やや小さなフォント | 0123456789 |
medium | 普通の大きさのフォント | 0123456789 |
large | やや大きなフォント | 0123456789 |
x-large | 大きなフォント | 0123456789 |
xx-large | ごく大きなフォント |
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に割り当てられた背景色で表示されます。
色のキーワード | 色 | 例 |
---|---|---|
aqua | 水色 | ■ |
black | 黒 | ■ |
blue | 青 | ■ |
fuchsia | 桃色 | ■ |
gray | グレー | ■ |
green | 緑 | ■ |
lime | 黄緑 | ■ |
maroon | 茶色 | ■ |
navy | 紺 | ■ |
olive | 黄土色 | ■ |
purple | 紫 | ■ |
red | 赤 | ■ |
silver | 灰色 | ■ |
teal | 深緑 | ■ |
white | 白 | ■ |
yellow | 黄色 | ■ |
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に割り当てられた装飾が施されます。
装飾のキーワードの割り当ては、表の通りです。
装飾のキーワード | 装飾 | 例 |
---|---|---|
underline | 下に線を引く | ABCDEFGHIJ |
overline | 上に線を引く | ABCDEFGHIJ |
line-through | 中央に線を引く | ABCDEFGHIJ |
blink | 点滅させる | ABCDEFGHIJ |
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>
に囲まれた部分は、字が中央に揃って表示されます。
<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
fghijklmnoabcde
fghijklmnoabcde
fghijklmno
新規にファイルを用意し(例えばex3.html
)、雛形をすべて消した後で、テスト文を考え、例を参考にしてホームページを作成してください。
ただし、
4月27日今日は、朝6:00に起きたので、とても眠いです。
雨
今日の演習3にしたがってホームページを作成し、konishi@twcu.ac.jp
あてにメールでそのURIを報告してください。
メールには、学生番号、氏名、科目名、授業の日付けを明記してください。