フォント レイアウト リンク・画像 テーブル リスト ページ 特殊文字 小技・雑学
カラーコード お薦めサイト ホーム HP作成ソフト HP作成法

トップページ > 雑学・小技集 > リンクを装飾する

リンクを装飾する
<Title>〜</Title>のすぐ下に挿入して下さい。

  • リンクの装飾を一括で指定。ポイント時だけ変化させる。
    <Style Type="text/css">
    <!--
    A{ text-decoration:none;}
    A:hover{ text-decoration:underline; color:#0000ff; }
    //-->
    </Style>

  • リンクの装飾をそれぞれで指定。
    <Style Type="text/css">
    <!--
    A:link { text-decoration:none; color:#000080; }
    A:visited { text-decoration:none; color:#000080; }
    A:active { text-decoration:underline; color:#000080; }
    A:hover { text-decoration:underline; color:#1e78ff; }
    //-->
    </Style>
    解説
    a:link … リンク前
    a:visited … リンク後
    a:active … 押した時
    a:hover … ポイント時


装飾の種類とサンプル
none みんなのタグ辞書
underline みんなのタグ辞書
overline みんなのタグ辞書
line-through みんなのタグ辞書
blink みんなのタグ辞書
例)a:hover { text-decoration: underline overline line-through ; }
みんなのタグ辞書


カーソルを乗せるとカーソルが変化
cursor:タイプ;
例)a:hover { text-decoration:none; color:#000080; cursor:crosshair;}
※各文字の上にカーソルを乗せて見て下さい。

  • crosshair
  • pointer
  • move
  • e-resize
  • ne-resize
  • nw-resize
  • n-resize
  • se-resize
  • sw-resize
  • s-resize
  • w-resize
  • ne-resize
  • wait
  • help
→ その他のスタイルはこちら



カーソルを乗せると背景の色が変化
a:hover { background-color:;}

  • リンク


カーソルを乗せると背景に画像が出てくる
a:hover { background-image:url(背景URL);}
  • リンク


カーソルを乗せると文字が少し移動する
a:hover {position:relative; top:2;left:2;}
※赤い部分はleft、right、top、bottomで指定可能です。
動く距離は数字を変更します。


リンク下線を消す
a {text-decoration: none;}



使い方
  • これを<Title>〜</Title>のすぐ下へ入れましょう。
  • 外部から呼び出す場合はコチラをご覧下さい。
トップページタグ実験場リンクについて免責事項メール
Copyright © 2001-2006 YukiProduction. All Rights Reserved.
全ページリンクフリー
since03/06/01