リンクタグ(HTML・CSS)

リンクタグ(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; }

リンクをクリック中のリンク文字色を変更します。

 

 

 

 

 

HTML・CSS講座 記事一覧


トップページ アフィリエイトとは? ASP一覧 おすすめ教材・ソフト 無料稼ぐ情報
Yahoo!ブックマークに登録  このエントリーをはてなブックマークに追加