files/ja/learn/common_questions/what_are_hyperlinks/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

---
title: ハイパーリンクとは？
slug: Learn/Common_questions/What_are_hyperlinks
tags:
  - Beginner
  - Infrastructure
  - Navigation
translation_of: Learn/Common_questions/What_are_hyperlinks
---
<div class="summary">
<p>この記事では、ハイパーリンクとは何か、なぜ重要なのかを詳しく説明します。</p>
</div>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前提条件:</th>
   <td><a href="/ja/docs/Learn/Common_questions/How_does_the_Internet_work">インターネットの仕組み</a>を理解し、<a href="/ja/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Web ページ、Web サイト、Web サーバ、検索エンジンの違い</a>に精通している必要があります。</td>
  </tr>
  <tr>
   <th scope="row">目的:</th>
   <td>Web 上のリンクとその重要性について学びます。</td>
  </tr>
 </tbody>
</table>

<h2 id="概要">概要</h2>

<p>ハイパーリンクは通常リンクと呼ばれ、Web の背後にある基本概念です。リンクとは何かを説明するために、Web アーキテクチャの基本に戻る必要があります。</p>

<p>Web の発明者でもあるティム・バーナーズ・リーは、1989年に Web を支える3つの柱について語りました。</p>

<ol>
 <li>{{Glossary("URL")}}、Web 文書を追跡するアドレスシステム</li>
 <li>{{Glossary("HTTP")}}、URL が与えられたときに文書を見つけるための転送プロトコル</li>
 <li>{{Glossary("HTML")}}、埋め込み<em>ハイパーリンク</em>を可能にする文書フォーマット</li>
</ol>

<p>3つの柱からわかるように、Web 上のすべてのものはドキュメントとそのアクセス方法を中心に展開されています。Web の当初の目的は、テキスト文書に簡単にアクセスし、読み込み、そしてナビゲートする方法を提供することでした。それ以来、Web は画像、ビデオ、およびバイナリデータへのアクセスを提供するように進化しましたが、これらの改善によって3つの柱が変わることはほとんどありませんでした。</p>

<p>Web が登場する前は、ドキュメントにアクセスして別のドキュメントに移動することは非常に困難でした。人が読めるので、URL はすでに物事を簡単にしますが、文書にアクセスする都度長い URL を入力するのは困難です。これがハイパーリンクがすべてに革命をもたらしたところです。リンクは任意のテキスト文字列を URL と関連付けることができるため、ユーザはリンクをアクティブにすることで対象の文書にすぐにアクセスできます。</p>

<p>下線が引かれ、青いテキストで囲まれていることで、リンクは周囲のテキストから際立っています。リンクをタップまたはクリックしてアクティブにするか、キーボードを使用している場合は、リンクがフォーカスされるまでTabキーを押してEnterキーまたはスペースバーを押します。</p>

<p><img alt="Example of a basic display and effect of a link in a web page" src="https://mdn.mozillademos.org/files/8625/link-1.png" style="height: 492px; width: 477px;"></p>

<p>リンクは、Web をとても便利で成功させた画期的なものです。この記事の残りの部分では、さまざまな種類のリンクと、それらが現代の Web デザインにとって重要であることについて説明します。</p>

<h2 id="より深いダイブ">より深いダイブ</h2>

<p>すでに述べたように、リンクは URL に関連付けられたテキスト文字列です。リンクを使用すると、ある文書から別の文書に簡単に移動できます。とは言っても、考慮すべきいくつかのニュアンスがあります。</p>

<h3 id="リンクの種類">リンクの種類</h3>

