前回紹介した
<center>
タグや
<font>
タグを用いると、見栄えのよいホームページが書けそうです。
しかし、規格では、これらのタグは使わないようにと指示されています。
その理由は、ホームページの作者は文書の内容に集中すべきであって、どのように表示されるかは気にしないほうがよいと考えているからです。
この「気にしない」は、見栄えはどうでもよいということではありません。
個々の表示に気を配るのではなく、見栄えに規則性を持たせ、その規則を利用しなさいということです。
スタイルシート ( style sheet )とは、見栄えの規則を表すのものです。 スタイルシートを用いますと、一つのホームページだけでなく、複数のホームページに対しても見栄えを統一できます。 HTMLでは、 カスケーディングスタイルシート ( Cascading Style Sheets , 以下 CSS )が利用できます。 この授業ではCSSを紹介します。
例として、「強く強調する部分は(ボールド体ではなく)赤で書く」という規則に従ってホームページを書くことにします。
<font>
タグを使って強く強調するのが取りあえず簡単です。
<p> 本製品を取り付けるときには、 <font color="red"> 必ずパソコン本体の電源をお切りください。 </font> パソコンの内部には高電圧の部品が使われており、 <font color="red"> 触ると危険です。 </font> </p>
しかし、他人が(そして将来の自分が)このHTMLドキュメントを読むと、なぜ赤で書くのかがよく分かりません。
強く強調していることを示すためには、
<strong>
タグを使うべきです。
<p> 本製品を取り付けるときには、 <strong> <font color="red"> 必ずパソコン本体の電源をお切りください。 </font> </strong> パソコンの内部には高電圧の部品が使われており、 <strong> <font color="red"> 触ると危険です。 </font> </strong> </p>
赤くはなりますが、ボールド体にするという規則にも従ってしまいます。
style
属性を用いますと、この規則が変更できます。
<p> 本製品を取り付けるときには、 <strong style="color: red; font-weight: normal"> 必ずパソコン本体の電源をお切りください。 </strong> パソコンの内部には高電圧の部品が使われており、 <strong style="color: red; font-weight: normal"> 触ると危険です。 </strong> </p>
これで、強く強調していることを示しながら、新しい規則に従って書くことができます。
強い強調が一、二か所でしたらこれで十分ですが、何か所もありますと、ドキュメントの記述が繁雑になります。
<style>
タグを用いますと、これらの
style
属性が一つにまとめられます。
<html> <head> <title>Important notes</title> <style type="text/css"> <!-- strong {color: red; font-weight: normal} --> </style> </head> <body> <p> 本製品を取り付けるときには、 <strong> 必ずパソコン本体の電源をお切りください。 </strong> パソコンの内部には高電圧の部品が使われており、 <strong> 触ると危険です。 </strong> </p> </body> </html>
これで、
style
属性を何度も書く必要がなくなります。
スタイルシートを用いますと、ホームページの作者は、「強く強調する部分は(ボールド体ではなく)赤で書く」という規則を忘れて、文書の内容に集中できるのです。
CSSがどの程度利用できるかは、WWWブラウザによって大きく異なります。 ここでは、情報処理センターで利用できるブラウザについて説明します。
Netscape 4.xはCSSの一部に対応しています。 色を変えたりする機能はうまく働きますが、長さを変えたりしますと、表示がおかしくなることがあります。 CSSそのものの学習にはあまり向いていません。 ただし、いくらCSSを使ったとしましても、Netscape 4.xで全く読めないようなホームページは勧められません。 Netscape 4.xでも内容が伝わるかどうか、確かめるようにしてください。
MozillaはCSSに対応しています。 おそらく、現時点では最もよいCSSブラウザです。 CSSを勉強したければ、Mozillaを使うのがよいでしょう。
w3mはテキストブラウザであり、CSSを完全に無視します。 携帯電話や携帯情報端末のWWWブラウザも、CSSには対応していないでしょうから、そのような機器でどう表示されるか、w3mで確かめるのがよいでしょう。
スタイルシートの前に、
style
属性
について説明します。
タグに
style
属性を書きますと、その範囲内に限りスタイルが指定されます。
スタイルの規則は作っていませんので、これをスタイルシートとはよびません。
style
属性は、例外的な要素に対してスタイルを指定するとき役立ちます。
style
属性はほとんどすべてのタグで使えます。
書式は次の通りです。
<tag style="property: value"> 〜 </tag>
ここで、 property はプロパティの名前です。 プロパティ ( property )とは、テキストの色やフォントの大きさなど、見栄えに関する性質です。 CSSには数十種類のプロパティが定義されています。 この書式は、プロパティ property の値を value にするという意味です。 プロパティ名とその値をコロンで区切ることに注意してください。
プロパティが2つあるときは、
<tag style="property1: value1; property2: value2"> 〜 </tag>
と、セミコロンで区切って書きます。 3つ以上でも同様です。
テキストに関するプロパティには、テキストの位置揃えや修飾などがあります。
text-align
プロパティ
は、テキストの位置揃えを指定します。
これまでの
align
属性に対応します。
<h1 style="text-align: center">市民講座のご案内</h1>
text-decoration
プロパティ
は、アンダーラインなどテキストの装飾を指定します。
プロパティと値 | 修飾 | 例 |
---|---|---|
text-decoration: none |
修飾しない | Good morning! |
text-decoration: underline |
アンダーライン | Good morning! |
text-decoration: overline |
オーバーライン | Good morning! |
text-decoration: line-through |
打ち消し線 | Good morning! |
text-decoration: blink |
点滅 | Good morning! |
<p> <strong style="text-decoration: underline"> 入場無料 </strong> ですので、どなた様も気軽に参加してください。 </p>
text-indent
プロパティ
は、最初の行の
字下げ
幅を指定します。
日本語でも英語でも、段落の始まりは通常字下げしますので、そのような目的でこのプロパティを使うのがよいでしょう。
このプロパティの値はピクセル(画素)数で書くのが簡単です。
例えば、
32px
は32ピクセルを意味します。
line-height
プロパティ
は、
行ピッチ
を指定します。
行ピッチとは、行の基準線から次の行の基準線までの長さのことです。
「行ピッチ=字の高さ+行間」と思ってもかまいません。
このプロパティの値は、百分率で書くのがよいでしょう。
例えば、
130%
は、行間として字の高さの30%を確保するということです。
<p style="text-indent: 24px; line-height: 200%"> インターネットが技術者の特権から普通の人の道具になってから、 私たちの生活は少しずつ変化しています。 本講演では、ブロードバンドとはどういう技術か説明し、 近い将来、私たちの毎日がどうなるかについて予測します。 </p>
フォントに関するプロパティには、種類や傾き、太さ、大きさなどがあります。 システムに適切なフォントがなければ、指定は無視されます。
font-family
プロパティ
は、フォントの種類を指定します。
セリフとはアルファベットに付いている「ひげ」のことです。
サンセリフとはセリフなしという意味です。
プロパティと値 | 種類 | 例 |
---|---|---|
font-family: serif |
ローマン体 | Good morning! |
font-family: sans-serif |
サンセリフ体 | Good morning! |
font-family: monospace |
タイプライタ体 | Good morning! |
font-style
プロパティ
は、フォントを傾けるかどうか指定します。
プロパティと値 | 傾き | 例 |
---|---|---|
font-style: normal |
傾けない | Good morning! |
font-style: italic |
イタリック体 | Good morning! |
font-weight
プロパティ
は、フォントの太さを指定します。
プロパティと値 | 太さ | 例 |
---|---|---|
font-weight: normal |
太くしない | Good morning! |
font-weight: bold |
ボールド体 | Good morning! |
<address style="font-style: normal; font-weight: bold"> 市民講座事務局 電話 03-XXXX-XXXX </address>
font-size
プロパティ
は、フォントの大きさを指定します。
large
や
small
などのキーワードの他に、
16px
など長さでも指定できます。
プロパティと値 | 大きさ | 例 |
---|---|---|
font-size: larger |
前後より大きめ | Good morning! |
font-size: smaller |
前後より小さめ | Good morning! |
font-size: xx-large |
非常に大きめ | |
font-size: x-large |
より大きめ | Good morning! |
font-size: large |
大きめ | Good morning! |
font-size: medium |
通常 | Good morning! |
font-size: small |
小さめ | Good morning! |
font-size: x-small |
より小さめ | Good morning! |
font-size: xx-small |
非常に小さめ | |
font-size: 16px |
16ピクセル | Good morning! |
色に関するプロパティには、テキストの色や背景の色などがあります。 この値はカラー・ネームを用いるのが簡単です。 カラー・ネームの一覧を再掲します。
カラー・ネーム | 色 | 例 |
---|---|---|
aqua |
水色 | ■ |
black |
黒 | ■ |
blue |
青 | ■ |
fuchsia |
桃色 | ■ |
gray |
灰色 | ■ |
green |
緑 | ■ |
lime |
黄緑 | ■ |
maroon |
茶色 | ■ |
navy |
紺 | ■ |
olive |
黄土色 | ■ |
purple |
紫 | ■ |
red |
赤 | ■ |
silver |
銀色 | ■ |
teal |
深緑 | ■ |
white |
白 | ■ |
yellow |
黄色 | ■ |
color
プロパティ
は、テキストの色を指定します。
<body>
タグに書きますと、テキスト全体がその色になります。
background-color
プロパティ
は、背景の色を指定します。
<body>
タグに書きますと、背景全体がその色になります。
<h2 style="color: white; background-color: teal"> 講演スケジュール </h2>
CSSでは、見出しや段落などほとんどの要素に対して、それが長方形の(透明な)枠の中に配置されると考えます。 この枠は、
から構成されます。 これらのイメージは次の通りです。
+-------------------------+ |margin | | +-------------------+ | | |border | | | | +-------------+ | | | | |padding | | | | | | +-------+ | | | | | | | | | | | | | | +-------+ | | | | | | | | | | | +-------------+ | | | | | | | +-------------------+ | | | +-------------------------+
例えば、
<blockquote>
タグを使って引用を表した場合、表示では左右に余白が設けられました。
この余白がマージンになります。
border-width
プロパティ
は、ボーダーの太さを指定します。
thin
や
thick
などのキーワードの他に、
1px
などの長さでも指定できます。
プロパティと値 | 種類 |
---|---|
border-width: thin |
細い |
border-width: medium |
普通 |
border-width: thick |
太い |
border-width: 1px |
1ピクセル |
border-color
プロパティ
は、ボーダーの色を指定します。
上記のカラー・ネームを用いるのがよいでしょう。
border-style
プロパティ
は、ボーダーの種類を指定します。
プロパティと値 | 種類 |
---|---|
border-style: none |
なし |
border-style: solid |
実線 |
<h2 style="color: white; background-color: teal; border-width: thick; border-color: olive; border-style: solid"> 講演スケジュール </h2>
margin-top
プロパティ
は、上のマージンを指定します。
この値を
32px
にしますと、上に32ピクセルのマージンが確保されます。
margin-right
プロパティ
は、右のマージンを指定します。
この値を
32px
にしますと、右に32ピクセルのマージンが確保されます。
margin-bottom
プロパティ
は、下のマージンを指定します。
この値を
32px
にしますと、下に32ピクセルのマージンが確保されます。
margin-left
プロパティ
は、左のマージンを指定します。
この値を
32px
にしますと、左に32ピクセルのマージンが確保されます。
<h2 style="color: white; background-color: teal; border-width: thick; border-color: olive; border-style: solid; margin-left: 64px; margin-right: 64px"> 講演スケジュール </h2>
padding-top
プロパティ
は、上のパディングを指定します。
この値を
32px
にしますと、上に32ピクセルのパディングが確保されます。
padding-right
プロパティ
は、右のパディングを指定します。
この値を
32px
にしますと、右に32ピクセルのパディングが確保されます。
padding-bottom
プロパティ
は、下のパディングを指定します。
この値を
32px
にしますと、下に32ピクセルのパディングが確保されます。
padding-left
プロパティ
は、左のパディングを指定します。
この値を
32px
にしますと、左に32ピクセルのパディングが確保されます。
<h2 style="color: white; background-color: teal; border-width: thick; border-color: olive; border-style: solid; margin-left: 64px; margin-right: 64px; padding-top: 32px; padding-bottom: 32px"> 講演スケジュール </h2>
はじめに、歴史上の人物や有名人を例にならって3人(以上)選び、簡単な説明文を考えてください。 次に、名前と説明文を定義リストにまとめます。
<dl> <dt>パスカル</dt> <dd> 歯車式の計算機械を作った人。 加減算ができた。 </dd> <dt>ライプニッツ</dt> <dd> 四則演算ができる歯車式計算機を作った人。 </dd> <dt>バベッジ</dt> <dd> 現在の計算機の原型を設計した人。 計算機は完成しなかった。 </dd> </dl>
そして、
style
属性を使って背景と枠に色を付け、枠、名前、説明文のそれぞれの間に余白を入れてください。
今日の演習4に従ってホームページを作成し、そのファイル名をkonishi@twcu.ac.jpあてにメールで報告してください。 メールには、学生番号、氏名、科目名、授業の日付け(5/9)を明記してください。
CSSについて本格的に勉強したければ、以下のホームページを参考にするとよいでしょう。
CSSは1996年にレベル1が勧告段階(recommendation)となり、1998年にレベル2が勧告段階になりました。 現在はレベル3の開発段階となっています。