ハイパーリンクとは

  1. ウェブの仕組み
    1. URL とは何か
    2. インターネットの仕組み
    3. ウェブサーバーとは
    4. ドメイン名とは
    5. ハイパーリンクとは
  2. ツールとセットアップ
    1. GitHub Pages の使い方
    2. Google App Engine を使ってウェブサイトを公開する方法
    3. ウェブサーバーにファイルをアップロードするには
    4. ウェブサイトが正しく動作することを確認するには
    5. ウェブサイトを作るのにどんなソフトウェアが必要か
    6. ウェブで何かするのにかかるコスト
    7. どんなテキストエディターが利用できるか
    8. ブラウザーの開発者ツールとは
    9. ローカルテストサーバーを用意するには
  3. デザインとアクセシビリティ
    1. アクセシビリティとは
    2. アクセシビリティを推進する HTML の機能
    3. ウェブサイトのデザインは何から始めればよいか
    4. すべての種類のユーザーのためにデザインするには
    5. 一般的なウェブレイアウトには何が含まれているのか
  4. よくある CSS の問題の解決
    1. CSS の一般的な質問
    2. CSS 生成コンテンツの使用
    3. アイテムを中央揃えするには
    4. テキストに影を追加するには
    5. ポインターを当てるとボタンの色を変えるには
    6. ボックスを半透明にするには
    7. 最初の段落を強調表示するには
    8. 段落の最初の行を強調するには
    9. 画像を歪ませずにボックスを埋めるには
    10. 装飾的なボックスの作成
    11. 要素に影を追加するには
    12. 見出しの直後に来た段落を強調表示するには
  5. よくある HTML の問題の解決
  6. よくある JavaScript の問題の解決

この記事では、ハイパーリンクとは何か、なぜ重要なのかを詳しく説明します。

前提条件: まずインターネットはどのように動くのかを理解し、ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンの違いについてよく理解している必要があります。
目的: ウェブ上のリンクとその重要性について学びます。

概要

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

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

  1. URL、ウェブ文書を追跡するアドレスシステム
  2. HTTP、URL が与えられたときに文書を見つけるための転送プロトコル
  3. HTML、埋め込みハイパーリンクを可能にする文書形式

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

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

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

ウェブページにおけるリンクの基本的な表示と効果の例

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

より深く掘り下げる

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

リンクの種類

内部リンク

両方ともあなたのウェブサイトに属している 2 つのウェブページ間のリンクは、内部リンクと呼ばれます。内部リンクがなければ、ウェブサイトのようなものはありません(もちろん、 1 ページのウェブサイトは別です)。

外部リンク

あなたのウェブページから他の誰かのウェブページへのリンク。ウェブはウェブページのネットワークであるため、外部リンクがなければウェブはありません。あなたのウェブページを通して利用可能なコンテンツ以外の情報を提供するには外部リンクを使用してください。

被リンク

他の人のウェブページからあなたのサイトへのリンク。外部リンクの反対です。誰かがあなたのサイトにリンクしたときにあなたはリンクバックする必要はないことに注意してください。

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

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

アンカー

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

Example of a basic display and effect of an anchor in a web page

リンクと検索エンジン

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

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

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

SEO (検索エンジン最適化)は、検索結果でウェブサイトを上位にランク付けする方法の研究です。ウェブサイトのリンクの使用を改善することは、有益な SEO テクニックのうちの一つです。

次のステップ

それでは、いくつかウェブページにリンクを設定しましょう。

  • すべてのリンクが URL を指しているので、より理論的な背景を得るには、URL とその構造について学びます。
  • もう少し実用的なものが欲しいですか? HTML 入門モジュールの記事「ハイパーリンクの作成」で、リンクの実装方法について詳しく説明しています。