ﾎﾟｲﾝﾄ時に下線表示ﾎﾟｲﾝﾄ時に下線削除 ﾎﾟｲﾝﾄ時の背景色ﾎﾟｲﾝﾄ時の文字移動 ｱｳﾄﾗｲﾝ変更 リンクcss ﾘﾌｧﾚﾝｽ へ
ポイントした時に下線を表示する(CSS)
(a:hover) text-decoration: underline;
　text-decoration は、全てのタグ（要素）に適用できます。
　text-decoration は、文字の装飾（下線、上線、取り消し線、点滅）を指定するプロパティです。
　<a>タグ（要素）に、疑似クラス hover を指定し、text-decoration に underline を設定すると、ポイントした時に下線を表示することができます。
　※ この指定は、リンクテキストの下線を消している場合に有効です。
　a { text-decoration: none; }   a:hover { text-decoration: underline; }
プロパティ名値説　　明
text-decoration underlineテキストに下線を引く
　★ 使用例とブラウザでの表示 (d2-1)スタイルシートの書き方（基本）は、こちら です。
設定例 ： a.d2-1 { text-decoration: none; }
a.d2-1:hover { text-decoration: underline; }
使　用　例   ブラウザの表示
<title>link text-decoration</title>
<style type="text/css"><!--
a.d2-1 { text-decoration: none; }
a.d2-1:hover { text-decoration: underline; }
--></style></head>
<body>
<p><a href="sample.html" class=d2-1>Sample</a></p>
</body></html>		 Sample

「Sample」にマウスを重ねるとアンダーラインを表示します。(SampleﾍﾟｰｼﾞはDummy)
関連するページ
CSS スタイルシート下線を消す：リンクテキストの下線を消す
CSS スタイルシート文字の装飾：文字の装飾を指定する
Utilety Page (参考)疑似クラス：「疑似クラスの指定方法」へ
ﾎﾟｲﾝﾄ時に下線表示ﾎﾟｲﾝﾄ時に下線削除 ﾎﾟｲﾝﾄ時の背景色ﾎﾟｲﾝﾄ時の文字移動 ｱｳﾄﾗｲﾝ変更 リンクcss ﾘﾌｧﾚﾝｽ へ
ポイントした時に下線を消す(CSS)
(a:hover) text-decoration: none;
　text-decoration は、全てのタグ（要素）に適用できます。
　text-decoration は、文字の装飾（下線、上線、取り消し線、点滅）を指定するプロパティです。
　<a>タグ（要素）に、疑似クラス hover を指定し、text-decoration に none を設定すると、ポイントした時に下線を消すことができます。
　a:hover { text-decoration: none; }
プロパティ名値説　　明
text-decoration none装飾なし（下線を消す）
　★ 使用例とブラウザでの表示 (d2-2)スタイルシートの書き方（基本）は、こちら です。
設定例 ： a.d2-2:hover { text-decoration: none; }
使　用　例   ブラウザの表示
<title>link text-decoration</title>
<style type="text/css"><!--
a.d2-2:hover { text-decoration: none; }
--></style></head>
<body>
<p><a href="sample.html" class=d2-2>Sample</a></p>
</body></html>		 Sample

「Sample」にマウスを重ねるとアンダーラインが消えます。(SampleﾍﾟｰｼﾞはDummy)
関連するページ
CSS スタイルシート下線を消す：リンクテキストの下線を消す
CSS スタイルシート文字の装飾：文字の装飾を指定する
Utilety Page (参考)疑似クラス：「疑似クラスの指定方法」へ
ﾎﾟｲﾝﾄ時に下線表示ﾎﾟｲﾝﾄ時に下線削除 ﾎﾟｲﾝﾄ時の背景色ﾎﾟｲﾝﾄ時の文字移動 ｱｳﾄﾗｲﾝ変更 リンクcss ﾘﾌｧﾚﾝｽ へ
ポイントした時の背景色を指定する(CSS)
(a:hover) background-color: ***;
　background-color は、全てのタグ（要素）に適用できます。
　background-color は、背景色を指定するプロパティです。
　<a>タグ（要素）に、疑似クラス hover を指定し、background-color にカラーコード（or カラーネーム）を設定すると、ポイントした時の背景色（リンクテキストの背景色）を指定できます。
　a:hover { background-color: silver; }
プロパティ名値説　　明
background-color カラーコード or
カラーネーム		 背景色を指定（初期値は transparent）
※ 色の指定は、カラーコード（#ffffff,#fff,rgb(255,0,0)）または、カラーネーム（red,blue）で行います。詳細は、「カラーネーム」のページをご覧下さい。カラーネームのページへ
　★ 使用例とブラウザでの表示 (d2-3)スタイルシートの書き方（基本）は、こちら です。
設定例 ： a.d2-3:hover { background-color: skyblue; }
使　用　例   ブラウザの表示
<title>link background-color</title>
<style type="text/css"><!--
a.d2-3:hover { background-color: skyblue; }
--></style></head>
<body>
<p><a href="sample.html" class=d2-3>Sample</a></p>
</body></html>		 Sample

