代表的な可変スタイル

よく使うと思われるスタイルを示す。色や大きさなどふくめた変えられる性質全体のことを「プロパティ」と呼ぶ。

文字色

color: テキストの色を指定する。

指定例

h1, h2要素をそれぞれ青、緑にする場合は次のようなスタイルを定義する。

(color.cssというファイルだと仮定)

h1 {color: blue;}
h2 {color: green;}

するとh1要素とh2要素の色が変わる(見本)。

色として利用できるものを列挙したのが以下の表である。

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

また、色を数値化して表現する方法があり、これを利用すると名前のわからない色も指定することができる。たとえば、yellw(黄色)は数値(16進数)で表すと ffff00である。このような場合色の名前の代わりに、数値に #をつけて、#ffff00とすればよい。つまり、

h3 {color: #ffff00;}

とするとh3要素に黄色を指定したことになる。

その他の色を使いたい場合、 http://www.tagindex.com/color/color_name.html のカラーチャートを参考にし、16進数を指定する。

文字

文字の体裁を変えるプロパティとして、font-family, font-style, font-variant, font-weightがあるが、あまり日本語(漢字)文化に即した効果が期待できないのでここでは説明を省略する。

文字の大きさはfont-sizeプロパティで変更できる。

font-size

文字の大きさを指定する。指定方法には絶対指定と相対指定がある。ポスター的な用途を狙うものならば絶対指定を用いてもよいが、「より大きく」することを狙って文字サイズを変える場合は相対指定を利用しなければ期待した結果を得られないことがある。サイズを指定するキーワードには以下のものがある。

xx-small - とても小さく
x-small - より小さく
small - 小さく
medium - 普通サイズ
large - 大きく
x-large - より大きく
xx-large - とても大きく

また、現在の文字サイズの何パーセントの大きさの文字にするかを指定することもできる。たとえば、

em {font-size: 200%;}

と定義しておくと本文中で

ぼくは<em>元気</em>です!

と書くことで「ぼくは」の部分の文字の大きさがどんなサイズであろうと「元気」はその2倍の大きさで表示されることになる。

ぼくは元気です!

背景

文書全体や要素ごとの背景の色を変えたり、画像を貼り付けたりすることができる。代表的なプロパティには以下のものがある。

background-color

要素の背景の色を指定する。使える色は文字の色で説明したものと同じ。body要素の background-color を指定すると、ページ全体の背景色になる。

【例】
body {background-color: lime;}
とするとページの背景色がlimeとなる。

background-image

要素の背景を埋める画像ファイルを指定する。画像ファイルの指定は

url(ファイル名)

のようにする。たとえば、ページ全体の背景を foo.jpg という画像ファイルにしたい場合は

body {background-image: url(foo.jpg);}

とする。

→背景画像の例

background-repeat

背景画像をどのように配置するかを指定する。配置方法の指定には以下のキーワードがある。

repeat
上下左右方向にくり返して背景画像を配置する。
repeat-x
x軸(横)方向だけにくり返して背景画像を配置する。
repeat-y
y軸(縦)方向だけにくり返して背景画像を配置する。
no-repeat
くり返し無しで一回だけ背景画像を配置する。

たとえば

という画像(bar.jpg)をy軸(縦)方向だけにくり返して背景画像として貼り付ける場合、スタイル指定に


body {background-image: url(bar.jpg);
      background-repeat: repeat-y;}

と書くとページ全体の背景は以下のようになる。

テキスト

文字装飾や字下げの指定を行なうプロパティの代表的なものを挙げる。

text-decoration

文字に掛ける装飾を指定する。指定できる装飾を表すキーワードには以下のものがある。

none
装飾なし(通常どおり)
underline
テキストに下線引く
overline
テキストに上線を引く
line-through
テキストに字消し線を引く

text-align

テキストの行揃えを指定する。パラグラフ(p要素)などのブロックレベル要素でのみ指定できる。 p要素以外のブロックレベル要素一覧は WDG: HTML参考書-HTML4.0要素を参考にするとよい。

行揃えを指定するキーワードは以下のとおり。

left

左揃えを指定する。これは通常の表示方法である。

right

右揃えを指定する。文字の右端が揃うように表示される。
【例】

   :
  略 (以下head要素内)
<style type="text/css">
<!--
 p.r {text-align: right;}
-->
</style>
   :
  略
   :
<body>
<p class="r">君が代は 千代に八千代に<br>
さざれ石の 巌となりて<br>
こけの むすまで</p>
   :

↓

君が代は千代に八千代に
さざれ石の巌となりて
こけのむすまで

center

中央揃え(センタリング)を指定する。
【例】

   :
  略 (以下head要素内)
<style type="text/css">
<!--
 p.c {text-align: center;}
-->
</style>
   :
  略
   :
<body>
<p class="c">君が代は 千代に八千代に<br>
さざれ石の 巌となりて<br>
こけの むすまで</p>
   :

↓

君が代は千代に八千代に
さざれ石の巌となりて
こけのむすまで

センタリングはよく使いたいレイアウトの一つなので、head要素で

   :
  略 (以下head要素内)
<style type="text/css">
<!--
 .c {text-align: center;}
-->
</style>

と定義しておき、センタリングしたい要素で class="c"として定義を利用するとよい。画像をセンタリングしたければ、

<p class="c">
<img src="foo.jpg" alt="fooの絵">
</p>

とするとよい。

ボックス

ページが表示されるときの位置はボックスと呼ばれる箱状のレイアウトを基準に決定される(下図)

Box

それぞれの間隔をミリ単位、ピクセル単位、画面や文字の幅に対する相対尺度などで指定できる(長さの指定方法)。

以下で説明するプロパティはブロックレベル要素でのみ自由に設定することができる。

margin-top, margin-right, margin-bottom, margin-left

それぞれ上図の margin の、上、右、下、左の幅を指定する。

padding-top, padding-right, padding-bottom, padding-left

それぞれ上図の padding の、上、右、下、左の幅を指定する。

border-top-width, border-right-width, border-bottom-width, border-left-width

それぞれ上図の border の、上、右、下、左の太さを指定する。pxなどの長さ指定のほか、

thin - 細い
medium - ふつう
thick - 太い

という指定も可能。

border-color

borderの色を指定する。

border-style

borderのスタイルを指定する。スタイルには以下のものが指定できる。

none
枠線なし
dotted
点線
dashed
破線
solid
実線
double
二重線
groove
くぼみ風
ridge
でっぱり風
inset
全体くぼみ風
outset
全体でっぱり風

width, height

それぞれボックスのテキスト部分の、幅、高さ、を指定する。

その他

その他のプロパティについては CSSの主なプロパティ(kanzaki.com)を参考にするとよい。

情報リテラシー