CSSによるリンク効果1
◎CSSを利用したリンクボタンを魅せる効果です
設置方法は手順（１）〜（２）を設定するだけです。
IE5.5・IE6.0で動作確認をしています、他のブラウザでは確認していません。
メモ帳とFrontPageExpress兼用
〜〜手順（１）〜〜
メモ帳の場合：以下のCSSを<head>〜</head>の中に打ちます
FrontPageExpressの場合：メニューバーの表示（V）⇒HTML（H）でHTMLの表示と編集画面を出して<head>〜</head>の間に以下の記述をします
<style type="text/css">
<!--
ハイライト効果の場合
.kouka1 a:link, .kouka1 a:visited {
text-align:left;
margin:0px;
padding:0px;
border:1px solid #c0c0c0;
color:#ffffff;
width:100px;
background-color:#d9d9ff;
}
.kouka1 a:hover {
text-align:left;
margin:0px;
padding:0px;
border:1px solid #000000;
color:#000000;
width:100px;
background-color:#8080ff;
}
ボタン風効果の場合
.kouka2 a:link, .kouka2 a:visited {
text-align:left;
margin:0px;
padding:0px;
border-top: 2px solid #e4e4e4;
border-right: 2px solid #585858;
border-bottom: 2px solid #585858;
border-left: 2px solid #e4e4e4;
color:#ffffff;
width:100px;
background-color:#d9d9ff;
}
.kouka2 a:hover {
text-align:left;
margin:0px;
padding:0px;
border-top: 2px solid #585858;
border-right: 2px solid #e4e4e4;
border-bottom: 2px solid #e4e4e4;
border-left: 2px solid #585858;
color:#000000;
width:100px;
background-color:#8080ff;
}
-->
</style>
上記のCSSをそのまま記述すればサンプルと同じ効果で表示されるのですが、カスタマイズしたい時に何処を直すか説明します。
ハイライト効果の場合
マウスが乗っていない時の表示.kouka1 a:link, .kouka1 a:visited {テキストの表示位置：left（左詰）:center（中）:right（右詰）text-align:left;通常 ０pxmargin:0px;テキストと枠線の間隔：ピクセルで指定padding:0px;枠線の設定：線の太さ1px：線種solid（実線）：線色（16進数又はカラー名）border:1px solid #c0c0c0;テキスト色：（16進数又はカラー名）color:#ffffff;ボックスの横幅：ピクセルで指定width:100px;ボックス内の背景色：（16進数又はカラー名）background-color:#d9d9ff;}マウスが乗った時の表示.kouka1 a:hover {テキストの表示位置：left（左詰）:center（中）:right（右詰）text-align:left;通常 ０pxmargin:0px;テキストと枠線の間隔：ピクセルで指定padding:0px;枠線の設定：線の太さ1px：線種solid（実線）：線色（16進数又はカラー名）border:1px solid #000000;テキスト色：（16進数又はカラー名）color:#000000;ボックスの横幅：ピクセルで指定width:100px;ボックス内の背景色：（16進数又はカラー名）background-color:#8080ff;}
ボタン風の場合
マウスが乗っていない時の表示.kouka2 a:link, .kouka2 a:visited {テキストの表示位置：left（左詰）:center（中）:right（右詰）text-align:left;通常 ０pxmargin:0px;テキストと枠線の間隔：ピクセルで指定padding:0px;上部枠線の設定：線の太さ1px：線種solid（実線）：線色（16進数又はカラー名）border-top: 2px solid #e4e4e4;右部枠線の設定：線の太さ1px：線種solid（実線）：線色（16進数又はカラー名）border-right: 2px solid #585858;下部枠線の設定：線の太さ1px：線種solid（実線）：線色（16進数又はカラー名）border-bottom: 2px solid #585858;左部枠線の設定：線の太さ1px：線種solid（実線）：線色（16進数又はカラー名）border-left: 2px solid #e4e4e4;テキスト色：（16進数又はカラー名）color:#ffffff;ボックスの横幅：ピクセルで指定width:100px;ボックス内の背景色：（16進数又はカラー名）background-color:#d9d9ff;}マウスが乗った時の表示.kouka2 a:hover {テキストの表示位置：left（左詰）:center（中）:right（右詰）text-align:left;通常 ０pxmargin:0px;テキストと枠線の間隔：ピクセルで指定padding:0px;上部枠線の設定：線の太さ2px：線種solid（実線）：線色（16進数又はカラー名）border-top: 2px solid #585858;右部枠線の設定：線の太さ2px：線種solid（実線）：線色（16進数又はカラー名）border-right: 2px solid #e4e4e4;下部枠線の設定：線の太さ2px：線種solid（実線）：線色（16進数又はカラー名）border-bottom: 2px solid #e4e4e4;左部枠線の設定：線の太さ2px：線種solid（実線）：線色（16進数又はカラー名）border-left: 2px solid #585858;テキスト色：（16進数又はカラー名）color:#000000;ボックスの横幅：ピクセルで指定width:100px;ボックス内の背景色：（16進数又はカラー名）background-color:#8080ff;}
メモ帳の場合：<body>以下のリンクボタンにしたい箇所又はリンクタグの前後へ
FrontPageExpressの場合：メニューバーの表示（V）⇒HTML（H）でHTMLの表示と編集画面を出して<body>以下のリンクボタンにしたい箇所又はリンクタグの前後へ
<span class="kouka1"> <a href="#">No.1</a> <a href="#">No.2</a> </span>
この様にspan又はdivタグでaを入れ子にすればOKです。
