リンク

7-1 文字色

ページ全体のリンクにはa要素というのが用意されていて、それぞれ決まった名前がついています。 各々を定義することによってリンクした箇所にカーソルを合わせると色が変わるなどの働きをします。
a:link 通常(未アクセス)の色
a:visited アクセス済みの色
a:hover ポイント時の色
a:active アクティブ時の色


サンプル ソースコード
link色に関する記述
  1. デフォルト色はレッド
  2. 訪問済みはピンク
  3. カーソルを合わせたときはグリーン
  4. 選択時はブルー
 
a:link {color: #FF3300; }
a:visited {
color: #FF6666;}
a:hover {
color: #CCFF00; }
a:active {color:
#00CCFF; }

7-2 文字色

a要素にそれぞれ背景色を指定できます。カーソルを合わせると文字の背景色が変わる定義です。
サンプル ソースコード
link色に関する記述
  1. デフォルト色はレッド
  2. 訪問済みはピンク
  3. カーソルを合わせた時はグリーン背景にブラック
  4. 選択時はブルーに背景色グレー
 
a:link { color: #FF3300; }
a:visited {color:
#FF6666;}
a:hover {color:
#CCFF00; background-color: #000000; }
a:active {color:
#00CCFF; background-color: #666666; }

7-3 下線

カーソルを合わせるとリンクされた文字の下に下線が出てくることがあります。 a要素に{ text-decoration: none; }と指定すると、下線がなくなります。
{ text-decoration: underline; } と記述すると、文字に下線が引かれますが、 リンクしていない部分につけるとユーザビリティ(ソフトウェアやWebサイトの「使いやすさ」のこと)上あまりよくありません。
サンプル ソースコード
link色に関する記述
  1. デフォルト色はレッド
  2. 訪問済みはピンク
  3. カーソルを合わせた時はグリーン、文字の飾りなし
  4. 選択時はブルー、アンダーラインあり
 
a:link {color: #FF3300; }
a:visited {color:
#FF6666; }
a:hover {color:
#CCFF00; text-decoration: none;}
a:active {color:
#00CCFF; }

7-4 リストの横並びでメニューに

リストの一行づつを右へ右へと回り込ませて横に配置します。
サンプル ソースコード
link色に関する記述
  1. デフォルト色はレッド、文字の飾りはなし
  2. 訪問済みはピンク
  3. カーソルを合わせた時はグリーン
  4. 選択時はブルー
ulに関する記述
  1. 外・内余白0px
  2. 飾りなし
liに関する記述
  1. 位置・左、横幅150px
  2. 外側余白右5px
  3. 内側全余白5px
  4. 罫線5px緑の立体
  5. テキスト中央
css7_4_1
  1. 位置両方
 
a:link {color: #FF3300; text-decoration: none;}
a:visited {
color: #FF6666;}
a:hover {
color: #CCFF00;}
a:active {
color: #00CCFF;}

ul {
padding: 0;
margin: 0;
list-style-type: none;
}

li {
float: left;
width: 150px;
margin-right: 5px;
padding: 5px;
border: 5px #00ff00 ridge;
text-align: center;
}

.css7_4_1 {
clear: both;
}