CSS の基礎

「スタイルシート」は、文字のサイズや色、背景、余白など Web ページのさまざまなスタイルを設定したりレイアウトするものです。 ここでは、W3C が推奨し多くのブラウザが対応している CSS （Cascading Style Sheets）の概要を説明します。

CSS の書式

                宣言内容
  h1    {  color   :    blue   }
セレクタ    プロパティ       値

スタイルシート CSS の基本的な書式は、図のようにスタイルを指定する「セレクタ」に対しスタイルを宣言するという形になります。 ここでは、「セレクタ h1 要素の文字色を青にする。」という設定です。

CSS の主な設定書式は次のようなものがあります。

セレクタに複数のスタイルを設定

スタイルを複数設定する場合は、{ } の中に、「；（セミコロン）」で区切り並べます。

h2 { color: blue; font-size: 98%; background-color: gray; }

複数のセレクタに同じスタイルを設定

複数のセレクタに同じスタイルを設定する場合は、セレクタを「,（カンマ）」で区切って並べます。

p, dl, ol { color: blue; line-height: 1.5; }

子孫の要素にスタイルを設定

ある要素の子孫にあたる要素にスタイルを設定する場合は、要素名を「半角スペース」で区切って並べます。下の例では、 セレクタ h1 の子要素の em 要素にマッチした場合のスタイルを設定しています。

h1 em { color: red; font-size: 15px; }

クラスセレクタやＩＤセレクタを利用

あらかじめ要素に class属性や id 属性を指定しておき、特定のクラス名、または ID名を持つ場合のみスタイルを適用させます。 要素名だけではセレクタを限定できない場合などに利用します。

クラスは、文書中で何度でも違う要素に同じ名前で指定できます。ＩＤは、文書中に１つの要素だけです。 スタイルシートでは、クラスは「.（ピリオド）」に続けてクラス名を、ＩＤは「＃」に続けてＩＤ名を記述します。

「要素名.クラス名」とすると指定された要素に限定されます。要素名にアスタリスク「*」（ワイルドカードといいます） を付けて、「*.クラス名」にすると、どの要素からも呼び出せる特定されない設定になります。通常は「*」を省略して 「.クラス名」にして使われます。

次は、HTML と CSS 記述例とその表示例です。

p.point { color: red; }
.appeal { color: green; }

<p>通常の段落</p>
<p class= "point">大事な内容を赤い文字で表す段落</p>
<p>ここは通常の段落だけど<span class= "appeal">目立たせたい内容は緑色</span></p>

Top↑

span や div によるグループ化

クラスとＩＤによりスタイルを詳細に設定できるようになりますが、うまく表現できない単位をグループ化し、そこにクラス設定 すれば更にスタイル設定が広がります。span は段落内部の特定の語句をグループ化して設定します。div は複数の段落をまとめるなど ブロックレベル要素のグループ化に用います。

先程の例のクラス appeal を使ってグループ化した例です。

<div class= "appeal">
<p>クラス設定していない段落です。</p>
<p>クラス設定していない段落です。</p>
</div>
<p>この段落は部分的に<span class="appeal">クラス設定</span>しています。</p>

擬似クラス

要素名や属性などで分類できない性質に対してのスタイルです。セレクタにマッチする対象が、閲覧者の文書画面に対する操作に応じてダイナミックに変化します。
下記の、リンクに関する疑似クラスがあります。

リンクに関する擬似クラスを使用すれば、リンクが設定されている要素の状態やリンク先の 訪問状況に応じたスタイルの設定が可能です。

リンクに関する擬似クラスについて、a:link → a:visited → a:hover → a:active の順番で記述して下さい。

a:link { 
  color: blue;
}
a:visited {
  color: purple;
}
a:hover { 
  background-color: orange;
  text-decoration: none;
  color: red;
}

<a href="ez-1.html">
次世代 Webページ制作ツール HTML エディタ</a>のご紹介

Next >>HTMLへの組込み >>Top↑