NewsHTML TipsFlashPhotoDiaryProfileBBSLinkMail
   
  戻る  


カーソルを合わせるとボタンのようにリンクがへこむ
 
・サンプル
Sample Link


<head>〜</head>の間に↓のソースを書くと
ページ全体のリンクが変更できます。


ソース
<STYLE type="text/css">
<!--

A:link { /*未訪問リンクの設定*/
   text-decoration : none ;/*下線を消す*/
}

A:visited { /*訪問済みリンクの設定*/
   text-decoration : none;/*下線を消す*/
}

A:active { /*クリックしたときの設定*/
   text-decoration : none;/*下線を消す*/
}

A:hover { /*マウスが乗ったときの設定*/
   text-decoration:none;/*下線を消す*/
   position:relative;/*移動する*/
   top:1px;left:1px;/*数字は移動する相対的な位置*/
}

-->
</STYLE>

 

 

・サンプル

Sample Link


↓のようにソースを書くと
ページ全体のリンクが変更できます。


ソース
<html>
<head><title>サンプル</title>
<STYLE type="text/css">
<!--

A:link { /*未訪問リンクの設定*/
   text-decoration : none ;/*下線を消す*/
}

A:visited { /*訪問済みリンクの設定*/
   text-decoration : none;/*下線を消す*/
}

A:active { /*クリックしたときの設定*/
   text-decoration : none;/*下線を消す*/
}

A:hover { /*マウスが乗ったときの設定*/
   text-decoration:none;/*下線を消す*/
   position:relative;/*移動する*/
   top:1px;left:1px;/*数字は移動する相対的な位置*/
}

.button {
   padding:2px;
   background-color:#CCCCFF
   border-style:solid;
   border-color:#777799;
   border-width:1px;
   border-right-width:2px;
   border-bottom-width:2px;
   text-align:center;
   cursor:hand;
}
-->
</STYLE>
</head>
<body>
<a href="****.html" class="button">
Sample Link
</a>
</body>
</html>

 


・サンプル



↓のようにソースを書くと
ページ全体のリンクが変更できます。


ソース

<html>
<head><title>サンプル</title>

<STYLE type="text/css">
<!--

a:link,a:visited,a:active,a:hover{
   color:#333388;
   text-decoration:none;
}

.kage{
   background:#aaaaaa;
   width:100px;
}

.kage_button1 {
   border-width:1px;
   border-style: solid;
   border-color:#333388;
   background:#CCCCFF;
   position:relative;
   top:-2px;
   left:-2px;
   width:100px;
   color:#333388;
   text-decoration:none;
   text-align:center
}

.kage_button2 {
   border-width:1px;
   border-style: solid;
   border-color:#333388;
   background:#CCCCFF;
   position:relative;
   top:0px;
   left:0px;
   width:100px;
   color:#333388;
   text-decoration:none;
   text-align:center
}

-->
</STYLE>
</head>
<body>
</body>
</html>