リンクタグ(HTML・CSS)
クリックしたら別のページを開くようにするのがリンクタグです。
自分のサイト内の別ページを開いてもらいたいときや
外部のサイトに誘導する場合に使われます。
リンクタグを使わないページはほとんど存在しないため、よく使われるタグの一種です。
リンクタグの基本
【HTML】
<a href="http://www.aff8.biz/">アフィリエイト初心者ガイド</a>
aタグを使います。href属性でリンク先のURLを指定します。
リンクさせる文字をaタグで囲むことによって文字をリンクに変えることができます。
リンクを別ウィンドウで開く
【HTML】
<a href="http://www.aff8.biz/" target="_blank">アフィリエイト初心者ガイド</a>
リンクをクリックした際に、リンク先のページを別ウィンドウで開くためには
aタグにtarget属性で_blankを指定します。表示上は通常のリンクタグと変わりありません。
タブブラウザの場合は別タブでページが開かれます。
今見ているページを閉じてほしくないときや外部ページにリンクする際によく使用されます。
同じページ内でのリンク
【HTML】
(リンク先)
<p id="top" >アフィリエイト初心者ガイド</p>
(リンク)
<a href="#top">アフィリエイト初心者ガイド</a>
同じページ内にリンクをさせて、表示場所を変えることができる方法です。
例えば縦に長いページなどではページのしたに「トップに戻る」というリンクを貼っておけば
クリックすればすぐに表示をページ上部に切り替えることができます。
リンク先にidで名前をつけておき、リンクする際には、href属性に#とidの値を入力します。
CSSでリンクタグのデザイン変更
CSSで以下のリンクタグのデザインを変更します。
【HTML】
<a href="http://www.aff8.biz/">アフィリエイト初心者ガイド</a>
リンク文字の色変更
【CSS】
a{ color:#ff0000; }
未訪問リンクの文字色変更
【CSS】
a:link{ color:#ff0000; }
リンク先にまだ訪問したいときのリンク文字色を変更します。
訪問済みリンクの文字色変更
【CSS】
a:visited{ color:#ff0000; }
リンク先にすでに訪問しているときのリンク文字色を変更します。
マウスをのせたときのリンク文字色変更
【CSS】
a:hover{ color:#ff0000; }
リンクにマウスをのせたときのリンク文字色を変更します。
クリック中のリンク文字色変更
【CSS】
a:active{ color:#ff0000; }
リンクをクリック中のリンク文字色を変更します。