logo

パレット - カラフルに🎨

Palette — ビジュアルページビルダー、デザインの専門知識は不要です。

ライブデモ パレットをダウンロード

Scroll
  1. ホーム
  2. Blog

HTML の第一歩 — レッスン 4 — リンク（ハイパーリンク）

04/12/2019, by Ivan

HTML の最も基本的な部分、HTML が作られた目的そのもの、つまりハイパーリンク（あるいは単にリンク）にたどり着きました。リンクはさまざまな資料の間の関連を組織する方法です。10 万個のテキストファイルがあるとして、それらに分類目録を作るとしても、各目録に 200 のテキストドキュメントの説明があるとしても、500 の分類が必要になります。この 500 の分類をすべて見て必要な情報を見つけるには、多くの時間が必要です。では、リンクはどうやって私たちの生活を楽にしてくれるのでしょう？

リンクは 2 つの HTML ドキュメントを任意の形で結びつけます。各 HTML ドキュメントには名前があり、しかも一意の名前です。このようにして、1 つのドキュメントから他の 10 個の似た人気のドキュメントに移動でき、必要な情報を見つける成功のチャンスが増えます。

ウェブサイトでも同じ原理です。サイトのページには一意の名前 URL（Uniform Resource Locator —統一資源位置指定子）があります。リンク先のページの一意の名前を <a></a> タグに書く必要があります。一般的には次のようになります。

<a href="一意のパス">リンクのテキスト</a>

このコードで href は A タグの属性です。属性が何かは前のレッスンですでに見ました。では、index.html があるのと同じフォルダーにもう 1 つファイルを作成しましょう。file.html という名前にして、次のコードを入れます。

<html>
  <head>
    <title>私の 2 番目の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の 2 番目の HTML ドキュメント</h1>
  </body>
</html>

そして index.html には次のコードを書きます。

<html>
  <head>
    <title>私の最初の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の最初の HTML ドキュメント</h1>
    <p>
	  <a href="file.html">2 番目のドキュメントへのリンク</a>
	</p>
  </body>
</html>

これで、ブラウザで index.html にアクセスすると、file.html に移動できるリンクが得られます。では、ファイルへのパスの書き方を練習しましょう。両方のファイルが同じフォルダーにある場合、href 属性にファイル名を書くと、ブラウザは単にファイル名が指定されている場合、そのファイルは元のファイルと同じフォルダーにあると理解します。では、ファイルを同じフォルダーに保存したくない場合、リンクをどう作るのでしょう？そのときに相対パスが役立ちます。

相対パス

相対パスは、元のファイルを基準にファイルへのパスを見つけるためこう呼ばれます。index.html ファイルのあるフォルダーに files フォルダーを作成しましょう。このフォルダーに file.html ファイルを移動します。今、ブラウザで index.html ファイルのリンクをたどると、ブラウザは file.html ファイルを見つけられなくなります。index.html ファイルを基準にその位置を変更したからです。

今度は index.html を基準にしたパスを使います。フォルダーを指定するにはスラッシュを使用します。例えばこう:

/Program Files/MSOffice/

パスの起点を指定するには ./（ドットスラッシュ）を書きます。このように、index.html ファイルから files フォルダーへのパスは次のようになります。

./files/

あとはパスの最後にファイル名を書き加えて、パスが file.html ファイルに至ることを示すだけです。

./files/file.html

では、index.html のファイルへのパスを修正しましょう。

<html>
  <head>
    <title>私の最初の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の最初の HTML ドキュメント</h1>
    <p>
	  <a href="./files/file.html">2 番目のドキュメントへのリンク</a>
	</p>
  </body>
</html>

index.html ドキュメントを保存して、ブラウザのページを更新してください（index.html のページが開いているはずです）。これで file.html へのリンクが再び機能します。また、次のように書けることにも注意してください。

<a href="files/file.html">2 番目のドキュメントへのリンク</a>

ブラウザは ./ なしでもこのリンクを理解します。しかし、次のように書くと:

