HTML 4.01では、レイアウトはスタイルシートで定義するものといわれているとおり、
レイアウトを定義するためにはCSS(Cascading Style Sheet)を用いる。
今後のHTMLの仕様も、それが標準になりつつあることは言うまでもないことだと思う。
ここではそのスタイルシートについて解説していきたいと思う。
<head>
...
<style type="text/css">
<!--
body{
color: white;
background-color: black;
}
div{
color: #ffffff;
background-color: #0000ff;
}
-->
</style>
...
</head>
CSSに限った話ではありませんが、視認性をよくするため、
タブ文字などを入れて位置を調整することもひとつの工夫です。
本当は「color: white;」のように、スペースを空けなくてもいいのですが、
私は慣習的に、わざとスペースを空けています。そのほうが視認性がいいからなのですが、
つめてもタブ文字にしてもかまいませんよ。
(ご察しのとおり全角はNGですが、ブラウザ側に表示させるうえでの関係でわざと全角にしています)
HTML <head> ... <link rel="stylesheet" type="text/css" href="(ファイルURL)"> ... </head>
CSS
body{
color: white;
background-color: black;
}
div{
color: #ffffff;
background-color: #0000ff;
}
CSSのファイル形式は通常「.css」です。実態はただのテキストファイルなので、
CSSとして読み込めるテキストファイルであれば拡張子は何でもいいのです。
※以前、某ホームページスペースの仕様を利用して、「.bmp」とかにしていたこともありました。
ウェブページに非圧縮なBMP形式とか使う意味がわからん。
HTML <head> ... <style type="text/css"> <!-- @import "(ファイルURL)"; --> </style> ... </head>
こういうやり方でスタイルをインポートする方法もあるようですが、HTML側ではあまり使いません。
CSSを外部ファイル化した際に外部ファイル側でこれを挿入するという使い方がほとんどだと思います。
<body style="color: white; background-color: black; "> ... <div style="color: #ffffff; background-color: #0000ff; "> ... </div> ... </body>
属性がstyleであれば、値はスタイルシートの記述方法と同じでおｋです。
順番的にはこれが一番最初にくるので、あえてNo.2からいきます。
CSSを定義したファイルが1つあれば、あとはそれをアクセスするだけでどのページでも反映できますので、
つまり、すべてのページに対して一度に同じ定義をしたい場合に使えます。
編集・修正箇所が一度に澄むのですから、これ以上、楽なことはありません、まずは外部ファイルを作ることを考えましょう。
そしたら次は、ページ単位となります。
そのページにスタイルを直接埋め込む以上、そのページにしか反映されません。
つまり、そのページのみに適用させたい場合はこちらのほうを併用するといいでしょう。
こちらも、そのページすべてのスタイルを編集・修正できるので、楽になると思います。
早い話、廃止されたHTMLタグ代わりのような感じで使います。
つまり、その部分だけに限定して使用したい場合に使えます。
たとえば、どうしても色付けして文字サイズを大きくしてピックアップさせたい場合などに使えます。
また、<font>はなくなったのに<del>とか<h1>とかは残っていますが、
これらはもともと文書を構築する上で必要な部品だから残っているだけです。
特に<h1>などは見出しとして扱われます。
<h1>は特に特にフォントサイズが大きいからといって使うのをためらう方がいらっしゃいますが、
それは非常に大きな間違いです。
こういうタグがあえてフォントが大きく、フォントスタイルが太字に設定されているのは、
ブラウザの開発者の親切心によってそうなっているだけです。
新聞の一面みたいに、わざと大きく太く見えたほうが見出しに見えるからなのです。
ですので、表示をわざと非表示にしたり、別のタグで代用する使い方はよくありません。
大きくなるのが有難迷惑というのであれば、スタイルシートでサイズなどを調節して使用するのが正しい使い方なのです。
スタイルを適用するには、まずはセレクタという概念から説明しなければなりません。
なので、ここではセレクタをメインに取り上げます。
セレクタというのは、まずは、どの要素に対してスタイルを適用するのか、ということです。
わかりやすいように、「セレクタする」という表現方法を使います。この手の用語なので多分動名詞でいいんだろうなと憶測。
要素に対してセレクタします。
要素名{ color: red; }
a{ color: red; }
そう、要素名を書けばいいのですね。
上のaの例では、a要素、つまり、ハイパーリンクすべてにcolor: red;のプロパティが適用されるわけです。
要素名, 要素名{ color: red; }
a, p{ color: red; }
同じスタイルを複数の要素に指定したい場合は「,」で区切ることで複数指定できます。
以下のセレクタも同様で、混在させることもできます。
*{ color: red; }
「*」は全部です。つまり、すべての要素にスタイルを適用します。
後で登場する結合子セレクタで、よく使用されそうです。
特定のクラス名を持つ要素に対してのみセレクタします。
要素名.クラス名{ color: blue; }
div.hogehoge{ color: blue; }
「.」の後に続くキーワードをクラスとして扱います。
上のdiv.hogehogeの例では、div要素の中で、クラス名がhogehogeのものに対してのみcolor: blue;のプロパティが適用されます。
.クラス名{ color: blue; }
.hogehoge{ color: blue; }
個人的には一番よく使うやつです。
要素名が書かれていない場合は、とにかく要素に関係なく、クラス名がhogehogeであればすべての要素に対してスタイルが適用されることを意味します。
HTML <div class="hogehoge">
肝心のクラス名はclass属性を使って設定します。
特定のIDを持つ要素に対してのみセレクタします。
IDですからクラスと違い、1つのページにつき1種類のID名を持つ要素は1つにしなくてはなりません。
要素名#ID名{ color: yellow; }
div#hogehoge{ color: yellow; }
#ID名{ color: blue; }
#hogehoge{ color: blue; }
HTML <div id="hogehoge">
書き方自体はクラスセレクタのときとそこまで大きく変わりありません。
すでにクラスとして内部で定義されているクラスに対してセレクタします。
そのため、定義済みクラスとも呼ばれます。
擬似クラスは「:」を使って表現し、クラス名はすでに定義されている名前を使います。
下記の擬似クラスはあくまで一部です。
| セレクタ(例) | 効果 |
|---|---|
| a:link | 通常のリンクを定義します。body要素のlink属性に相当。 |
| a:visited | 訪問済のリンクを定義します。body要素のvlink属性に相当。 |
| a:active | リンク中のリンクを定義します。body要素のalink属性に相当。 |
| a:hover div:hover | マウスカーソルが乗っかっているときを定義します。 |
| a:focus input:focus textarea:focus | フォーカスが乗っているときの状態を定義します。 フォーカスとは、テキストボックスにカーソルが出ていて入力可能な状態のときとかを表します。 また、リンク文字やチェックボックスなどのフォーム部品に点線がついている状態もフォーカスが乗っかっている状態となります。 (OSによってはその表示がわからない場合もありますが。。。) |
要素名:擬似クラス名{ color: green; }
div{ background-color: black; }
a:link{ color: green; }
a:hover{ color: black; background-color: green; }
HTML <div ～> <a ～>リンク</a> </div>
このようにやると、もともと背景色が黒で、リンク色が緑だったのに、
マウスカーソルがリンクに乗っかったことで、背景色とリンク色が逆転するようになります。
今度は属性に対してセレクタする方法です。
aの振る舞いに、たとえば、<a href="(URL)">というリンクの擬似クラスだけに適用したいのに、
<a name="(名前)">というアンカーにまで同じスタイルが適用するのは避けたい、なんていうときに使えます。
要素名[属性名]{ color: #00ffff; }
a[href]{ color: #00ffff; }
a要素でhref属性を持つ要素だけにセレクタします。
name属性しか持たないものは関係ありません。
img[alt][title]{ border-width: 0px; }
img要素でalt属性とtitle属性の両方を持つ要素だけにセレクタします。
複数の条件も指定できるよということです。
もちろん、要素を省略すると、要素に関係なく、属性だけの指定となります。
[alt][title]{ border-width: 0px; }
ということで、ここまでの総集編。
a[href]:link{ color: #00ffff; }
a[href]:hover{ color: #ff0000; }
a:link.def{ color: #ff0000; }
a[href]:hover.def{ color: #00ffff; }
[readonly]:hover.ge{ color: #00ff00; }
a[href]:hover#hogehoge{ color: #00ffff; }
クラスや擬似クラス(またはID)とを組み合わせると、このように、いくつもの記述方法があります。
属性の値に対してセレクタする方法もあります。
ワイルドカードとか、正規表現とかいうのを知っている人は、
書き方こそ違えど、感覚がわかりそうな記述方式もあったりします。
要素名[属性名="値"]{ color: #00ffff; }
a[href="http://test.domain.jp/"]{ font-size: 40px; }
特定のURLを堂々と強調したい場合にどうぞ。
それはともかく、hrefの値が「http://test.domain.jp/」である要素が対象となります。
要素名[属性名~="値"]{ color: #00ffff; }
[class~="hogehoge"]{ font-size: 40px; }
classの値にhogehogeが含まれている要素が対象です。
この例のように、「~」がついている場合は、値が複数あっても、そのうちのひとつがマッチすればいいという意味を持ちます。
たとえば、マッチするものは以下のものが対象となります。
HTML <p class="hogehoge"> <div class="hogehoge gugeguge"> <span class="gugeguge hogehoge gegegege">
といったことでいきなり複数紹介。
要素名[属性名^="値"]{ color: #00ffff; }
要素名[属性名$="値"]{ color: #00ffff; }
要素名[属性名*="値"]{ color: #00ffff; }
それぞれ、正規表現関連でみるようなメタ文字が含まれています。
「^」は値の先頭部分、「$」は値の終わり部分、「*」は値のどこか、をそれぞれ指します。
つまり、
a[href^="http://test.domain.jp/"]{ font-size: 40px; }
a[href$=".html"]{ color: #00ffff; }
a[href*="test.domain.jp/"]{ font-size: 60px; }
これらの例では上から順に、リンクURLが「http://test.domain.jp/」で始まるもの、
リンクURLが「.html」で終わるもの、
リンクURLのいずれかに「test.domain.jp/」が含まれているもの、をそれぞれ指しています。
以下は該当例。
<a href="http://test.domain.jp/">
→a[href^="http://test.domain.jp/"]{ font-size: 40px; }
a[href*="test.domain.jp/"]{ font-size: 60px; }
が該当する。
<a href="http://hogeweb.com/index.html">
→a[href$=".html"]{ color: #00ffff; }
が該当する。
<a href="//test.domain.jp/test.html">
→a[href$=".html"]{ color: #00ffff; }
a[href*="test.domain.jp/"]{ font-size: 60px; }
が該当する。
上位の要素の中の下位要素にのみマッチする、
といった親と子の関係に基づいてセレクタします。
セレクタ セレクタ{ color: red; }
div span{ color: red; }
これは子孫セレクタと呼ばれます。
div要素の中のspan要素すべてにマッチします。
div要素の中であれば、すべてのspan要素にマッチします。
#hoge #guge{ color: red; }
IDがhogeの要素の中のIDがgugeの要素すべてにマッチします。
div div span{ color: red; }
2つのdiv要素(divが入れ子になっている)の中のspan要素すべてにマッチします。
div要素が1つだけの中のspan要素にはマッチしません。
セレクタ + セレクタ{ color: red; }
div + span{ color: red; }
これは隣接セレクタと呼ばれます。
div要素の中のにある、すぐ次のspan要素にのみマッチします。
すぐ次の該当要素のみが対象であるため、div要素の中のに2つ目・3つ目のspan要素があっても、そちらは無視されます。
セレクタ > セレクタ{ color: red; }
div > span{ color: red; }
これは子セレクタと呼ばれます。
div要素の中のspan要素にのみマッチします。
div要素の子にしか適用されないので、div要素の中のa要素の中にspan要素があっても、そちらにはマッチしません
(間に違うものを入れてはいけない)。
ただ、隣接セレクタと違い、div要素の中のに2つ目・3つ目のspan要素があっても、そちらにも適用されます。
総集編。結合子セレクタは一意に特定しやすいID属性とよく使われているみたいです。
#hoge #guge{ color: red; }
#hoge + #guge{ color: red; }
#hoge > #guge{ color: red; }
div * #hoge > .guge a{ color: red; }