4-4 リンクの張り方
作成したHTML文章にリンクを張る方法です。リンクとは正式には 『ハイパーリンク』 といい、ページ間を自由に移動出来る機能の事です。<a>要素を使用致します。(このタグはインライン要素です)。
<a href="リンク先URL" title= "説明文" target="★">文字列</a> という書き方をします。
[ 関連事項 : HP-TIPS > CSS > リンクの基礎知識 ]
[ 関連事項 : HP-TIPS > CSS > リンクに関するレシピ ]
4-4-1 テキストリンク
<body> ~ </body> 内に記述して下さい。
href属性で詳しいリンク先を設定し、title属性でリンク先の説明を設定致します。
(実際にクリックするとHP-TIPSの目次に戻ります)。
- この時のリンクの文字色は CSS で指定した色になっております。
-
title属性で指定した説明文は、リンク部分にカーソルが触れた際にバルーン形式で説明文を表示致します。(下記の見本画像を参照)
この属性は省略する事が出来ますが、あった方が訪問者にとって判り易いと思います。
[ 関連事項 : HP-TIPS > HPの作り方 > リンクの張り方 > target属性 ]
[ 関連事項 : HP-TIPS > HPの作り方 > 用語集 > 属性 ]
4-4-2 画像リンク
<a>要素 と <img>要素 を使用致します。
<body> ~ </body> 内に記述して下さい。
<img>要素のsrc属性で画像のURLを指定し、widthで横幅を、heightで画像の縦幅を指定致します。
(実際にクリックするとHP-TIPSの目次に戻ります)。
-
alt属性
画像を使用する際、<img>要素の中に必ず alt を書いて下さい。 (画像が読み込めなかった場合に 『代替え機能』 という物があり、こちらで指定された文字が表示されます)。[ 関連事項 : HP-TIPS > HPの作り方 > 画像の貼り方 > alt機能について ]
- title属性
画像でリンクを張った際、「alt」属性だけでなく、<a>要素の「title」属性も忘れずに併用して下さい。 (NNやOPERA、Firefoxでは代替機能はありますが、「alt」で設定した文章をバルーン形式で表示は致しません/滝汗)ギャラリーの展示等で「alt」にしか説明文を設定していない場合、訪問者のブラウザによっては何を展示しているのか全く判らず、ユーザーの足が遠退く原因にもなります。 (参加するサーチによっては、『該当ジャンルの作品を判り易く展示していない』 という理由で参加を拒否されるケースもあります)
[ 関連事項 : HP-TIPS > HPの作り方 > 画像の貼り方 > 「alt」は必ず書く ]
- border属性
画像でリンクを張った際、画像の周りの線を消す為に<img>要素の中に「border="0"」と書かれる方もおられますが、CSSでの代替えが薦められている属性です。HTMLでこの項目を記載せずに、CSSで記述して下さい。(しかし古いブラウザだとCSS自体が上手く解釈されない場合がございますので、HTML文法チェッカーなどでは減点対象にはなっておりません)[ 関連事項 : HP-TIPS > HPの作り方 > 画像の貼り方 > CSSで画像の線を消す ]
4-4-3 特定の場所へリンクをする
任意のページから 『ページその物』 にリンクをするのではなくて、『直接特定の場所へリンク』 を張る方法です。id属性(name属性)を利用致します。 id属性はHTML4辺りから導入された物で、それ以前はname属性が利用されておりました。(XHTML1.1では既にname属性は廃止されておりますが、id属性に対応していないブラウザとの兼ね合いで現状では両方書かれるケースが多い?ようです)。
全て<body> ~ </body> 内に記述して下さい。
同じページに張る場合
リンク先 : <a id="キーワード name="キーワード"">
キーワードは全て半角の英数字で設定して下さい。 ちなみにこのページの上部にあるミニ目次も、これと同じ設定をして(ただし管理人はname属性のみ利用^^;)各説明文の所にリンクが飛ぶようにしております。
他のページに張る場合
リンク先 : <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です。
4-4-4 注意事項
- タグの中身は、alt と title の「説明文」 以外は全て
必ず半角の英数字で記載して下さい。(全角文字を使用するとエラーが出ます) - リンクの色変更や
リンクを記述した際の下線を一括で消したい方、文字に触れた際に揺れるような裏技等を知りたい方は下記の講座をご覧下さいませ。[ 関連事項 : HP-TIPS > CSS > スタイルシートの書式 ]
[ 関連事項 : HP-TIPS > CSS > LINKのレシピ集 ] - 見やすいリンク集の作り方はこちらをご覧下さいませ。
[ 関連事項 : HP-TIPS > HPの作り方 > その他の心構え ]
4-4-5 おまけ
-
ちなみに title属性 の説明文の途中で改行を入れたい場合
というタグを半角英数字で入力して下さい。 -
但し改行はIEでのみ有効です。
NN7.1では改行部分に「・」と点の前後に半角のスペースが挿入されておりました。 またOPERA7.5では半角のスペースが挿入されるのみで、FireFox1.5.0.1では半角の「♪」が改行部分に表示されるだけです。