アンカー(リンク)を設定するHTMLタグの使い方

トップページ » HTMLタグ入門講座 » アンカー(リンク)を設定するHTMLタグの使い方

■Webサイトにアンカー(リンク)を設定する時の注意点

◇リンク切れに注意

リンク切れを起こしていると、ユーザーの利便性を損なうばかりか、検索エンジンの評価も下がってしまいます。リンク先を外部に設定するときは、リンク切れに注意する必要があります。 Webサイトが完成した後も、こまめにリンク切れが起きていないかチェックする必要があります。

◇「href」または「name」のどちらかは必ず指定

アンカータグの属性「href」と「name」は必須ではありませんが、どちらかを指定しないと、役割がない無意味な記述になってしまうので注意してください。

◇リンクのデザインはスタイルシートで設定

リンクのアンダーライン、文字のサイズ、文字の色など、見た目の整形はスタイルシートで設定することが推奨されています。

■Webサイトにアンカー(リンク)を設定するHTMLタグ

クリックしたことで別ページを表示するアンカー（リンク）を設定するには、HTMLファイルにアンカータグ「<a>」を記述します。リンクとして表示したい文字列や画像をアンカータグ開始「<a>」とアンカータグ終了「</a>」で囲みます。

アンカータグ「<a>」の主な属性と使用方法を以下の表にまとめました。表に掲載している以外にも属性は存在しますが、スタイルシートでの指定が推奨されている属性や、廃止された属性は省略しました。必須欄の◎は必須属性、○は推奨属性、×は非推奨属性です。

アンカータグ属性	意味	必須
href=url	リンクをクリックした時に表示するWebサイトのURLを指定（拡張子まで記述）	○
name=name	名前を指定	○
target=target	遷移先ターゲットを指定（「_blank」を指定すると別ウィンドウを開きます）
class=class	クラスを指定
id=id	IDを指定
lang=lang	言語を指定
style=style	スタイルシートを指定
title=title	タイトルを指定
rel=rel	文書から見たリンク先の文書との関係を記述（next, previous, parent, nofollowなど）

HTMLおよびXHTML記述例
<a href="http://homepage.it-manual.com/html-intro/link.html">同じウィンドウで別ページを表示する <a href="http://homepage.it-manual.com/html-intro/link.html" target="_blank">別ウィンドウを開いて別ページを表示する <a href="http://homepage.it-manual.com/html-intro/link.html#abc" target="_blank">遷移先abcへ遷移する <a name="abc">遷移先abc</a>
Webサイトの表示
同じウィンドウで別ページを表示する別ウィンドウを開いて別ページを表示する遷移先abcへ遷移する遷移先abc

１００ＧＢ無制限レンタルサーバー【Ｘ２】

100GBの容量以外は、ほとんど無制限のレンタルサーバーです。マルチドメイン、サブドメイン、FTPアカウント、データベース、メールアカウントなどが無制限で利用できます。
さくらインターネット

月額125円のプランからビジネスにも使えるプランまで、予算や利用目的で選べる共用レンタルサーバや、サーバ1台まるごと利用できる専有レンタルサーバなど様々なサービスが用意されています。
ロリポップ！

「コロリポプラン」なら月額105円で容量2GB、「ロリポプラン」なら月額263円で容量13GB、マルチドメイン、データベース、共有SSLが使えます。「チカッパプラン」なら月額525円で容量30GB利用可能です。
Xbit（エクスビット）

稼働率99.99%以上、容量10GB、月額1,260円からのレンタルサーバーです。サポート体制が充実しており、専任のサポートスタッフを置くことで、平均3時間のクイックレスポンスを実現してます。
マルチドメイン対応、ビジネス仕様高性能レンタルサーバー【シックスコア】

サーバー自体が高性能なビジネス仕様のレンタルサーバーです。さらに高性能な専用レンタルサーバーも用意されています。