[小西ホームページ]   [目次・索引]   [前の授業]   [次の授業]

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

目次 索引
4.1 スタイルシートとは
4.1.1 なぜスタイルシートか
4.1.2 スタイルシートの概略
4.1.3 CSSブラウザ
4.2 style属性
4.2.1 スタイルの書式
4.2.2 テキストのプロパティ
4.2.3 フォントのプロパティ
4.2.4 色のプロパティ
4.2.5 枠のプロパティ
4.3 演習4
4.4 レポート課題
4.5 参考資料
background-colorプロパティ  border-colorプロパティ  border-styleプロパティ  border-widthプロパティ  colorプロパティ  CSS  font-familyプロパティ  font-sizeプロパティ  font-styleプロパティ  font-weightプロパティ  line-heightプロパティ  margin-bottomプロパティ  margin-leftプロパティ  margin-rightプロパティ  margin-topプロパティ  padding-bottomプロパティ  padding-leftプロパティ  padding-rightプロパティ  padding-topプロパティ  style属性  text-alignプロパティ  text-decorationプロパティ  text-indentプロパティ  アンダーライン  イタリック体  打ち消し線  オーバーライン  カスケーディングスタイルシート  行ピッチ  サンセリフ体  字下げ  スタイルシート  タイプライタ体  中央揃え  点滅  パディング  左揃え  プロパティ  ボーダー  ボールド体  マージン  右揃え  ローマン体 

4.1 スタイルシートとは

4.1.1 なぜスタイルシートか

前回紹介した <center> タグや <font> タグを用いると、見栄えのよいホームページが書けそうです。 しかし、規格では、これらのタグは使わないようにと指示されています。 その理由は、ホームページの作者は文書の内容に集中すべきであって、どのように表示されるかは気にしないほうがよいと考えているからです。 この「気にしない」は、見栄えはどうでもよいということではありません。 個々の表示に気を配るのではなく、見栄えに規則性を持たせ、その規則を利用しなさいということです。

スタイルシートstyle sheet )とは、見栄えの規則を表すのものです。 スタイルシートを用いますと、一つのホームページだけでなく、複数のホームページに対しても見栄えを統一できます。 HTMLでは、 カスケーディングスタイルシートCascading Style Sheets , 以下 CSS )が利用できます。 この授業ではCSSを紹介します。

4.1.2 スタイルシートの概略

例として、「強く強調する部分は(ボールド体ではなく)赤で書く」という規則に従ってホームページを書くことにします。

本製品を取り付けるときには、 必ずパソコン本体の電源をお切りください。 パソコンの内部には高電圧の部品が使われており、 触ると危険です。

<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 属性を何度も書く必要がなくなります。

スタイルシートを用いますと、ホームページの作者は、「強く強調する部分は(ボールド体ではなく)赤で書く」という規則を忘れて、文書の内容に集中できるのです。

4.1.3 CSSブラウザ

CSSがどの程度利用できるかは、WWWブラウザによって大きく異なります。 ここでは、情報処理センターで利用できるブラウザについて説明します。

Netscape 4.xはCSSの一部に対応しています。 色を変えたりする機能はうまく働きますが、長さを変えたりしますと、表示がおかしくなることがあります。 CSSそのものの学習にはあまり向いていません。 ただし、いくらCSSを使ったとしましても、Netscape 4.xで全く読めないようなホームページは勧められません。 Netscape 4.xでも内容が伝わるかどうか、確かめるようにしてください。

MozillaはCSSに対応しています。 おそらく、現時点では最もよいCSSブラウザです。 CSSを勉強したければ、Mozillaを使うのがよいでしょう。

w3mはテキストブラウザであり、CSSを完全に無視します。 携帯電話や携帯情報端末のWWWブラウザも、CSSには対応していないでしょうから、そのような機器でどう表示されるか、w3mで確かめるのがよいでしょう。


4.2 style属性

4.2.1 スタイルの書式

スタイルシートの前に、 style属性 について説明します。 タグに style 属性を書きますと、その範囲内に限りスタイルが指定されます。 スタイルの規則は作っていませんので、これをスタイルシートとはよびません。 style 属性は、例外的な要素に対してスタイルを指定するとき役立ちます。

style 属性はほとんどすべてのタグで使えます。 書式は次の通りです。

<tag style="property: value"> 〜 </tag>

ここで、 property はプロパティの名前です。 プロパティproperty )とは、テキストの色やフォントの大きさなど、見栄えに関する性質です。 CSSには数十種類のプロパティが定義されています。 この書式は、プロパティ property の値を value にするという意味です。 プロパティ名とその値をコロンで区切ることに注意してください。

プロパティが2つあるときは、

<tag style="property1: value1; property2: value2"> 〜 </tag>

と、セミコロンで区切って書きます。 3つ以上でも同様です。

4.2.2 テキストのプロパティ

