S T Y L E
最近スクロールバーにかわいい色がついてたり、リンクの文字がカーソルをのせると色が変わるような「スタイル」を使ったサイトも目にするようになりました。かく言う私がそんなサイトを見て「何?何?かわいいこれ!!」と気に入って、つい最近取り入れたばかりですが!!
ページ全体のフォントの色や種類サイズや位置などはホームページビルダーでもカンタンに設定できますが、私が気に入って使っているスクロールバーの色とリンク文字のスタイルを説明します。


以下はこのページで使っているスタイルです。
body,td,div,span,ul,a{
padding:0mm;
margin:0mm;
scrollbar-track-color:#fcf5f3;
scrollbar-face-color:#f8f8f8;
scrollbar-shadow-color:#7da45b;
scrollbar-darkshadow-color:#919f8c;
scrollbar-highlight-color:#ffffff;
scrollbar-3dlight-color:#c7d6bc;
scrollbar-arrow-color:#7da45b;
}

A:LINK
{
color : #6B4C3F;
text-decoration : none ;
}

A:VISITED
{
color : #6B4C3F;
text-decoration : none ;
}

A:HOVER
{
color : #b39884;
text-decoration : none ;
}

A:ACTIVE{
color : #6B4C3F;
text-decoration : none ;
}


scrolbar(4行目)〜A:LINKまの上(11行目)までがスクロールバーのスタイル設定です。#fcf5f3とかいう部分が色の設定。バーの背景やバーの▼のところ影ハイライトと細かく色設定ができます。いろいろ試してみてください!!



A:LINK(13行目)以下がリンクの文字の設定です。
text-decoration : none : という部分はリンクした文字につくアンダーラインがなしという意味、つける場合にはnoneの変わりにunderlineと入れておきます。

A:LINK
リンクをつけてある文字の設定。colorは表示色です。
A:VISITED
既に訪問したリンク先の設定です。A:LINKと色の設定を変えると、既に訪れたリンク文字は違う色に表示されます。
A:HOVER
私のサイトではここだけ色を変えています。カーソルが乗ったら色が変わるようにしてあります。他のところとはここだけcolorの設定が違うでしょ?
A:ACTIVE
クリックした時の設定です。


このリンクの設定ではリンク文字がこんな風になります。

違う設定も見る




このスタイルシートを使う場合は、スタイル表記の部分をコピーしてメモ帳などにペースト、style.cssなど名前をつけ(拡張子はcssです)保存します。ホームページビルダーではスタイルリンクができますので、スタイルシートマネージャーを呼びだしリンクで保存したcssファイルを選択します。新しいバージョンのホームページ作成ソフトはたいていできると思いますが、できない場合は下を参照してください。
<TITLE>スタイルシート</TITLE>
<LINK rel="stylesheet" href="../style.css" type="text/css">
</HEAD>
ホームページのhtmlです。
タイトルの後、</HEAD>の前にスタイルシートのリンクを入れるだけです。