このチュートリアルでは、HTMLで他のページへのリンクを作成する方法
HTMLでのリンクの作成
リンクまたはハイパーリンクは、あるwebリソースから別のwebリソースへの接続です。 リンクを使用すると、ユーザーは世界中のどこのサーバーでも、あるページから別のページにシームレスに移動できます。
リンクには2つの端があり、アンカーと呼ばれます。 リンクは、ソースアンカーから始まり、リンク先アンカーを指します。リンク先アンカーは、画像、オーディオまたはビデオクリップ、PDFファイル、HTMLドキュメント、またはドキュメント自体内の要素など、任意のwebリソースです。
デフォルトでは、ほとんどのブラウザで次のようにリンクが表示されます:
- 未訪問のリンクには下線が引かれ、青色が表示されます。
- 訪問したリンクには下線が引かれ、紫色が表示されます。
- アクティブなリンクには下線が引かれ、赤が表示されます。
ただし、CSSを使用してこれを上書きできます。 リンクのスタイル設定の詳細をご覧ください。
HTMLリンク構文
リンクはHTMLで<a>タグを使用して指定されます。
リンクまたはハイパーリンクは、単語、単語のグループ、または画像である可能性があります。
開始<a>タグと終了</a>タグの間のすべてが、ユーザーがブラウザで表示してクリックするリンクの一部になります。 ここにリンクのいくつかの例があります:
例
このコードを試してみてください”
<a href="https://www.google.com/">Google Search</a><a href="https://www.tutorialrepublic.com/">Tutorial Republic</a><a href="images/kites.jpg"> <img src="kites-thumb.jpg" alt="kites"></a>href属性は、リンクのターゲットを指定します。 その値は、絶対URLまたは相対URLにすることができます。
絶対URLは、プロトコル、ホスト名、ドキュメントのパスなど、URL形式のすべての部分を含むURLです。https://www.google.com/、https://www.example.com/form.phpなど。 一方、相対Urlは、contact.html、images/smiley.pngなどのように、ページ相対パスです。 相対URLにhttp://またはhttps://プレフィックスが含まれることはありません。
リンクのターゲットを設定する
target属性は、リンクされたドキュメントを開く場所をブラウザに指示します。 定義されたターゲットは四つあり、各ターゲット名はアンダースコア(_)文字で始まります:
-
_blank— リンクされたドキュメントを新しいウィンドウまたはタブで開きます。 -
_parent— リンクされたドキュメントを親ウィンドウで開きます。 -
_self— リンクされたドキュメントを、ソースドキュメントと同じウィンドウまたはタブで開きます。 これはデフォルトであるため、この値を明示的に指定する必要はありません。 -
_top— リンクされたドキュメントをフルブラウザウィンドウで開きます。
リンクのターゲットが基本的にどのように動作するかを理解するために、次の例を試してみてください:
例
このコードを試してみてください”
<a href="/about-us.php" target="_top">About Us</a><a href="https://www.google.com/" target="_blank">Google</a><a href="images/sky.jpg" target="_parent"> <img src="sky-thumb.jpg" alt="Cloudy Sky"></a>ヒント:webページがiframe内に配置されている場合は、リンクのtarget="_top"を使用してiframeから抜け出し、ターゲットページをフルブラウザウィンドウに表示できます。
ブックマークアンカーの作成
ブックマークアンカーを作成して、ユーザーがwebページの特定のセクションにジャンプできるようにすることもできます。 ブックマークは、非常に長いwebページがある場合に特に役立ちます。
ブックマークの作成は二段階のプロセスです: 最初にジャンプする要素にid属性を追加し、次の例に示すように、<a>タグのhref属性の値として、ハッシュ記号(#)の前にあるid属性値を使用します:
例
このコードを試してみてください”
<a href="#sectionA">Jump to Section A</a><h2>Section A</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>ヒント:href属性に<a href="mypage.html#topicA">Go to TopicA</a>などのアンカー(#elementId)とともにそのページのURLを指定することで、別のwebページのセクションにジャンプすることもできます。
ダウンロードリンクの作成
テキストリンクを配置するのとまったく同じ方法でファイルダウンロードリンクを作成することもできます。 ダウンロードできるようにするファイルへのリンク先URLを指定するだけです。
次の例では、ZIP、PDF、JPGファイルのダウンロードリンクを作成しました。
例
このコードを試してみてください”
<a href="downloads/test.zip">Download Zip file</a><a href="downloads/masters.pdf">Download PDF file</a><a href="downloads/sample.jpg">Download Image file</a>注:PDFファイルまたはイメージファイルを指すリンクをクリックすると、ファイルはハードドライブに直接ダウンロードされません。 それはあなたのwebブラウザでファイルを開くだけです。 さらに、永久的にハードドライブに保存またはダウンロードすることができます。