A.T-MOON

contents

パンくずリスト

メッセージエリア



    リンクの状態と触れた時のアクション

メッセージエリア

マーク リンクの状態

リンクの状態を表すタグがいくつかありますので、紹介しておきます。
bodyタグ内に記述するものとインラインスタイルシートに記述するものがあります。

bodyタグ内に記述する場合は<body link="A" vlink="A">のように半角スペースで区切って並べて記述します。
Aには色を指定するカラーコードかカラーネームを記述します。
スタイルシートに記述する場合はa{B}a:visited{B}のようにひとつずつ記述します。
Bにはテキストの色や触れた時のアクションなど記述します。

状態  bodyタグ内に記述    スタイルシートに記述  
訪れていないリンク link="A" a{B}
訪問済みのリンク vlink="A" a:visited{B}
現在アクティブなリンク alink="A" a:active{B}
オンマウスの時 a:hover{B}

ページTOP

マーク リンクに触れた時に変化をつける a:hover{B}

リンクテキストに触れた時に、テキストに変化をあたえるスタイルシートです。
まず初めに訪れていないリンクa{ }の記述を a{text-decoration:none;} にしておきましよう。
記述しておかないとリンクテキストにデフォルトでアンダーラインが入ってしまいます。

B 変化の形
text-decoration:underline; 下線
text-decoration:overline; 上線
text-decoration:overline underline; 上下線
text-decoration:line-through; 取り消し線
border-bottom:線の太さ(px) double 線の色(カラーコードorカラーネーム); 二重線
text-decoration:underline overline line-through; 上下線と取り消し線
text-decoration: none; border-width: 線の太さ(px);
border-style: solid; border-color:色の指定;
囲み線
font:italic; イタリック体
font-weight:bolder; 太字
filter:dropshadow(color=影の色,offx=2,offy=2,positive=true);
width:"幅(px)";height:"高さ(px)";text-decoration : none;
影をつける
top:上からの移動位置(px); left:左からの移動位置(px); position:relative; へこませる
font:italic; イタリック体

<head>〜</head>の間にスタイルシートとして記述します。

※例)
下のリンクに触れると色がピンク色に変わり下線が出ます
+リンク+
<html>
 <head>
 <style type=text/css>
 <!--
  a{
   text-decoration:none;
   }
  a:hover{
   text-decoration:underline;
   color: pink;
   }
 -->
 </style>

  <title>ココにタイトル</title>
 </head>
 <body>
 <font color=red>※例</font><br>
 下のリンクに触れると色がピンク色に変わり下線が出ます<br>
 <a href="#html">+リンク+</a>
 </body>
</html>
↓ピンク部分のタグをコピー↓

ページTOP

リンクの基本 リンクに触れた時のアクション(HTML編)