ホーム＞コース別ガイド一覧＞リンクとは？/ページ間をリンクで結びつけよう！
リンクとは、文字や画像をクリックすることにより別のページを表示したり、同じページ内の特定の場所を表示したり、別のページの特定の場所を表示したりできます。また、電子メールを送信するためのリンクも設定できます。それらを結び付けるには a 要素を使い、リンクであることを宣言して href 属性に絶対パスや相対パス、メールアドレスなどを設定します。
使用タグ <a 属性="属性値">〜</a>
HTML一覧タグ辞典 … <a> タグ
<a>タグを使えば、Webページ内にリンクを設定できます。属性に href 属性を記述すると、ページ間のリンクの設定ができます。属性に name 属性を記述すると、Webページの特定の場所（ページの途中の見出しなど）を表示するための目印となる名前を設定できます。
使用タグ <a href="リンク先のURL">〜</a>
a 要素の href 属性を使えば、リンクをクリックしたときに表示される、リンク先のURLを指定できます。また、電子メールを送信するためのリンク設定もできます。メールへのリンク設定は「メールアドレスへのリンクを設定しよう！」で説明しています。
使用例
この使用例では、ブラウザで表示された「おいしいチャーハンの作り方」という文字列をクリックすると、同じフォルダの中にあるファイル名「sample.html」というページが表示されるようにリンク設定してます。
|
 まずは、「おいしいチャーハンの作り方」という文字列をリンク設定します。
- 開始タグの<a>を入力します
- 終了タグの</a>入力します
|
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
<strong>ワンポイント</strong>を紹介します！</p>
<p><a>おいしい<em>チャーハン</em>の作り方</a></p>
-----以下省略します-----
</body>
</html> |
|
|
|
|
|
次に、href 属性を入力し、リンク先を指定しましょう。リンク先は絶対パスや相対パスで指定します。
ここではリンク先を「sample.html」と指定しています。
- a 要素に href 属性を入力しましょう
- リンク先のURLを入力しましょう
|
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
<strong>ワンポイント</strong>を紹介します！</p>
<p><a href="sample.html">おいしい<em>チャーハン</em>の作り方</a></p>
-----以下省略します-----
</body>
</html>
|
|
|
使用例の表示
[a 要素の href 属性適応後適応前のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
|
|
 |
[a 要素の href 属性適応後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
|
|
表示例のようにリンクを指定すると、青い文字で表示され、下線が引かれます。
※画像にリンクを指定すると画像の周りに枠線が表示されます。
関連情報ページ |
|
このタグによく使われるCSS |
|
|
|
|
その他 |
|
|
