a要素

a要素 リンクを貼る インライン要素

リンクを作成するにはa要素を使ってリンクを作ります。href属性でURLを指定すれば他のブログやサイトに移動するリンクができます。

<a href="index.html">html一覧</a>

サイト内リンクを作成

id属性を付けページの紹介したい部分にピンポイントでマークできます
id名は好きなように変えられます。（この場合はueとしてあります）

<a id="ue">ページの上段</a>

同じページ内にリンクを設置する場合
id属性で指定した場所をリンク先に選びます。#を忘れずに付けてください。

<a href="#ue">ページの上段へのリンク</a>

同じサイトでページが違う場所にリンクを設置する場合
ファイル名とid名でリンク先を指定

<a href="index.html#ue">topページの上段へのリンク</a>

a要素に付けられる属性

target属性

リンクを開いたときの表示方法を指定します。target属性が使えるのはHTML 4とXHTML1.0移行型とフレーム型です。

<a href="index.html" target="_blank">html一覧</a>

指定できる値

新しいウィンドウで表示「_blank」画像のリンクにも使われています。
フレームを使ったときに使う値
同じフレーム内でリンク先を表示「_self」親フレームに表示「_parent」分割を廃止して1つのウィンドウで表示「_top」
※フレーム型は推奨されていません。またXHTML 1.1ではフレームは廃止されました

cssでデザインを指定する場合

css

リンクの色を変える

擬似クラスをa要素につけてcolorプロパティでリンクの色を変えることができます。訪問済みやマウスがリンクに触れた時の色の変更もできます。
擬似クラスには並べる順番があります。下の順番を覚えておきましょう。

a:link { color: blue; } 
a:visited { color: #FF6600; } 
a:hover { color: red; } 
a:active { color: red; } 

擬似クラス

a:linkは未訪問のリンクの色
a:visitedは訪問済みのリンクの色
a:hoverはマウスがリンクに触れたときの色
a:activeはリンクをクリックしたときの色

リンクの文字の色の指定できる値

値には色を表す値を入れます。greeenやpinkなどの色の名前や#CC6600などの16進数

リンクに背景色を付ける

background-colorプロパティを使ってリンクに背景色をつけます。

a:link { color: blue; background-color: #FFCCCC; } 
a:visited { color: #FF6600; background-color: #FFCCCC; } 
a:hover { color: red; background-color: #FFCCCC; } 
a:active { color: red; background-color: #FFCCCC; } 

共通属性

指定できる共通属性

id属性 class属性 style属性 title属性 lang属性 dir属性 accesskey属性 tabindex属性

イベント属性

イベント属性