ゼロからのWeb制作 Vol.10|aタグ

こんにちは、鈴木です。
今回は、リンクに関するHTMLとCSSについて書いていこうと思います。

目次

  1. リンクを貼る
  2. リンクの装飾

1.リンクを貼る

リンクを貼る際に使うタグはaタグです。
一つ例を挙げて説明したいと思います。

<a href="http://ss-complex.com/" target="" rel="" title="" >スマートスタイルコンプレックス></a>

これをブラウザで表示すると以下のようになります。
資料25

 

タグには属性がたくさんありますが、ここでは基本的な属性について説明しようと思います。

href

リンク先のファイルを指定する時に使います。
上記のコードのように指定したURLを記述します。

target

リンク先のファイルの表示の方法について指定します。
例えばtarget=”_blank”と記述すると指定したURLは別画面を開いてリンクします。

rel

リンク元ページから見たリンク先ページとの関係を示します。
例えば外部スタイルシートを使用する時は タグの属性にrel=”stylesheet”と記述します。

title

リンクの説明をします。
マウスをリンクの上に乗せるとtitleで記述したテキストが表示されます。
リンク名だけではどんなサイトが分からないときにユーザーに情報を提供することができます。

これらを踏まえて最初のリンクを書き直すと

<a href="http://ss-complex.com/" target="_self" rel="nofollow" title="スマートスタイルコンプレックス" >スマートスタイルコンプレックス></a>

このような感じになります。

2.リンクの装飾

例えば、リンクをクリックした時やリンク訪問後のリンクの色をCSSを使うことで指定することができます。

スタイルシートに以下のタグを記述します。

a:link {color:カラーコード;}

リンクにまだ訪問していない状態の色を指定します。

a:visited {color:カラーコード;}

リンクにすでに訪問した後の状態の色を指定します。

a:hover {color:カラーコード;}

リンクにカーソルが乗った時の状態の色を指定します。

a:active {color:カラーコード;}

リンクをクリックしたときの状態の色を指定します。

 

※ 色の指定をlink,visited,hover,activeの順番で書かないと
意図した色にならないことがあります