６.CSSの基本
6.1 CSSファイルの作成
CSSファイルはHTMLと同じく、テキストエディタを使用して作成します。保存したファイルの拡張子を.cssにすることで、WebブラウザにCSSファイルとして認識されます。
通常はこのCSSファイルを適用するHTMLファイルと同じサーバー上に保存して、HTMLファイルから参照します。
6.2 CSSの記法
このレッスンでも何度か紹介したように、CSSは「HTML内の○○要素の△△を□□にする」のように記述します。
具体的な例を出すと「p要素の文字色を赤にする」や、「h1要素のマージンを40pxにする」となります。
これらをCSSで記述すると、それぞれ下のようになります。
p {
color: #ff0000;
}
h1 {
margin: 40px;
}
p { color: #ff0000; } h1 { margin: 40px; }
CSSで色を指定するにはウェブカラーを使用します。
ウェブカラーの指定には（上のサンプルコードのように）16進数で指定するほか、色名称で指定することもできます。
上のコード内で要素を指定している箇所（p,h1）を「セレクタ」、スタイルの種類(color,margin)を「プロパティ」、そしてプロパティに対するもの(#ff0000,40px)を「値」と呼びます。
セレクタの後を{ }で囲いプロパティと値のセットを記述します。プロパティの後には:（コロン）を、値の後には;（セミコロン）を書くのを忘れないようにしましょう。
HTMLと同様に、インデントをつけると把握しやすくなります。
セレクタ {
プロパティ: 値;
}
1つのセレクタに対して、複数のプロパティを設定することもできます。
p {
color: #ff0000; /* 文字色 */
font-size: 24px; /* フォントサイズ */
}
h1 {
margin-top: 20px; /* 上部マージン */
margin-bottom: 40px; /* 下部マージン */
}
/*と*/に囲まれた箇所はコメントとして扱われます。
上の例のように行末にコメントを書くだけでなく、複数行にわたって使用することもできます。
/*
ここからヘッダーのスタイル
--------------------------------- */
header {
border: 1px solid #000000; /* ボーダー */
}
/*
ここからフッターのスタイル
--------------------------------- */
footer {
width: 100%; /* 幅100% */
height: 200px; /* 高さ200px */
background-color: skyblue; /* 背景を水色に */
}
6.3 基本のセレクタ
セレクタは先の例のように「要素名を指定する」だけはなく、様々な指定方法があります。
| セレクタ | 用途 |
|---|---|
*{ } | 全ての要素 |
p{ } | p要素 |
.red{ } | クラス名がredの全ての要素 |
#logo{ } | IDがlogoの全ての要素 |
p.red{ } | クラス名がredのp要素 |
p#logo{ } | IDがlogoのp要素 |
div p strong { } | div要素の中のp要素の中のstrong要素 |
div#widget p.red { } | IDがwidgetのdiv要素の中の、クラス名がredのp要素 |
div#widget, p.red { } | IDがwidgetのdiv要素と、クラス名がredのp要素の両方 |
6.4 高度なセレクタ
次に少し高度なセレクタの使い方をご紹介します。
普段Webページを閲覧する中でリンクテキストを目にする機会は多いですが、リンクテキストにカーソルを合わせると色が変わることがあるはずです。
この場合、要素は常に<a>要素のはずですが、状況によってスタイルが変わるのは何故でしょうか？
その答えが「擬似クラス」です。
a:link {
color: #0000ff;
}
a:visited {
color: #999999;
}
a:hover {
color: #ff0000;
}
a:linkは未訪問のリンクです。未訪問リンクの文字色を青に指定します。
a:visitedは訪問済みのリンクです。訪問済みリンクの文字色は緑になるように指定しています。
a:hoverは要素にカーソルが乗っている状態です。a要素にカーソルを合わせると文字色が赤になるように指定しています。
リンクに関しては、基本的に上記3種類の擬似クラスを使うことで対応可能です。
その他の擬似クラスや、擬似要素など、より高度な指定方法がありますが、多くのWebページのスタイルはここで紹介したセレクタのみで対応可能です。
6.5 プロパティの種類
CSSで扱えるプロパティは、非常に多くの種類があります。
またセレクタで指定した要素によって、変更できるプロパティは異なります。
HTMLの要素と同様に、CSSのプロパティについても、ここで全てを紹介することはできませんので、インターネットや書籍などを参考に学習してください。
最も効率的な学習方法は、どんどん実際のコードに触れることです。
実際のコードに触れる中で「このプロパティはなんだろう？」と疑問に思った時に調べてみてください。
この繰り返しを経験することで、プロパティの一覧を眺めるよりも圧倒的に早いスピードで習得することができます。
6.6 CSSの優先順位
CSSのデザインの適用には、優先度があります。
下に書かれたものほど優先
CSSファイル内で下に書かれたものほど優先されてデザインが適用されます。例えば下記CSSの場合には、colorのredは上書きされ、最終的にはgreenが適用されます。
p {
color: red;
}
p {
color: green;
}
詳細なセレクタほど優先
より詳細に指定されたセレクタほど優先されてデザインが適用されます。例えば、下記CSSの場合には、下側にcolor: green;があるので全ての緑色になりそうですが、上側のセレクタではp.importantとクラス名まで詳細に指定されているので、class="important"なp要素は、redが優先して適用されます。
p.important {
color: red;
}
p {
color: green;
}