スタイル変更の第一歩

テンプレートの作成

必要なヘッダを含んだ文書が空のファイルを作っておくと便利である。 ~/public_html/template.htmlを新規に作成し、以下の内容を作成しておくとよいだろう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>たいとる</title>
<style type="text/css">
<!--
文書内スタイル定義を書く
-->
</style>
<link rel="stylesheet" type="text/css" href="ほげ.css">
</head>

<body>
<h1>大見出し</h1>
<p></p>

<address>gombei@x.koeki-u.ac.jp</address>

</body>
</html>

色を変えた部分は自分専用に、あるいは新規文書作成ごとに書き換えて使用する。

新しく文書を作るときには以下の2つのうちどちらかの手順を取るとよいだろう。

新規ファイルを開いてからテンプレートを取り込む
C-x C-f で新しいファイル名を入力し、からっぽの状態で C-x i をタイプして ~/public_html/template.html を指定する。
~/public_html/template.htmlを開いて別名で保存する
先に~/public_html/template.htmlを開き、すぐに C-x C-w をタイプして別の名前で保存する。

間違って template.html を上書きしないよう、 template.html を作るときに C-x v v でチェックインして書き込み禁止にしておくとよいだろう。

代表的な特性の設定

body, h1, h2 の各要素すべて、クラス指定したp要素、span要素のみ、という組み合わせでスタイル指定を行なう実際の文書を作成してみよう。

利用する特性

ここでは色と文字装飾を変えてみる。文字色は color 特性、背景色は background 特性で指定する。

color 特性

要素のテキストの色を決定する。次の記述は em 要素のテキストを青にする指定となる。

em {color: #00f}

background 特性

要素の背景を指定する。背景画像なども指定できるがここでは背景色のみ指定する方法を示す。

em {background: rgb(255,0,0)}

この例は全てのem要素の背景色を赤にする。

色を指定する記法は決まっていて、キーワード、またはRGBの数値指定のどちらかで行なう。これについては次節で解説する。

文字装飾は text-decoration 特性で指定する。

text-decoration 特性

テキストに付加される装飾を決定する。利用できる値は以下のものがある。

none
装飾なし
underline
下線を引く
overline
上線を引く
line-through
取消線(中央線)を引く
blink
点滅させる。ただし、サポートされない場合もありうる。

文字の配置は text-align 特性で指定する。

text-align 特性

ブロック要素の内容の配置を指定する。

left
左揃え
right
右揃え
center
中央揃え
justify
両端揃え

色

色指定キーワード

直接色の名前を指定してよいのは以下の16色である。

aqua	black	blue	fuchsia
gray	green	lime	maroon
navy	olive	purple	red
silver	teal	white	yellow

RGB色モデル指定

光の三原色 Red, Green, Blue の強さの比率の組み合わせで表現する。指定方法は16進直接指定(6桁or3桁)、関数的記法(8ビット or パーセンテージ)の4通りの組み合わせがある。

16進直接6桁指定
#に続けて各色の強さを2桁の16進数(00～FF)で表したものを3つ(全6桁)、r、g、bの順で並べる。

h1 {color: #ff00ff}

は、h1要素の文字色を、赤=FF(最大)、緑=00(なし)、青=FF(最大)、の合成色、つまり紫とする。
16進直接3桁指定
#に続けて各色の強さを1桁の16進数(0～F)で表したものを3つ(全3桁)、r、g、bの順で並べる。

h1 {color: #0ff}

は、h1要素の文字色を、赤=0(なし)、緑=F(最大)、青=F(最大)、の合成色、つまり水色とする。3桁指定は各桁の16進数値を2つ続けた6桁の指定と同じになる。つまり、

#24f

という3桁指定は、

#2244ff

と同じ色となる。
関数的記法
RとGとBの3つの数値をカンマで区切ったものを rgb( と )で括る。各数値は 0～255の10進数か、0%～100%のパーセンテージで指定する。以下の4つは同じ色(白)の指定である。
```
h2 {color: white;}
h2 {color: #ffffff;}
h2 {color: rgb(255,255,255);}
h2 {color: rgb(100%, 100%, 100%);}
```

設定例

h1要素を「中央揃え、背景色黄、文字色青」、h2要素を「下線装飾、文字色緑」、p要素を「背景色 ivory」にする例は以下のとおり。

～～ 略 ～～
<head>
<title>foo</title>
<style type="text/css">
<!--
h1 {
  text-align: center;
  background: yellow;
  color: blue;
}
h2 {
  text-decoration: underline;
  color: green;
}
p {background: rgb(255,255,240)}
-->
</style>
</head>
～～ 略 ～～

ivoryという色は標準16色にないので、rgb値で指定する。英語での色名が分かっているときにそのrgb値を調べるには /usr/X/lib/X11/rgb.txt を参照するとよい。

(rgb.txtを全部見る場合)
% less /usr/X/lib/X11/rgb.txt
(SPC b j kで操作し、qで抜ける)

(必要な行だけ探す場合)
% grep -i ivory /usr/X/lib/X11/rgb.txt
255 255 240             ivory
255 255 240             ivory1
238 238 224             ivory2
205 205 193             ivory3
139 139 131             ivory4

rgb.txt は利用するシステムによって置いてある場所が異なる。 /usr/X11R6/lib/X11/rgb.txt の場合もある。

視覚的に色を選び、そのrgb値を知るには GIMP を利用するとよい。

% gimp &

GIMP道具箱の色選択パネル

GIMP ToolBox

をクリックして現れる色選択画面で好きな色を選ぶ。[GMIP]タブの色選択ウィンドウの右下に16進6桁のrgb値が表示される。ここをトリプルクリックするとそのrgb値がコピーされるので、Emacsで C-y によりヤンクする。

GIMPで選んだ好きな色は、GIMPの色パレットに保存しておくとよい。色パレットはGIMPウィンドウ内で C-p を押すか、GIMP道具箱の「ファイル(F)→ダイアログ→色パレット」を選ぶ。

yuuji@koeki-u.ac.jp