roy > naoya > カスケーディングスタイルシート（CSS）
カスケーディングスタイルシート（CSS）
htmlとCSS
html言語で書かれたファイルをブラウザで閲覧することで、タグが解釈され図や表、ハイパーリンク等を表示することが可能となった。htmlの狙いはどこにいても、どのようなコンピュータ環境であっても、ネットワークにつながりさえすれば、同じ情報を入手、伝達できるというものである。
かつてはhtmlのタグの中には、文字の色や大きさを変える<font>タグや下線を引く<u>タグ等、単に見栄えを規定するものが含まれていた。現在はこれらのタグは非推奨要素とされ、Strict.dtdではそもそも利用できない。
見栄えを規定する要素を使用するべきではない理由を考えるにあたり、以下のような状況でWebページを閲覧している人について考えてみよう。
- 白黒のディスプレイを用いている
- 画面の小さいディスプレイを用いている
- テキストブラウザを用いている（画像が表示できない、文字の大きさを変更できない）
- 読み上げブラウザを用いている（視覚障害者、画像や色が見えない）
- 携帯電話で見ている（文字の大きさを変えられない）
こうした様々な閲覧方法がある中で、文章中の特定の部位が重要であることをどのように示せばよいだろうか。いくつか例を挙げてみよう。
| 要素名 | 使用例 | 用法 |
|---|---|---|
| big | ここはとても重要です | <big>重要</big> |
| font | ここはとても重要です | <font color="red" size="+2">重要</font> |
| i | ここはとても重要です | <i>重要</i> |
| b | ここはとても重要です | <b>重要</b> |
| u | ここはとても重要です | <u>重要</u> |
我々が目で見た場合、これらはいずれも重要であることがわかる。しかし、本来、赤色や下線、太字に重要であるという意味はない。それを見た人が勝手に重要であると判断しているに過ぎない。
このような方法はあまりよろしくない。というのも、白黒のモニタでは赤色は表現できないし、読み上げブラウザでも文字の色や下線を表現できない。携帯電話の場合は文字の大きさを変えることができないこともある。
この結果として、こうした環境下でWebページを閲覧している人に対して、重要であるという情報を伝達することができなくなってしまうのである。重要であることを伝えるためには、特定の部位を強調する<strong>タグや<em>タグを用いるのがよい。これにより、コンピュータは当該部位が強調されていると解釈できるため、何らかの表現方法（大きな声で読むとか、少し間を空けて読むとか）を用いて他の部分との差別化をはかることができる。
現在htmlは文章の構造を表すために用いられ、文章の見栄えを指定するためにhtmlは使用してはならないと規定されている。文章の見栄えを指定するのがCSS（カスケーディングスタイルシート）である。
CSS
CSSによるデザインの指定にはいくつかの方法があるが、ここでは1種類だけ取り上げて説明する。
これまで作成してきたindex.htmlとclass.htmlでは<head></head>の間に次のような部分があった。これがCSSであり、ここでデザインの指定をしている。
<style type="text/css">
<!--
body {
background-color: #ffccff
}
h1 {
color: #cc0066
}
address {
text-align: right
}
.normal {
font-style: normal;
font-weight:bold
}
-->
</style>
CSSを指定する際の基本構造は次の通り。
CSSの指定方法
要素名 {プロパティ1:値; プロパティ2:値}
例えば
h1 {
color: #cc0066
}
はh1要素にcolorというプロパティを設定したもので、<h1>タグを使用した場合には、自動的に#cc0066という色にせよという指示をしている。なお、書き方について、上に書いたものは
h1 {color: #cc0066}
というように1行で書いても良い。また、複数のプロパティを指定する場合は、セミコロンでつないで示す。
h1 {
color: #cc0066;
text-decoration: underline
}
または
h1 {color: #cc0066; text-decoration: underline}
となる。text-decoration: underlineは下線を引けという指示、font-style: italicは文字をイタリック体（斜体）にせよという指示になる。
いくつかCSSの適用例を見てみよう。いずれも<h3>はじめに</h3>と書いている。
| 表示結果 | CSSの指定 |
|---|---|
はじめに |
CSS指定なし |
はじめに |
h3 {color: #cc0066} |
はじめに |
h3 {text-decoration: underline} |
はじめに |
h3 {color:#0000ff; font-style: italic} |
はじめに |
h3 {background-color: #ffcccc} |
class属性を用いたCSSの指定
これまで見てきた方法は、特定のタグを使用する際には全て共通のスタイルを適用するという方法である。しかし、場合によっては特定の場面でのみスタイルを適用したいということもある。このような時に使用するのがclass属性である。スタイルを指定する際に
class属性を用いたCSSの指定方法
.hoge {プロパティ1:値; プロパティ2:値}
というように、.○○という名称でスタイルを指定する。ここでは.hogeとしているが、名称は何でも良い。{}内のスタイルの指定方法はこれまでと同じである。その上で、
html内でのclass属性の使用
<要素 class="hoge">〜</要素>
というように、開始タグにclass属性を追加する。この際、.hogeの先頭の.(ドット)は記載しない。いくつかclass属性を用いたCSSの適用例を見てみよう。いずれも<h3>はじめに</h3>と書いている。
| 表示結果 | CSSの指定 |
|---|---|
はじめに |
CSS指定なし |
はじめに |
.green {color: #00ff00}として <h3 class="green">はじめに</h3> |
はじめに |
.hogehoge {text-decoration: line-through}として <h3 class="hogehoge">はじめに</h3> |
はじめに |
h3 {background-color: #ccccff} .red {color: #ff0000}として <h3 class="red">はじめに</h3> |
はじめに |
h3 {background-color: #ccccff} .yellow {background-color: #ffff66; color: #ff0000}として <h3 class="yellow">はじめに</h3> |
上から4つ目の例では、h3要素へのスタイルとして水色の背景色を指定し、redというclassで赤色文字を指定している。この場合、要素に指定したスタイルとclassに指定したスタイルがいずれも適用される。
一番下の例ではh3要素へのスタイルとして水色の背景色を指定し、yellowというclassで赤色文字と背景色黄色を指定している。背景色の指定が要素とclassで競合しているが、要素に指定したスタイルとclassで指定したスタイルが競合する場合はclassで指定したスタイルが優先される。
色の指定方法について
色の指定は"red"や"blue"などの具体的な名称か、#ff0000のような形式で指定する。後者はR（赤）G（緑）B（青）の混色で色を表現するもので、#ff0000は先頭の2桁がR、中間の2桁がG、最後の2桁がBを指定している。ffは16進法で255をあらわすものである。RGBそれぞれについて00からffまでの256段階で光の強さを調整し、これらを混ぜた色を表示させている。#ff0000であれば、Rの強さが256、GとBは0なので、赤色が表示される。
具体的な色名で指定することができる色は下記の16色のみとなる。それ以外の色も表示できる場合があるが、環境によって異なる色になる場合があるため、使用は避けるのが無難である。
| black | silver | gray | white |
| maroon | red | purple | fuchsia |
| green | lime | olive | yellow |
| navy | blue | teal | aqua |
#ff0000のような方法による色指定では、2563種類の色を表すことができる。ただし、多くの色は環境によって表示される結果が異なってしまう。どのような環境でも共通して表示することができる216色をWeb Safe Colorと呼ぶ。以下がそのリストとなる。
| #000000 | #003300 | #006600 | #009900 | #00cc00 | #00ff00 |
| #000033 | #003333 | #006633 | #009933 | #00cc33 | #00ff33 |
| #000066 | #003366 | #006666 | #009966 | #00cc66 | #00ff66 |
| #000099 | #003399 | #006699 | #009999 | #00cc99 | #00ff99 |
| #0000cc | #0033cc | #0066cc | #0099cc | #00cccc | #00ffcc |
| #0000ff | #0033ff | #0066ff | #0099ff | #00ccff | #00ffff |
| #330000 | #333300 | #336600 | #339900 | #33cc00 | #33ff00 |
| #330033 | #333333 | #336633 | #339933 | #33cc33 | #33ff33 |
| #330066 | #333366 | #336666 | #339966 | #33cc66 | #33ff66 |
| #330099 | #333399 | #336699 | #339999 | #33cc99 | #33ff99 |
| #3300cc | #3333cc | #3366cc | #3399cc | #33cccc | #33ffcc |
| #3300ff | #3333ff | #3366ff | #3399ff | #33ccff | #33ffff |
| #660000 | #663300 | #666600 | #669900 | #66cc00 | #66ff00 |
| #660033 | #663333 | #666633 | #669933 | #66cc33 | #66ff33 |
| #660066 | #663366 | #666666 | #669966 | #66cc66 | #66ff66 |
| #660099 | #663399 | #666699 | #669999 | #66cc99 | #66ff99 |
| #6600cc | #6633cc | #6666cc | #6699cc | #66cccc | #66ffcc |
| #6600ff | #6633ff | #6666ff | #6699ff | #66ccff | #66ffff |
| #990000 | #993300 | #996600 | #999900 | #99cc00 | #99ff00 |
| #990033 | #993333 | #996633 | #999933 | #99cc33 | #99ff33 |
| #990066 | #993366 | #996666 | #999966 | #99cc66 | #99ff66 |
| #990099 | #993399 | #996699 | #999999 | #99cc99 | #99ff99 |
| #9900cc | #9933cc | #9966cc | #9999cc | #99cccc | #99ffcc |
| #9900ff | #9933ff | #9966ff | #9999ff | #99ccff | #99ffff |
| #cc0000 | #cc3300 | #cc6600 | #cc9900 | #cccc00 | #ccff00 |
| #cc0033 | #cc3333 | #cc6633 | #cc9933 | #cccc33 | #ccff33 |
| #cc0066 | #cc3366 | #cc6666 | #cc9966 | #cccc66 | #ccff66 |
| #cc0099 | #cc3399 | #cc6699 | #cc9999 | #cccc99 | #ccff99 |
| #cc00cc | #cc33cc | #cc66cc | #cc99cc | #cccccc | #ccffcc |
| #cc00ff | #cc33ff | #cc66ff | #cc99ff | #ccccff | #ccffff |
| #ff0000 | #ff3300 | #ff6600 | #ff9900 | #ffcc00 | #ffff00 |
| #ff0033 | #ff3333 | #ff6633 | #ff9933 | #ffcc33 | #ffff33 |
| #ff0066 | #ff3366 | #ff6666 | #ff9966 | #ffcc66 | #ffff66 |
| #ff0099 | #ff3399 | #ff6699 | #ff9999 | #ffcc99 | #ffff99 |
| #ff00cc | #ff33cc | #ff66cc | #ff99cc | #ffcccc | #ffffcc |
| #ff00ff | #ff33ff | #ff66ff | #ff99ff | #ffccff | #ffffff |
大きさや長さの単位について
大きさや長さをあらわす単位には相対単位と絶対単位がある。
- px(相対単位）：ピクセル単位で指定する。ディスプレイは粒（ピクセル）の集合体によって構成されているが、その最小単位のピクセル数で表現する。コンピュータのディスプレイの解像度によって大きさは変化する。
- em（相対単位）：デフォルトのフォントサイズを1とする単位。
- ex（相対単位）：デフォルトのフォントのx-heightを1とする単位。アルファベットにはhのように上に突き出るもの、pのように下に突き出るものがあるが、aのように上下に突き出ないものもある。このaの高さをx-heightという。
- cm（絶対単位）：センチメートル
- mm（絶対単位）：ミリメートル
- in（絶対単位）：インチ（1インチ=2.54cm）
- pt（絶対単位）：ポイント（1pt=1/72インチ）
- pc（絶対単位）：パイカ（1pc=12ポイント）
その他に%を使用できる場合もある。
CSSのプロパティについて
CSSのプロパティは多数ある。全てを網羅的に紹介しても使いこなすのは難しいので、ここではよく使われるプロパティを中心に説明する。より詳しく知りたい場合は以下のページを参照して欲しい。
背景と色
文字色（color）
colorは文字色を指定するプロパティである。具体的な色名で指定できる16色か、Web Safe Colorを指定する。
- p {color:#cc66ff} として
<p>#cc66ffにしてみました</p>
#cc66ffにしてみました - .fuchsia {color:fuchsia} として
<p class="fuchsia">fuchsiaにしてみました</p>
fuchsiaにしてみました
背景色（background-color）
background-colorは背景色を指定するプロパティである。ページ全体の背景に色を指定するためにはbody要素に対してbackground-colorの指定をする。<p>タグや<h1>タグに背景色を指定することもできる。
- p {background-color: #ffcccc} の場合
<p>背景色を黄色に</p>
背景色を黄色に - p {background-color: #000000; color: #ffffff} として
<p>やこんな風に白黒反転させることもできます。</p>
こんな風に白黒反転させることもできます。
背景画像（background-image）
background-imageは背景に画像を指定するプロパティとなる。background-imageを使用する場合は、あらかじめ画像を準備してpublic_htmlの中に保存しておく必要がある。ページ全体の背景に画像を指定するためにはbody要素に対してbackground-imageの指定をする。
- .image {background-image: url(orange.jpg)} として
<p class="image">背景に画像を使用することもできます。</p>
背景に画像を使用することもできます。 - body {background-image: url(back.png)} とした場合
背景画像の繰り返し（background-repeat）
background-repeatは背景画像の並べ方を指定するプロパティである。次の4種類の値を指定することができる。ここでは以下のようにrepeat-yを指定している。
body {background-image:url(back.png); background-repeat:repeat-y}
- no-repeat：くり返されず1回だけ表示される
- repeat：縦横に繰り返し表示される
- repeat-x：横方向のみくり返して表示される
- repeat-y：縦方向のみくり返して表示される
フォント関連
フォントのサイズ（font-size）
font-sizeは文字の大きさを指定するプロパティである。7段階の大きさを値として指定することができる。デフォルトの文字サイズはmediumとなる。その他に10ptや1emなど具体的な値を指定することもできる。
- xx-smallにした場合
- x-smallにした場合
- smallにした場合
- mediumにした場合
- largeにした場合
- x-largeにした場合
- xx-largeにした場合
文字を斜体に（font-style）
font-styleは文字を斜体にするプロパティである。normalにすると標準フォントとなり、italicにすると斜体になる。
- p {font-style:italic} として
<p>斜体にしました</p>
斜体にしました - .normal{font-style:normal} として
<em class="normal">emタグは通常斜体です</em>
emタグは通常斜体です
文字の太さ（font-weight）
font-weightは文字の太さを指定するプロパティである。normalが通常の太さ、boldにすると太字になる。
- p {font-weight:bold} として
<p>太字にしました</p>
太字にしました - .normal{font-weight:normal} として
<strong class="normal">strongタグは通常太字です</strong>
strongタグは通常太字です
テキスト関連
下線を引く（text-decoration）
text-decorationプロパティは下線やその他の種類の線を引くことができる。
- text-decoration:underline
値にunderlineを指定しました - text-decoration:line-through
値にline-throughを指定しました - text-decoration:overline
値にoverlineを指定しました
行間を広げる（line-height）
line-height:normal
line-heightプロパティを指定すると文章が読みやすくなる場合があります。ある程度行間は広いほうが読みやすいですが、逆に広くなりすぎると読みにくくなります。1行の文字数が少ない場合は狭いほうが読みやすいですが、文字数が多い場合はある程度広くしたほうが良いと思います。どれが一番読みやすいか比較してみましょう。
line-height:1.5（通常の1.5倍）
line-heightプロパティを指定すると文章が読みやすくなる場合があります。ある程度行間は広いほうが読みやすいですが、逆に広くなりすぎると読みにくくなります。1行の文字数が少ない場合は狭いほうが読みやすいですが、文字数が多い場合はある程度広くしたほうが良いと思います。どれが一番読みやすいか比較してみましょう。
line-height:2（通常の2倍）
line-heightプロパティを指定すると文章が読みやすくなる場合があります。ある程度行間は広いほうが読みやすいですが、逆に広くなりすぎると読みにくくなります。1行の文字数が少ない場合は狭いほうが読みやすいですが、文字数が多い場合はある程度広くしたほうが良いと思います。どれが一番読みやすいか比較してみましょう。
行揃え（text-align）
text-alignプロパティを指定すると、右揃えや中央揃えを指定することができる。
- 左揃え：text-align:left
- 中央揃え：text-align:center
- 右揃え：text-align:right
左揃えにしました
中央揃えにしました
右揃えにしました
1行目のインデント（text-indent）
text-indentは文章の1行目のインデントを指定するプロパティである。原稿用紙と同じく1文字字下げするためには、text-indent:1emとする。emはデフォルトの文字サイズという意味である。
text-indent:0
インデントをすると、1行目を字下げすることができます。通常文章を書く場合は先頭を1文字インデントしますので、設定をしておくと良いでしょう。
text-indent:1em
インデントをすると、1行目を字下げすることができます。通常文章を書く場合は先頭を1文字インデントしますので、設定をしておくと良いでしょう。
text-indent:3em
インデントをすると、1行目を字下げすることができます。通常文章を書く場合は先頭を1文字インデントしますので、設定をしておくと良いでしょう。
文字の間隔（letter-spacing）
letter-spacingプロパティを指定すると、文字と文字の間隔を指定することができる。
- p {letter-spacing:normal} として
<p>通常の文字間隔です</p>
通常の文字間隔です - p {letter-spacing:0.2em} として
<p>文字間隔を0.2emにしました</p>
文字間隔を0.2emにしました - p {letter-spacing:1em} として
<p>文字間隔を1emにしました</p>
文字間隔を1emにしました