もくじ

せめて色をつけよう

スタイルシート

これから学ぶのはカスケーディングスタイルシートといいます。CSSと略します。W3CのHTML4.0から取り入れられた手法で、画像などを利用しなくてもかなりの見栄えを確保し、なおかつ指定も易しく、文章の内容もわかりにくくならない優れた方法です。

文章内の役割をタグで表し、見栄えをスタイルシートにまかせます。文章はそのままで、スタイルシートだけを取り替えて全く違う見栄えにすることができます。

CSSの書き方

カスケーディングスタイルシート(以下CSS)はタグごとに見栄え(以下スタイル)を指定します。指定の方法はいくつかありますが、最も簡単なヘッドの部分に書くやり方からはじめます。

例えば次のように指定します。

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>情報で学んだこと</title>
<style type="text/css">
 h1 {color:blue; }
 h2 {color:green;  background-color:palegreen; }
 p  {color:teal; }
 body {background-color:ivory; }
</style>
</head>

書く場所を確保

スタイルシートは head の部分に、<style></style> で挟んで記述します。

最初のタグに type="text/css" を入れてテキストで書かれたcssの形式のものであると宣言します。将来にもっとよい方法が考えられたときはここを書き換えて対応できます。

<style type="text/css">

スタイルシートの指示がここに入る

</style>

スタイルシートの指示の仕方

基本的にCSSの設定は、以下のような書式で行われます。

セレクタ {属性 : 値}

例えばこのように書きます。

h1 { color : blue }
h1 タグについては 色(color) を 青(blue)にする

複数の指定をするときは ; (セミコロン)でくぎって書きます。

h2 {color:green;  background-color:palegreen }
h2 タグについては
    色(color)を緑(green)にし、背景色(background-color)を薄緑(palegreen)にする。

最後の ; (セミコロン)はいらないのですが、書いてもかまいません。

h2 {color:green;  background-color:palegreen; }

書式の自由

改行や半角スペースは無視されますから工夫すると見やすく書けます。つぎの2つの書き方は全く同じ意味になります。

 h2  {color:green; background-color:palegreen; }
 h2 {
   color: green;
   background-color: palegreen;
 }

指定する属性が多くなると下の書き方の方が人間にとって見易くなります。ただし全角スペースは絶対にいれないこと

ここで使ったCSSの全部の説明

h1 {color:blue; }
h1 の 色を blue にする。
h2 {color:green; background-color:palegreen; }
h2 の 色を green にし、背景色を palegreen にする。
p {color:teal; }
p の 色を teal にする。
body {background-color:ivory; }
body の 背景色を ivory にする。

結果はこのようになります

css 適用の効果をイメージ図で表します。下のボタンを押してください。

cssなし  cssあり 

説明図

下のリンクはそれぞれのページにリンクしています。ここに戻るときはブラウザの「もどる」ボタンを使ってください

cssなしのjoho.htmlへ  cssを使ったjoho.htmlへ 

色の種類

HTML 4.0 で定められた色
色名 R G B
white ffffff
silver c0c0c0
gray 808080
black 000000
red ff0000
maroon 800000
yellow ffff00
olive 808000
lime 00ff00
green 008000
aqua 00ffff
teal 008080
blue 0000ff
navy 000080
fuchsia ff00ff
purple 800080
その他の色
色名 R G B
pink ffc0cb
orange ffa500
ivory fffff0
palegreen 98fb98

ウェブページ(Apr.2010)
聖愛中学高等学校
http://www.seiai.ed.jp/
Apr.2002 改訂