リンクの挿入

リンクの挿入方法について説明したページです。htmlタグによる単純なリンクの挿入方法からCSSを利用したカーソルを乗せると変化する方法、別ウィンドウやタブでの表示方法、ページの途中にリンクする方法等を説明しています。

単純なリンクの挿入

 単純にリンクを挿入する時のhtmlタグの記述は以下の通りです。

<a href="ファイル名">リンク先題名</a>

 ファイル名には拡張子を付けるのを忘れないようにして下さい。例えば、htmlで保存したファイルの場合、拡張子.htmlが付きます。又、サブディレクトリ配下にファイルがある場合はファイル名の所をディレクトリ名/ファイル名で指定します。URLで指定する場合はhttp://example.com/index.html等と指定する事も出来ます。異なるドメインへのリンクはURLで指定する必要があります。

 尚、リンクではデフォルトで下線が付きますが、これを消す方法はスタイルシートで以下のようにします。

a {text-decoration: none;}

カーソルを乗せると変化する方法

 カーソルを乗せると変化するように設定するにはスタイルシートで例えば以下の定義を行います。

a:hover {color: rgb(255,0,0);}

 上記設定でリンクを行うと以下のように表示されます。マウスによりカーソルを乗せて確認してみて下さい。

リンクの挿入

 上記はカーソルが乗ると文字の色を赤に変えていますが、同様の指定で背景を変えたり、下線を消している場合はカーソルが乗った時だけ下線を表示したり出来ます。

a:hover {background-color: rgb(224,224,224);color: rgb(255,0,0);text-decoration: underline;}

 これを表示すると以下のように表示されます。マウスによりカーソルを乗せて確認してみて下さい。

リンクの挿入

クラス分け

 クラス分けしたい場合はスタイルシートで以下の定義を行います。

a.test {text-decoration: none;}
a.test:hover {background-color: rgb(224,224,224);color: rgb(255,0,0);text-decoration: underline;}

 htmlでは以下のように記述します。

<a href="ファイル名" class="test">リンク先題名</a>

 このように指定する事でクラス名testが指定された時だけ適用されます。testはクラス名なので好きな名前が付けられます。

target指定

 通常はリンク部分をクリックすると今いるページからリンク先のページに移動します。つまり、今いるページは表示されなくなります。

 target指定した場合、ブラウザでリンク先のページを表示する際に新しいウィンドウ、又はタブで表示されるようになります。つまり、今いるページは表示されたまま、違うページも別に表示されます。新しいウィンドウかタブで表示されるのかはブラウザの種類や設定によって異なります。

 target指定するには以下のように記述します。

<a href="ファイル名" target="_blank">リンク先題名</a>

 余り沢山のウィンドウやタブを表示させられると見る側は一々閉じなければならないため面倒です。このため、自分のホームページ内での移動はtargetなし、異なるサイトへのリンクはtarget指定ありを基本と考えるとよいと思います。

ページの途中へのリンク

 ページの途中にリンクさせるには、リンク先でhtmlタグに以下のように記述します。

<h2 id="独自定義">リンク先</h2>

 idは独自定義のため自由に名前を付けれます。ここでは<h2>タグに対して指定していますが、その他のタグでも利用可能です。

 リンク元ではhtmlに以下のように記述します。

<a href="ファイル名#独自定義">リンク先題名</a>

 ファイル名の後に#を付けてリンク先のページで指定した独自定義の名前を指定する事でクリックした際に、リンク先のページ途中であるid指定した箇所が表示されるようになります。

リンクの挿入1

 尚、同一ページ内の途中にリンクする場合は以下のようにファイル名を省略して記述出来ます。

<a href="#独自定義">リンク先題名</a>

  • このエントリーをはてなブックマークに追加