テキストに関するプロパティには、テキストの位置揃えや修飾などがあります。

text-alignプロパティ

text-alignプロパティ は、テキストの位置揃えを指定します。 これまでの align 属性に対応します。

表 4.1  テキストの位置揃え
プロパティと値 位置揃え
text-align: left 左揃え
text-align: center 中央揃え
text-align: right 右揃え
例 4.1 
<h1 style="text-align: center">市民講座のご案内</h1>
市民講座のご案内

text-decorationプロパティ

text-decorationプロパティ は、アンダーラインなどテキストの装飾を指定します。

表 4.2  テキストの修飾
プロパティと値 修飾
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!
例 4.2 
<p>
<strong style="text-decoration: underline">
入場無料
</strong>
ですので、どなた様も気軽に参加してください。
</p>
入場無料 ですので、どなた様も気軽に参加してください。

text-indentプロパティ

text-indentプロパティ は、最初の行の 字下げ 幅を指定します。 日本語でも英語でも、段落の始まりは通常字下げしますので、そのような目的でこのプロパティを使うのがよいでしょう。

このプロパティの値はピクセル(画素)数で書くのが簡単です。 例えば、 32px は32ピクセルを意味します。

line-heightプロパティ

line-heightプロパティ は、 行ピッチ を指定します。 行ピッチとは、行の基準線から次の行の基準線までの長さのことです。 「行ピッチ=字の高さ+行間」と思ってもかまいません。

このプロパティの値は、百分率で書くのがよいでしょう。 例えば、 130% は、行間として字の高さの30%を確保するということです。

例 4.3 
<p style="text-indent: 24px; line-height: 200%">
インターネットが技術者の特権から普通の人の道具になってから、
私たちの生活は少しずつ変化しています。
本講演では、ブロードバンドとはどういう技術か説明し、
近い将来、私たちの毎日がどうなるかについて予測します。
</p>
インターネットが技術者の特権から普通の人の道具になってから、 私たちの生活は少しずつ変化しています。 本講演では、ブロードバンドとはどういう技術か説明し、 近い将来、私たちの毎日がどうなるかについて予測します。

4.2.3 フォントのプロパティ

フォントに関するプロパティには、種類や傾き、太さ、大きさなどがあります。 システムに適切なフォントがなければ、指定は無視されます。

font-familyプロパティ

font-familyプロパティ は、フォントの種類を指定します。 セリフとはアルファベットに付いている「ひげ」のことです。 サンセリフとはセリフなしという意味です。

表 4.3  フォントの種類
プロパティと値 種類
font-family: serif ローマン体 Good morning!
font-family: sans-serif サンセリフ体 Good morning!
font-family: monospace タイプライタ体 Good morning!

font-styleプロパティ

font-styleプロパティ は、フォントを傾けるかどうか指定します。

表 4.4  フォントの傾き
プロパティと値 傾き
font-style: normal 傾けない Good morning!
font-style: italic イタリック体 Good morning!

font-weightプロパティ

font-weightプロパティ は、フォントの太さを指定します。

表 4.5  フォントの太さ
プロパティと値 太さ
font-weight: normal 太くしない Good morning!
font-weight: bold ボールド体 Good morning!
例 4.4 
<address style="font-style: normal; font-weight: bold">
市民講座事務局 電話 03-XXXX-XXXX
</address>
市民講座事務局 電話 03-XXXX-XXXX

font-sizeプロパティ

font-sizeプロパティ は、フォントの大きさを指定します。 largesmall などのキーワードの他に、 16px など長さでも指定できます。

表 4.6  フォントの大きさ
プロパティと値 大きさ
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!

4.2.4 色のプロパティ

色に関するプロパティには、テキストの色や背景の色などがあります。 この値はカラー・ネームを用いるのが簡単です。 カラー・ネームの一覧を再掲します。

表 4.7  基本カラー・ネーム
カラー・ネーム
aqua 水色
black
blue
fuchsia 桃色
gray 灰色
green
lime 黄緑
maroon 茶色
navy
olive 黄土色
purple
red
silver 銀色
teal 深緑
white
yellow 黄色

colorプロパティ

colorプロパティ は、テキストの色を指定します。 <body> タグに書きますと、テキスト全体がその色になります。

background-colorプロパティ

background-colorプロパティ は、背景の色を指定します。 <body> タグに書きますと、背景全体がその色になります。

例 4.5 
<h2 style="color: white; background-color: teal">
講演スケジュール
</h2>
講演スケジュール

4.2.5 枠のプロパティ

CSSでは、見出しや段落などほとんどの要素に対して、それが長方形の(透明な)枠の中に配置されると考えます。 この枠は、

から構成されます。 これらのイメージは次の通りです。

