ページ全体のリンクにはa要素というのが用意されていて、それぞれ決まった名前がついています。 各々を定義することによってリンクした箇所にカーソルを合わせると色が変わるなどの働きをします。 |
a:link | 通常(未アクセス)の色 |
a:visited | アクセス済みの色 |
a:hover | ポイント時の色 |
a:active | アクティブ時の色 |
サンプル | ソースコード | ||
|
a:link {color: #FF3300; } a:visited {color: #FF6666;} a:hover {color: #CCFF00; } a:active {color: #00CCFF; } |
a要素にそれぞれ背景色を指定できます。カーソルを合わせると文字の背景色が変わる定義です。 |
サンプル | ソースコード | ||
|
a:link { color: #FF3300; } a:visited {color: #FF6666;} a:hover {color: #CCFF00; background-color: #000000; } a:active {color: #00CCFF; background-color: #666666; } |
カーソルを合わせるとリンクされた文字の下に下線が出てくることがあります。 a要素に{ text-decoration: none;
}と指定すると、下線がなくなります。 { text-decoration: underline; } と記述すると、文字に下線が引かれますが、 リンクしていない部分につけるとユーザビリティ(ソフトウェアやWebサイトの「使いやすさ」のこと)上あまりよくありません。 |
サンプル | ソースコード | ||
|
a:link {color: #FF3300; } a:visited {color: #FF6666; } a:hover {color: #CCFF00; text-decoration: none;} a:active {color: #00CCFF; } |
リストの一行づつを右へ右へと回り込ませて横に配置します。 |
サンプル | ソースコード | ||
|
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; } |
©2006 WEB DESIGN STUDIO Powered by VISUAL LITERACY |