ホーム＞コース別ガイド一覧＞別のページの特定の部分へのリンク設定です！
別のページの特定の部分へのリンク設定です！（a要素、href属性、name属性） |
  
|
使用タグ <a href="#リンク先">〜</a> <a name="任意の名前">〜</a>
HTML一覧タグ辞典 … <a> タグ
<a href="リンク先"></a>
<a name="任意の名前"></a>
※別のページの特定の部分へリンク設定する場合、リンク先を指定する <a>タグの href 属性の属性値に「リンク先のパス#リンク先の名前（a 要素の name 属性で入力した名前）」を指定します。
使用例
ここでは、別のページの特定の部分へのリンク設定を説明します。
<a>タグの name 属性を使い、リンク先の特定の部分に任意の名前を指定し（※リンク先のページのファイル名「sample.html」とする）、その後、<a>タグに href 属性を使い、リンク元のページからリンク先の別のページの特定の部分にジャンプするためのリンクを設定します。
下の例では、参照名を入力するリンク先を h2 要素（見出し）の「手順」と「材料と分量」に指定し、リンク元のリンク設定を別のページにします。
[参照名を設定するリンク先のページ（※ファイル名「sample.html」とする）]
 まずは、h2 要素（見出し）の「手順」と「材料と分量」に a 要素の name 要素を使い、リンク先の参照名を指定する。
- 参照名を指定する場所（ここでは h2 要素の文字列「手順」と「材料と分量」）に開始タグの<a>を入力します。
※赤文字で記述しています
- 終了タグの</a>入力します
※赤文字で記述しています
- name属性を使い参照名を指定します
「手順」に「tejun」、「材料と分量」に「zairyou」というリンク先の任意の名前を指定します
※青文字で記述しています
|
参照名を設定するリンク先の記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>
<h1>簡単に作れるワンポイントチャーハン</h1>
<p>料理を少しおいしくするための<br>
<strong>ワンポイント</strong>を紹介します！</p>
<p>おいしい<em>チャーハン</em>の作り方</p>
<p>→手順→材料と分量</p>
<img src="sample1.jpg" alt="チャーハン">
<h2>
<a name="tejun">手順</a>
</h2>
<ul>
<li>強火でフライパンを少し暖めます。</li>
<li>大さじ一杯の油を入れ、ひき肉を炒めます。</li>
<li>塩コショウでひき肉に下味をつけます。</li>
<li>ごはんを入れ、フライパンに入れましょう。</li>
<li>etc…</li>
</ul>
<h2>
<a name="zairyou">材料と分量</a>
</h2>
<ul>
<li>卵・・・１個</li>
<li>ハム・・・50g</li>
<li>玉ねぎ・・・４分の１個</li>
<li>塩コショウ・・・少々</li>
<li>etc…</li>
</ul>
<p>次はおいしい<b>カルボナーラ</b>の作り方です</p>
<img src="sample1.jpg" alt="カルボナーラ">
</body>
</html>
</html> |
|
|
[リンクを設定する別のページ]
|
別のページのリンク元に「手順」と「材料と分量」という文字列をリンク設定します。
- 開始タグの<a>を入力します
- 終了タグの</a>入力します
|
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
<strong>ワンポイント</strong>を紹介します！</p>
<p>おいしい<em>チャーハン</em>の作り方</p>
<p>
<a>おいしいチャーハンの作り方</a>
→<a>手順</a>
→<a>材料と分量</a>
</p>
</body>
</html> |
|
|
| |
 |
次に、href 属性を入力し、リンク先を指定しましょう。リンク先は絶対パスや相対パスで指定します。
ここではリンク先を「sample.html」と指定しています。
- a 要素に href 属性を入力しましょう
- リンク先のURLと「#」を付けた参照名を入力しましょう
|
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
<strong>ワンポイント</strong>を紹介します！</p>
<p>おいしい<em>チャーハン</em>の作り方</p>
<p>
<a href="sample.html">おいしいチャーハンの作り方</a>
→<a href="sample.html#tejun">手順</a>
→<a href="sample.html#zairyou">材料と分量</a>
</p>
</body>
</html> |
|
|
このように、href 属性に指定する属性値は、「ファイル名（ここではsample.html）」＋「#」＋「参照名（ここではtejunまたは、zairyou）」ですので「sample.html#tejun」と「sample.html#zairyou」になります。
|
表示例のようにリンクを指定すると、青い文字で表示され、下線が引かれます。
なお、a 要素の name 属性で参照名を設定しても、ブラウザの表示は変わりません。
※画像にリンクを指定すると画像の周りに枠線が表示されます。
[リンクを設定するページのブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
おいしいチャーハンの作り方
→手順
→材料と分量
|
上のブラウザでの表示例のリンクをクリックすると、[name属性で指定した、別のページの特定の場所（※ファイル名「sample.html」とする）]へ実際にジャンプします。どのように表示されるか実際に確認できます。「おいしいチャーハンの作り方」というリンクはファイル名「sample.html」のページトップに、「手順」というリンクはファイル名「sample.html」の「手順」という見出しに、「材料と分量」というリンクはファイル名「sample.html」の「材料と分量」という見出しにジャンプします。
これで別のページの特定の部分へのリンク設定は理解できましたね！