<dl>
 <dt>内部リンク</dt>
 <dd>両方ともあなたの Web サイトに属している 2 つの Web ページ間のリンクは、内部リンクと呼ばれます。内部リンクがなければ、Web サイトのようなものはありません (もちろん、1ページの Web サイトでもない限りはですが)。</dd>
 <dt>外部リンク</dt>
 <dd>あなたの Web ページから他の誰かの Web ページへのリンク。Web は Web ページのネットワークであるため、外部リンクがなければ Web はありません。あなたの Web ページを通して利用可能なコンテンツ以外の情報を提供するには外部リンクを使用してください。</dd>
 <dt>被リンク</dt>
 <dd>他の人の Web ページからあなたのサイトへのリンク。外部リンクの反対です。誰かがあなたのサイトにリンクしたときにあなたはリンクバックする必要はないことに注意してください。</dd>
</dl>

<p>Web サイトを構築するときは、内部リンクに集中してください。これらのリンクを使用すると、サイトが使用可能になります。リンク数が多すぎることと少なすぎることの間でバランスの取れたものを見つけてください。別の記事で Web サイトナビゲーションの設計について説明しますが、原則として、新しい Web ページを追加するときは必ず、他のページの少なくとも1つがその新しいページにリンクしていることを確認してください。一方、サイトに10ページを超えるページがある場合は、他のすべてのページからすべてのページにリンクするのは非生産的です。</p>

<p>始めて間もないうちは、それほど外部と入ってくるリンクについて心配する必要はありません。しかし検索エンジンにサイトを見つけさせたいならそれらは非常に重要です。(詳細については下記を参照してください)。</p>

<h3 id="アンカー">アンカー</h3>

<p>ほとんどのリンクは2つの Web ページを結び付けています。 <strong>アンカー</strong>は1つの文書の2つのセクションを一緒に結びます。 アンカーを指すリンクをたどると、ブラウザは新しい文書をロードするのではなく、現在の文書の別の部分にジャンプします。ただし、他のリンクと同じ方法でアンカーを作成して使用します。</p>

<p><img alt="Example of a basic display and effect of an anchor in a web page" src="https://mdn.mozillademos.org/files/8627/link-2.png" style="height: 492px; width: 477px;"></p>

<h3 id="リンクと検索エンジン">リンクと検索エンジン</h3>

<p>リンクはユーザにとっても検索エンジンにとっても重要です。 検索エンジンは、Web ページをクロールするたびに、その Web ページで利用可能なリンクをたどって Web サイトにインデックスを付けます。検索エンジンは、リンクをたどって Web サイトのさまざまなページを見つけるだけでなく、リンクの表示テキストを使用して、どの検索クエリが対象のWebページにアクセスするのに適しているかを判断します。</p>

<p>リンクは、検索エンジンがサイトにどれだけ早くリンクするかに影響します。問題は、検索エンジンのアクティビティを測定するのが難しいということです。企業は当然、自分のサイトが検索結果の上位にランクされることを望んでいます。検索エンジンがサイトのランクをどのように決定するかについては、次のことがわかっています。</p>

<ul>
 <li>リンクの<em>表示テキスト</em>は、どの検索クエリが特定の URL を検索するかに影響します。</li>
 <li>Web ページの<em>被リンク</em>が多いほど、検索結果のランクは高くなります。</li>
 <li><em>外部リンク</em>は、元の Web ページと遷移先の Web ページの両方の検索ランキングに影響を与えますが、その程度は不明です。</li>
</ul>

<p><a href="http://en.wikipedia.org/wiki/Search_engine_optimization">SEO</a> (検索エンジン最適化) は、検索結果で Web サイトを上位にランク付けする方法の研究です。Web サイトのリンクの使用を改善することは、1つの役に立つ SEO テクニックです。</p>

<h2 id="次のステップ">次のステップ</h2>

<p>それでは、いくつか Web ページにリンクを設定しましょう。</p>

<ul>
 <li>すべてのリンクが URL を指しているので、より理論的な背景を得るには、<a href="/ja/docs/Learn/Common_questions/What_is_a_URL">URL とその構造</a>について学びます。</li>
 <li>もう少し実用的なものが欲しいですか？ <a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>モジュールの記事「<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクの作成</a>」で、リンクの実装方法について詳しく説明しています。</li>
</ul>