4-4　リンクの張り方

作成したHTML文章にリンクを張る方法です。リンクとは正式には 『ハイパーリンク』 といい、ページ間を自由に移動出来る機能の事です。<a>要素を使用致します。（このタグはインライン要素です）。

<a href="リンク先URL" title= "説明文" target="★">文字列</a> という書き方をします。


[ 関連事項 ： HP-TIPS > CSS > リンクの基礎知識 ]
[ 関連事項 ： HP-TIPS > CSS > リンクに関するレシピ ]

pagetop

4-4-1　テキストリンク

<body> ～ </body> 内に記述して下さい。

<a href="top.html" title= "目次のページに戻ります">ＴＯＰ</a>
ＴＯＰ

href属性で詳しいリンク先を設定し、title属性でリンク先の説明を設定致します。
（実際にクリックするとHP-TIPSの目次に戻ります）。

[ 関連事項 ： HP-TIPS > HPの作り方 > リンクの張り方 > target属性 ]
[ 関連事項 ： HP-TIPS > HPの作り方 > 用語集 > 属性 ]

pagetop

4-4-2　画像リンク

<a>要素 と <img>要素 を使用致します。

<body> ～ </body> 内に記述して下さい。

<a href="top.html" title= "目次のページに戻ります"><img src="home.gif" width="32" height="9" alt="目次のページに戻ります"></a>
目次のページに戻ります

<img>要素のsrc属性で画像のURLを指定し、widthで横幅を、heightで画像の縦幅を指定致します。
（実際にクリックするとHP-TIPSの目次に戻ります）。

pagetop

4-4-3　特定の場所へリンクをする

任意のページから 『ページその物』 にリンクをするのではなくて、『直接特定の場所へリンク』 を張る方法です。id属性（name属性）を利用致します。 id属性はHTML4辺りから導入された物で、それ以前はname属性が利用されておりました。（XHTML1.1では既にname属性は廃止されておりますが、id属性に対応していないブラウザとの兼ね合いで現状では両方書かれるケースが多い？ようです）。


全て<body> ～ </body> 内に記述して下さい。

同じページに張る場合

リンク元 ： <a href="#キーワード">
リンク先 ： <a id="キーワード name="キーワード"">

キーワードは全て半角の英数字で設定して下さい。 ちなみにこのページの上部にあるミニ目次も、これと同じ設定をして（ただし管理人はname属性のみ利用＾＾；）各説明文の所にリンクが飛ぶようにしております。


他のページに張る場合

リンク元 ： <a href="ファイル名#キーワード">
リンク先 ： <a id="キーワード" name="キーワード">

例 ：
リンクを張りたいページ（リンク元）からトップページの該当部分にリンクをしたい場合
リンク元 ： <a href="top.html#ex">トップの例に行きます</a>
リンク先 ： TOPページの任意の場所に <a id="ex" name="ex">文字列</a>　と書けばOKです。

しかしname属性は廃れ行く属性ですので、既にXHTMLへの移行を考えておられる方は、
リンク元 ： <a href="top.html#ex">トップの例に行きます</a>
リンク先 ： TOPページの見出し部分等に <h1 id="ex">文字列</h1>　としておいてもOKです。

pagetop

4-4-4　注意事項

pagetop

4-4-5　おまけ

pagetop