<a href="/files/file.html">2 番目のドキュメントへのリンク</a>

これはもう正しくないパスになります。このようなパスは絶対的に指定されており、index.html ファイルを基準にしていないからです。つまり、相対パスを書きたい場合は、ドットスラッシュを使うか、単にパスを書き始めてください。

あとは file.html ファイルから index.html ファイルへの逆リンクを作るだけです。まずこのパスが相対的であることを指定します。

./

次に、ファイルが 1 つ上のレベルにあることを指定する必要があります。つまり files ディレクトリから出る必要があり、そうすれば index.html ファイルが見つかります。このために ../（ドット 2 つスラッシュ）を使用します。

./../

もし files フォルダーの中にもう 1 つフォルダーがあり、そのフォルダーに .html ファイルがあった場合、そのファイルからのリンクは ./../../ から始まります。つまり、各フォルダーにつき ../ を書きます。

そして今度はパスに index.html というファイル名を追加しましょう。

./../index.html

パスができました。file.html ファイルに挿入しましょう。

<html>
  <head>
    <title>私の 2 番目の HTML ドキュメント</title>
  </head>
  <body>
    <h1>私の 2 番目の HTML ドキュメント</h1>
	<p>
	  <a href="./../index.html">最初のドキュメントへのリンク</a>
	</p>
  </body>
</html>

これで、あるページから別のページへ、そして戻ることができます。ブラウザで URL がどう変わるか見てみましょう。

では、ドットなしでスラッシュから始まるパス、つまり絶対パスについて話した部分に戻りましょう。

絶対パス

絶対パスはインターネット上のサイトで使用されます。例えば Drupal ではサイトのすべてのページが 1 つのファイル index.php から読み込まれるので、/ を書くと index.php ファイルからのパスを指定することになります。自分のコンピューターの index.html で絶対パスを指定すると、パスはあなたのディスクのルートディレクトリから始まります。サイトで相対リンクを指定することもできますが、絶対リンクの方がはるかに便利です。というのも、フォルダーやファイルを移動すると、相対で指定したパスは壊れます。例えばファイルをディレクトリに移動すると、すべてのパスが ../ の分だけ長くなる必要があります。この点で絶対パスの方が便利です。

絶対パスは / で始まるか、https://drupalbook.org/ru/ のようなサイト名で始まります。どちらでもブラウザは私たちが意味することを理解します。絶対パスは次のような形です。

/index.html

/files/file.html

/files2/file2.html

そして index.html と file.html のファイルから file2.html へのリンクを作りたい場合、それらは異なるフォルダーにあるにもかかわらず同じように見えます。

<a href="/files2/file2.html">リンク</a>

上で書いたように、このコードは index.html でも file.html でも機能し、file2.html でも自分自身のドキュメントを指すこのリンクを書くことができます。

target 属性

target 属性は非常に重要で、リンクがあなたのサイトから別のサイトに至るときによく必要になります。この属性は、リンク先のサイトがどう開くかを指定できます。

_blank — 新しいウィンドウまたはタブで;

_self — リンクと同じウィンドウで;

_parent — 親フレームで（フレームの使用は時代遅れとされ、AJAX に取って代わられました）;

_top — すべてのフレームをキャンセルし、ブラウザの全ウィンドウにページを読み込みます。フレームがない場合、この値は _self のように機能します。

おそらく必要なのは _blank の値だけでしょう。_self はデフォルトで使用されるので書かなくても構いません。

<a href="/files2/file2.html" target="_blank">リンク</a>

rel 属性

rel 属性は、現在のドキュメントとリンク先のドキュメントの関係（relation — 関係）を示します。最もよく使われるのは rel="nofollow" で、これは Google、Yandex のインデックス作成からこれらのリンクを閉じます。例えば外部サイトへのリンクを置く場合、rel="nofollow" で閉じて target="_blank" を置く方が良いです。

<a href="/files2/file2.html" target="_blank" rel="nofollow">リンク</a>