初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL3. スタイル設定の書式　その1★外部ファイルを作成する

　

４．「擬似クラス」

ⅰ)基本のリンク設定

既にご説明したように、「クラスセレクタ」では設定したい要素に対して任意のクラス名をつけることが出来ました。擬似クラスとはこれと似たようなものですが、「クラスセレクタ」では任意で付けた名前の部分に「擬似クラス」を置くことで、特定の対象に対して指定が行えるようになっています。

「擬似クラス」は6種類しかありませんが、指定する時の書式が少し「クラスセレクタ」と違っているので注意して下さい。以下のようにクラスセレクタでは「.」を使った部分が「:」になります。

要素名:擬似クラス {   設定   }

    　　　　　　　

「擬似クラス」は以下の6種類で、リンクに関する設定が主なものです。例えばカーソルがリンク上に乗った時に色を変えたい時は、a:hover { color: #4242ff; }  のように書きます。

:link まだ見ていないページへのリンク
:visited 既に見たページへのリンク
:hover カーソルがリンク上にある時
:active リンクをクリックした時、もしくは移動した先から元のページに戻った時に直前にクリックしたリンク
:focus 対象がクリックされた時
:lang (言語コード)スタイルを適用させる言語

※「:focus」と「:lang」はIE6.0など、対応していないブラウザやバージョンがあります。

　

リンクに関する設定はHTML上で a要素を指定してあるリンクに対して自動的に働きます。まずは単純にリンクの文字色が変わる設定をCSSで作ってみましょう。（スタイルシートでの色指定について詳しくは「Column 8.スタイルシートと色指定」を参照して下さい。）

CSS設定

body { margin: 50px 50px; 
color: #9b9bff;
background-color: #000;
font: normal normal bold 12pt/1.2 "ＭＳ Ｐ明朝"; 
}

a { display: block;
width: 100px;
height: 30px;
text-decoration: none;
font-size: 12pt;
}　　　　　　/* リンク関する基本設定 */

a:link { color: #00c; }

a:visited { color: #369; }
a:hover { color: #f0f; }

a:active { color: #f96; }

<body>部分のHTML

<body>

<a href="coordinate1.htm">Party Style1</a> 
<a href="coordinate2.htm">Party Style2</a> 
<a href="coordinate3.htm">Party Style3</a> 
<a href="coordinate4.htm">Party Style4</a> 
<a href="coordinate5.htm">Party Style5</a> 
<a href="coordinate6.htm">Party Style6</a> 

</body>

上の例では、リンクに関する基本設定をa { ～設定～ }でまとめて行い、リンクカラー、既に訪問済みのページへのリンク、カーソルが乗った時、クリックされた時、それぞれの文字色を擬似クラスで指定しています。動作させるとリンクカラーは以下のように変化します。

a:link { color: #00c; }
a:visited { color: #369; }
a:hover { color: #f0f; }
a:active { color: #f96; }

実例はこちらでご覧になれますが、CSSを実際に動作させるとブラウザによって正しく表示されない場合があります。また、この実例で使っているリンク先はMagazine Workshopのコンテンツです。最近そのページを見られた場合は、最初の段階からリンク色が訪問済みのものになっていますので、予めご了承下さい。

※ このCSS外部ファイルについての補足説明となりますが、a要素は通常インラインレベル要素ですので、実例のように縦にリンクを並べるにはこれをブロックレベル要素に変換する必要があります( display: block; )。この他にリンクに関する基本設定では、リンクを含むボックスサイズ( width: 100px; height: 30px; )、通常リンク部分に引かれる下線を消す( text-decoration: none; )、リンクの文字サイズ( font-size: 12pt; )が、全てまとめて指定されています。これらのプロパティに関する詳細な解説は以下のページを参照して下さい。なお、文中の言葉にリンクを付けるような場合は、これらの設定は一切必要ありません(この設定を省いた場合の実例はこちら)。

Column11.「インライン要素とブロックレベル要素」

Vol4.CSSにおける「BOX概念」とは?

Vol7.フォントに関する設定 その1.書体とサイズ

Vol8.テキストに関する設定 その1.文字色と装飾

　

　

ⅱ)「:hover」を利用した複雑なﾘンク設定

ここで面白いのは「:hover」という擬似クラスです。これまでリンクにカーソルが乗った時、色や位置を変えるためには2枚の画像を用意し、javaスクリプトを用いてホバー(切替え)させなければなりませんでした。HTMLのみではこの動作は実行させられません。(javaスクリプトを用いたリンク画像切替えの実例はMagazine Workshop トップページで各コーナーへジャンプさせるリンクに使っていますので、ご参照下さい。)

けれども、CSSで擬似クラスを使うと、いちいち切替画像を用意しなくてもテキストのみでホバーさせることができます。ただし、リンク画像には凝った書体を使いたくなるものですが、CSSでのホバーはスクリプトで書体を指定するため、ヴィジターのパソコンに指定されたフォントが入っていなければ、表示に著しく齟齬が生じることがあります。javaだと画像を使いますのでその心配はありませんが、CSSの場合はこの点に配慮が必要です。CSSでホバーさせるか、javaを使うかは、フォントによって使い分ける必要があるということですね。

以下は、先ほどより複雑なデザイン性を持たせたCSSを使って、リンクをホバーさせた一例を画像化したものです。実例はこちらでご覧になれますが、CSSを実際に動作させるとブラウザによって正しく表示されない場合があり、また、お手持ちのパソコンにこちらで指定したフォント「DEVON」が入っていなければ、書体が変わったり正しく動作しなかったりします。その点は予めご了承の上、ご覧下さい。

→

カーソルがリンク上に乗ると...

上の例では、リンクリストの背景に薄い色で文字を書いた下のような画像を一枚設置し、その上に各リンクが重なるようにテキストを配置しています。それから「:hover」でカーソルがリンク上に乗ると背景画像はそのままでリンクを設定したテキストのみが書体、サイズを変えて表示されるように設定しました。文字の大きさを変えてありますので、リンク上にカーソルが乗ると文字が飛び出すような感じに見えるわけですね。このように「擬似クラス」を使うと、javaスクリプトを用いないでも工夫次第で凝った画面の演出が出来ると思います。

  ←リンクリストの背景に設置されている画像

　

上例のCSS外部ファイルとHTMLは以下の通りです。

CSS設定

body { margin: 50px 50px; 
color: #9b9bff;
background-color: #eaeaea;
font: normal normal bold 12pt/1.2 "ＭＳ Ｐ明朝"; 
}

div.list {
background: url("bg_linksumple2.jpg") no-repeat;  /*リンクリストの背景画像を指定*/
width: 300px;
height: 300px;
padding: 20px;
overflow: hidden; 
}　　　　　　　　　　　　/*リンクリストをひとまとめにするための設定*/

div.logo { 
width: 350px;
height: 100px;
padding: 20px;
position: absolute;
left: 100px;
top: 280px;
overflow: hidden;
font-size: 24pt;
font-family: DEVON;
}　　　　　　　　　　　　/*タイトルロゴの位置や書式を指定*/

a { display: block;
color: #6868ff;
width: 150px;
height: 30px;
text-decoration: none;
font-size: 12pt;
position: absolute;
}                                   /*各リンクに共通の設定*/

a.1 { left: 28px;
top: 25px;
} 　　　　　　　　　　　/* 1行目のリンク表示位置を指定*/

a.2 { left: 28px;
top: 68px;
}       　　　　　　     　/* 2行目のリンク表示位置を指定*/　

↓↓<<以下、3～6行目まで、各リンクの表示位置を指定>>↓↓

a.3 { left: 28px;
top: 108px; }

a.4 { left: 28px;
top: 148px; }

a.5 { left: 28px;
top: 188px; }

a.6 { left: 28px;
top: 228px; }

a:hover{ color: #4242ff; 
font-size: 18pt;
font-family: DEVON, "ＭＳ Ｐ明朝";
}    　　　　     　　　　　/* リンクにカーソルが乗った場合の表示形式を指定*/

<body>部分のHTML

<body>

<div class="list"> 
<a class="1" href="coordinate1.htm">Party Style1</a> 
<a class="2" href="coordinate2.htm">Party Style2</a> 
<a class="3" href="coordinate3.htm">Party Style3</a> 
<a class="4" href="coordinate4.htm">Party Style4</a> 
<a class="5" href="coordinate5.htm">Party Style5</a> 
<a class="6" href="coordinate6.htm">Party Style6</a> 
</div>

<div class="logo">Fashion as Entertainment</div>

</body>

※背景画像指定、ボックス配置、については、以下のページを参照して下さい。

Vol6.背景に関する設定 その1.背景の色と画像 / その2.背景画像の表示方法 / その3.背景の一括指定

Vol9.配置に関する設定 その1.配置方法と位置指定

　

初級篇2.VOL3.スタイル設定の書式・その1-3 ～書式に関する補足～ <<

>> 初級篇2.VOL3.スタイル設定の書式・その1-5

　

2007.7.7.-7.8.