+-------------------------+
|margin                   |
|  +-------------------+  |
|  |border             |  |
|  |  +-------------+  |  |
|  |  |padding      |  |  |
|  |  |  +-------+  |  |  |
|  |  |  |       |  |  |  |
|  |  |  +-------+  |  |  |
|  |  |             |  |  |
|  |  +-------------+  |  |
|  |                   |  |
|  +-------------------+  |
|                         |
+-------------------------+

例えば、 <blockquote> タグを使って引用を表した場合、表示では左右に余白が設けられました。 この余白がマージンになります。

border-widthプロパティ

border-widthプロパティ は、ボーダーの太さを指定します。 thinthick などのキーワードの他に、 1px などの長さでも指定できます。

表 4.8  ボーダーの太さ
プロパティと値 種類
border-width: thin 細い
border-width: medium 普通
border-width: thick 太い
border-width: 1px 1ピクセル

border-colorプロパティ

border-colorプロパティ は、ボーダーの色を指定します。 上記のカラー・ネームを用いるのがよいでしょう。

border-styleプロパティ

border-styleプロパティ は、ボーダーの種類を指定します。

表 4.9  ボーダーの種類
プロパティと値 種類
border-style: none なし
border-style: solid 実線
例 4.6 
<h2 style="color: white;
           background-color: teal;
           border-width: thick;
           border-color: olive;
           border-style: solid">
講演スケジュール
</h2>
講演スケジュール

margin-topプロパティ

margin-topプロパティ は、上のマージンを指定します。 この値を 32px にしますと、上に32ピクセルのマージンが確保されます。

margin-rightプロパティ

margin-rightプロパティ は、右のマージンを指定します。 この値を 32px にしますと、右に32ピクセルのマージンが確保されます。

margin-bottomプロパティ

margin-bottomプロパティ は、下のマージンを指定します。 この値を 32px にしますと、下に32ピクセルのマージンが確保されます。

margin-leftプロパティ

margin-leftプロパティ は、左のマージンを指定します。 この値を 32px にしますと、左に32ピクセルのマージンが確保されます。

例 4.7 
<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プロパティ

padding-topプロパティ は、上のパディングを指定します。 この値を 32px にしますと、上に32ピクセルのパディングが確保されます。

padding-rightプロパティ

padding-rightプロパティ は、右のパディングを指定します。 この値を 32px にしますと、右に32ピクセルのパディングが確保されます。

padding-bottomプロパティ

padding-bottomプロパティ は、下のパディングを指定します。 この値を 32px にしますと、下に32ピクセルのパディングが確保されます。

padding-leftプロパティ

padding-leftプロパティ は、左のパディングを指定します。 この値を 32px にしますと、左に32ピクセルのパディングが確保されます。

例 4.8 
<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>
講演スケジュール

4.3 演習4

はじめに、歴史上の人物や有名人を例にならって3人(以上)選び、簡単な説明文を考えてください。 次に、名前と説明文を定義リストにまとめます。

<dl>
  <dt>パスカル</dt>
  <dd>
    歯車式の計算機械を作った人。
    加減算ができた。
  </dd>
  <dt>ライプニッツ</dt>
  <dd>
    四則演算ができる歯車式計算機を作った人。
  </dd>
  <dt>バベッジ</dt>
  <dd>
    現在の計算機の原型を設計した人。
    計算機は完成しなかった。
  </dd>
</dl>
パスカル
歯車式の計算機械を作った人。 加減算ができた。
ライプニッツ
四則演算ができる歯車式計算機を作った人。
バベッジ
現在の計算機の原型を設計した人。 計算機は完成しなかった。

そして、 style 属性を使って背景と枠に色を付け、枠、名前、説明文のそれぞれの間に余白を入れてください。

パスカル
歯車式の計算機械を作った人。 加減算ができた。
ライプニッツ
四則演算ができる歯車式計算機を作った人。
バベッジ
現在の計算機の原型を設計した人。 計算機は完成しなかった。

4.4 レポート課題

今日の演習4に従ってホームページを作成し、そのファイル名をkonishi@twcu.ac.jpあてにメールで報告してください。 メールには、学生番号、氏名、科目名、授業の日付け(5/9)を明記してください。


4.5 参考資料

CSSについて本格的に勉強したければ、以下のホームページを参考にするとよいでしょう。

CSSレベル1(英語)
http://www.w3.org/TR/REC-CSS1
CSSレベル1(翻訳)
http://www.w3.org/Style/css1-updates/translations
CSSレベル2(英語)
http://www.w3.org/TR/REC-CSS2

CSSは1996年にレベル1が勧告段階(recommendation)となり、1998年にレベル2が勧告段階になりました。 現在はレベル3の開発段階となっています。


[小西ホームページ]   [目次・索引]   [前の授業]   [次の授業]

2002年5月9日更新
konishi@twcu.ac.jp
Copyright (C) 2002 Zenjiro Konishi. All rights reserved.