「Sample」にマウスを重ねると背景色を表示します。(SampleﾍﾟｰｼﾞはDummy)
関連するページ
CSS スタイルシートボックスの背景色：ボックスの背景色を指定する
Utilety Page (参考)カラーコード：「カラーネーム と カラーコード」へ
Utilety Page (参考)疑似クラス：「疑似クラスの指定方法」へ
ﾎﾟｲﾝﾄ時に下線表示ﾎﾟｲﾝﾄ時に下線削除 ﾎﾟｲﾝﾄ時の背景色ﾎﾟｲﾝﾄ時の文字移動 ｱｳﾄﾗｲﾝ変更 リンクcss ﾘﾌｧﾚﾝｽ へ
ポイントした時に文字を動かす(CSS)
(a:hover) position: relative; top(right,bottom,left): ***;
　position は全ての要素、top(right,bottom,left) は位置決めされた要素に適用できます。
　position はボックスの配置方法を、top(right,bottom,left) はボックスの配置位置を指定するプロパティです。
　<a>タグ（要素）に、疑似クラス hover を指定し、position、top(right,bottom,left) を設定すると、ポイントした時にリンクテキストの位置を動かすことができます。
　a:hover { position: relative; top: 1px; left: 1px; }
プロパティ名値説　　明
position relative通常の位置を基準とした相対的な配置
＊ positionプロパティについては、「ボックスの配置方法を指定する」をご覧下さい。
プロパティ名値説　　明
top 数値＋単位（px 等）
or パーセント		 上からの距離を指定
right右からの距離を指定
bottom下からの距離を指定
left左からの距離を指定
＊ top(right,bottom,left)プロパティについては、「ボックスの配置位置を指定する」をご覧下さい。
　【指定方法】
　通常の位置から右下に1px移動させたい場合は、次の3つのプロパティを設定します。
position: relative; … 通常の位置を基準とした相対的な配置
top: 1px; … 上からの距離を指定（通常の位置から下に1px移動）
left: 1px; … 左からの距離を指定（通常の位置から右に1px移動）
　★ 使用例とブラウザでの表示 (d2-4)スタイルシートの書き方（基本）は、こちら です。
設定例 ： a.d2-4:hover { position: relative; bottom: 2px; }
使　用　例   ブラウザの表示
<title>link position:relative</title>
<style type="text/css"><!--
a.d2-4:hover { position:relative; bottom:2px; }
--></style></head>
<body>
<a href="Sample1.htm" class=d2-4>Sample1</a>
<a href="Sample2.htm" class=d2-4>Sample2</a>
<a href="Sample3.htm" class=d2-4>Sample3</a>
</body></html>		 Sample1 Sample2 Sample3

「Sample1〜3」にマウスを重ねるとリンクテキストが上に移動します。(SampleﾍﾟｰｼﾞはDummy)
関連するページ
CSS スタイルシートboxの配置方法：ボックスの配置方法を指定する
CSS スタイルシートboxの表示位置：ボックスの表示位置を指定する
Utilety Page (参考)疑似クラス：「疑似クラスの指定方法」へ
ﾎﾟｲﾝﾄ時に下線表示ﾎﾟｲﾝﾄ時に下線削除 ﾎﾟｲﾝﾄ時の背景色ﾎﾟｲﾝﾄ時の文字移動 ｱｳﾄﾗｲﾝ変更 リンクcss ﾘﾌｧﾚﾝｽ へ
選択中のアウトラインを変更する(CSS)
(a:active) outline: ***;
　outline は、全てのタグ（要素）に適用できます。
　outline は、アウトライン（輪郭線）の太さ、色、スタイルをまとめて指定するプロパティです。
　<a>タグ（要素）に、疑似クラス active を指定し、outline を設定すると、選択中のリンクテキストのアウトラインを変更することができます。
　a:active { outline: 1px #ff0000 solid; }
プロパティ名値　および　説　明
outline:1px…線の太さ #0000ff…線の色 solid…線のスタイル ;
初期値mediuminvert none 
＊ それぞれの値は、半角スペースで区切って記述します。
記述する順序は自由で、必要のない指定は省略できます。（省略した場合は初期値になります）
※ 線のスタイル指定を省略すると、アウトラインが表示されなくなります。アウトラインを表示する場合は、この指定を省略しないで下さい。
※ アウトライン指定方法の詳細は、outlineプロパティをご覧下さい。
Internet Exp.は表示モードが「標準モード」の場合のみ機能するようです（Internet Exp.7 以前は未対応）。※ Internet Exp.で対応させる場合は、境界線（border）を代用して下さい。
　【アウトラインのスタイル】
＊ アウトラインのスタイルは、次の値で指定します（Internet Exp.が未対応のため、border を代用しています）。
none：線なし
solid：実 線
double：二重線
groove：谷型の線
ridge：山型の線
inset：凹型の線
outset：凸型の線
dotted：点 線
dashed：破 線
　★ 使用例とブラウザでの表示 (d2-5)スタイルシートの書き方（基本）は、こちら です。
設定例 ： a.d2-5s:hover, a.d2-5s:active { outline: 1px #f00 solid; text-decoration:none; }
a.d2-5d:hover, a.d2-5d:active { outline: purple double; text-decoration:none; }
使　用　例   ブラウザの表示
<title>link outline:active</title>
<style type="text/css"><!--
** ここにスタイルシートの内容を記述 **
--></style></head>
<body>
<a href="Sample1.htm" class=d2-5s>Sample1</a>
<a href="Sample2.htm" class=d2-5d>Sample2</a>
</body></html>		 Sample1  Sample2

「Sample1･2」にマウスを重ねるとリンクテキストに輪郭線を表示します。(SampleﾍﾟｰｼﾞはDummy)
☆ Internet Exp.が未対応のため、border を代用しています。
☆ active は、表示時間が短いため、hover にも設定しています。
関連するページ
CSS スタイルシート輪郭線(纏)：アウトラインをまとめて指定する
CSS スタイルシート境界線(纏)：境界線の太さ・色・スタイルをまとめて指定する
Utilety Page (参考)疑似クラス：「疑似クラスの指定方法」へ
ﾎﾟｲﾝﾄ時に下線表示ﾎﾟｲﾝﾄ時に下線削除 ﾎﾟｲﾝﾄ時の背景色ﾎﾟｲﾝﾄ時の文字移動 ｱｳﾄﾗｲﾝ変更 リンクcss ﾘﾌｧﾚﾝｽ へ