Javascriptを使わずCSSだけで
作るへこむリンクボタン,
JavaScript スタイルシートサンプル集
格安高速バスキラキラ号
サンプルソース
<html>
<head>
<title>マウスが乗るとへこむアンカーテキスト、ボタン</title>
<style type="text/css">
<!--/*cssだけで作るへこむテキスト、ボタン*/
.push0 a:hover{
position: relative; /* 相対位置への配置 */
top: 1px;
left: 1px;
text-decoration: none; /* 下線なし */
}
.push1 a{
display: block; /* ブロック要素にする */
width: 170px; /* 横幅 */
color: #000000; /* 文字色 */
background-color: #e0ffff; /* 背景色 */
border: outset 2px #7cfc00; /* ボーダー */
margin-bottom: 5px; /* 下 マージン */
padding: 5px; /* 内側余白 */
text-align : left; /* 水平位置 左揃え */
text-decoration: none; /* 下線なし */
}
.push1 a:hover {
position: relative;
top: 1px;
left: 1px;
color: red;
background-color: #90ee90;
border: inset 2px #7cfc00;
}
-->
</style>
</head>
<body>
<p class="push0">
<a href="#">JavaScript スタイルシートサンプル集</a><br>
<a href="#">格安高速バスキラキラ号</a>
</p>
<div class="push1">
<a href="#">背景 背景画像</a>
<a href="#">スタイルシート CSS</a>
<a href="#">レンタル サーバー</a>
<a href="#">動く文字 ティッカー</a>
<a href="#">テーブル</a>
</div>
</body>
</html>
a:hover疑似クラス
（アンカーテキストにマウスカーソルが乗った時）を使ってプロパティ値を換えスタイルを変更しています。
position:relative; top: *px; left: *px;
[相対的配置] 本来表示されるべき位置から、 配置の設定分top: 1px;(上から下へ1px)
left: 1px;(左から右へ1px 移動した位置に表示されます。
border: outset 2px #7cfc00;
枠線の設定です。border : スタイル 幅 色 ; 書き方は順浮同でスペースで区切って記述します。border のスタイルに
outset を指定すると枠線に囲まれた領域が盛り上がって観えます。inset を指定すると少し窪んで観えます。以上を利用してマウスカーソルが乗った時右下に押し下したようにしています。
文字色や背景色を変えるには
colorプロパティ,background-colorプロパティの値を変更します。カラーコード 色見本
a:hoverを使ってアンカーのスタイルを変更します
hover疑似クラスでテーブルの行とセルをハイライト
さくらのレンタルサーバ スタンダード
無料レンタルカウンター「デジデジ」
ロリポップ！なら初心者でも安心！
ホームページ簡単作成 「ホムペロリ！」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます！！
インタレストマッチ風の広告枠
使っている CSS プロパティ一覧
