戻る

今回はHTMLの基幹となる技術である「ハイパーリンク」について解説します。クリックすると別のページが開いたりする、いわゆる「リンク」のことです。

そして前回まで作っていた自己紹介ページにリンクを追加し、提出してもらうのが目標です。

教科書がある場合は、第２章７ (P.40) をあわせて参照してください。

まずは基本を勉強しましょう。

「ハイパーリンク」(Hyperlink)とは、別のページや画像などと結びつける機能です。単に「リンク」とも呼ばれます。

リンクはブラウザ上ではおおむね青色の文字に下線が引かれた姿で表され、クリックすることでリンク先のページなどを開くことができます。

これがよくあるリンクです

たとえばこのページにも、さまざまな部分にリンクが使われています。（図の赤い矢印部分がリンクです）

リンクはいたるところにありますね。

ページはリンク同士でつながることで、互いにアクセスできるようになります。例えば、あなたのサイトを閲覧している人は、最初のページであるindex.htmlに訪れますが¹⁾、そこからリンクでつながっていないページに辿り着くことはできません。

ページの中のどこかをつっつくと、別のページが出てきますよね？ あれはリンクでつながっているということなのです。

複数ページで構成されるサイトを作成する際は、各ページが互いにリンクで接続され、全てのページにアクセスできるように設計しましょう。

もちろん、一方通行ではなく、進んだあと、戻ってこれるような経路もリンクで作っておく必要があります。

ページ同士がリンクで繋がっているからこそネットは成立している、それぐらいに「リンク」は重要なのです！

それではリンクの作り方を解説しましょう。

ウェブページ上にリンクを作成するには <a>(アンカー・Anchor)²⁾を使用します。以下のような書き方をします。

<a href="リンク先アドレス">画面表示内容</a>

「画面表示内容」の部分が画面に表示され、青い色で下線が引かれたデザインに変化します。実際にはどこにリンクしているのかが良く分かるような文字を自由に書いてください。

そして「画面表示内容」の部分をクリックすると「リンク先アドレス」が開きます。

hrefは「Hypertext Reference（ハイパーテキストの参照）」の略です。

例えばGoogleにアクセスするためのリンクでは、次のようになります。試してみたい場合は、自己紹介ページの空いたスペースに書き込んで実験してみると良いでしょう。

<a href="http://www.google.co.jp/">グーグルはこちら</a>

グーグルはこちら

画面上に表示される「グーグルはこちら」部分をクリックすると「http://www.google.co.jp/」にアクセスできるというわけです。（クリックしたら、ブラウザの「⇦戻る」で戻ってこられます）

必ず href="～" でリンク先を設定するのを忘れないでください。

上の例の「画面表示内容」にあたる部分は文字でなくても構いません。例えば画像をクリックしたらリンクすることもできます。

例えば、あなたのサイト内にrequest.htmlというページがあり、button.gifという名前で のような画像が用意してあるとします。

このとき下のように書けば、画像をクリックしてリンク先であるrequest.htmlを開けるようになります。

<a href="request.html">
<img src="button.gif">
</a>

上の画像をクリックすると、基礎実習のページに移動します。ブラウザの「⇦戻る」で戻ってこられます。

この例の場合は、<a>～</a>の中に、画像表示するための<img>がまるごと入っている形です。<img>で画像を表示し、<a>～</a>でそのまわりを囲えば、画像をクリックするとリンクをクリックしたことになるのです。

そして href="request.html" のように、リンク先をファイル名にすると、あなたのサイト内から指定のファイルを探して開けます（当然、現在のファイルと同じ場所に request.html が存在しないとエラーとなります）。

このように<a>～</a>要素内に文字や画像などを入れれば、リンクにできます。押しボタンスイッチのように見える画像を入れれば、クリックした時に別のページを見せることができるというわけです。

いわゆる「バナー」などは基本的に、このような構造になっています。

href="～" で指定するリンク先が存在しない場合は、「404 Not Found」エラーが表示されます。エラー画面がどのようになるかは、環境によって異なります。

例えば、このページの場合は以下のようなエラー画面となります。
（クリックした場合は、エラー画面を×で閉じると戻ってこられます）

このリンクは誤ったリンクです。クリックすると、エラー画面を別窓で開きます。

アクセス先の入力間違いに注意しましょう。可能ならファイル名やホームページアドレスを入力する際に、コピー(Ctrl+C)、貼り付け(Ctrl+V)によって入力すると正確なのでおすすめです。

リンクは「リンク先アドレス」の種類を変えると様々な動作をします。以下に代表的なリンク先の設定方法を紹介します。

リンク先をホームページアドレス（URL）にするリンクです。もっとも標準的なリンクがこれです。
リンク先URLは http://（あるいは https://）を含め正確に記入してください。

<a href="http://www.yahoo.co.jp/">ここをクリックするとYahooにアクセスできます</a>

この方法はあなたのサイト外にある、別サイトに接続するための基本的な方法です。

リンク先としてURLではなく、単にHTMLファイル名を書くと、あなたのサイト内から指定されたHTMLファイルを探して表示します³⁾。

単にファイル名を書く場合、現在のHTMLファイルと同じフォルダ内にリンク先のHTMLファイルを配置しておいてください。

なおリンク先ファイルの書き方は、以前紹介した「絶対パス」「相対パス」が使えます。これらを使えば、別の場所にあるファイルにもリンクできます。詳しくは、第３回の資料で紹介した「パスについて」の記事を参照してください。

<a href="index.html">トップに戻る</a>
<a href="profile/index.html">自己紹介</a>

この方法はあなたのサイト内にある、別ページにアクセスするための基本的な方法です。

HTMLは１ファイルが１ページなので、ページ枚数が増えた場合には多用することになるでしょう。この記事の冒頭で解説したとおり、最初に表示される index.html からあらゆるページにアクセスできるよう、リンクでつなげておく必要があります。

リンク先をHTMLファイルではない、他の種類のファイルにした場合、ダウンロードリンクとなります。
例えば、WORDファイルやEXCELファイル、音楽ファイルや映像ファイルといったものをリンク先にした場合です。

このようなリンクをクリックした時に何が起こるかは、ページ閲覧者が利用しているブラウザの設定次第で変わりますが、おおむね以下のような動きをするはずです。

• 画像ファイル
  画像が直接表示されます。
• PDFファイルなどいくつかのファイル
  ブラウザ上に文章の内容が表示されます。
• その他一般的なファイル
  ダウンロードが始まります。

<a href="mycat.jpg">猫の画像</a>      <!-- JPG画像はクリックすると画像が表示されます。-->
<a href="context.pdf">配布資料</a>    <!-- PDFファイルはブラウザ上に直接内容が表示されます。-->
<a href="example.docx">練習問題</a>   <!-- WORDファイルはダウンロードリンクになります。-->

これらの動作は端末側の設定で変更できるので、どんな動作になるかは実際に試してみるのが一番かもしれません。

要するに、あなたがサイト上に掲載したものを閲覧者に配布したい場合などは、単にそのファイル名を書けば良いというわけです。（もちろん必要なファイルを用意し、HTMLファイルと同じ場所に置いておきましょう。ファイル名には半角英数文字だけを使う、といったルールももちろん適用されます）

リンクは別のページが開くのが一般的ですが、特殊な書き方をすると、同じページ内の別の位置にリンクすることもできます。

• ここでは、クリックする位置を「リンク元」、そのあと、移動先となる場所を「リンク先」と呼びます。
• 同ページリンクを設定する際は、「リンク元」と「リンク先」の両方を編集する必要があります。

具体的には、以下のように設定しましょう。

1. あらかじめページ内の「リンク先」となる場所に <a name="ラベル名"></a> のようにラベルを設置しておきます。

   <a name="top"></a>

   • ラベルを設置するときは、href="～" の代わりに name="～" を使うのがポイントです。
   • ラベル設置の際の <a name="ラベル名"> と </a> の間には、何も書かなくてＯＫです。
   • また、このリンクは画面上には表示されないため、見た目ではラベルが設置されていると分かりません。見た目に影響を与えず、単にリンク先の位置を決めるためだけのタグです。
   • 「ラベル名」は半角英数文字を使った自由なキーワードです。上の例では「top」としています。
     「ラベル名」の決め方には以下のようなルールがあります。
     • ラベル名は、同じページ内で重複しないように設定してください。
     • 使用できる文字は、半角の英数字「0～9 a～z A-Z」、ハイフン「-」、アンダーバー「_」、コロン「:」、ピリオド「.」です。（ハイフン以外の記号は使わない方が無難です）
     • １文字目はアルファベットで始める必要があります。（数字や記号で始めてはいけません。つまり「01」のようなラベルは認められません）
     • 大文字と小文字の区別があります。たとえば「TOP」「Top」「top」はそれぞれ別のラベルとみなされます。
2. 「リンク元」となる場所では、<a href="#ラベル名">のように、リンク先を「#を付けたラベル名」に設定します。

   <a href="#top">ここをクリックしてTOPに戻る</a>

   ここをクリックしてTOPに戻る

   • リンク元では、ラベル名にシャープ「#」を付けるのがポイントです。⁴⁾
   • リンク元では、通常のリンクと同じように<a>～</a>で囲った範囲が青色のリンクになります。

具体例を以下に示します。
「TOPに戻る」と書かれた部分をクリックすると、ラベル「top」を設置した位置まで自動的に移動できます。

同ページ内リンクで移動するのは、画面をスクロールさせるのと同じ動作ですが、縦に長いページ内で移動がスムーズに行えるようになるというメリットがあります。

例えば以下のように設定すれば「目次」機能を作る事もできます。目次の項目をクリックすると、文章内の各見出しに移動できるというわけです。

<h1>目次</h1>
<a href="#first">はじめに</a><br>
    ：     ：
    ：     ：
<a name="first"></a>
<h1>はじめに</h1>
<p>まずはじめに、今回のレポートの概要を説明します。第一に……

上の場合、目次の欄にある <a href="#first">はじめに</a> のリンクをクリックすると、実際の見出しである <a name="first"></a> が書かれた位置まで自動的に移動します。つまりページ冒頭に書いた目次から各章へ、すばやく移動できて便利というわけです。

ラベル名を応用すれば、別のページに設置されているラベルの位置にリンクすることもできます。
長いページの特定の部分を見せたい時に便利です。

移動先のHTMLファイルにあらかじめラベル <a name="～"></a> を設置しておき、リンクの際は<a href="ファイル名#ラベル名">～</a>と書きましょう。
「ファイル名」と「#ラベル名」をつなげて書くのがポイントです。

<a href="question.html#qa23">よくある質問23：動かない時は？</a>を参照してください。<br>

上の例では「question.html」ページ内に設置した「qa23」ラベル⁵⁾の位置に移動できます。例えばページの中にたくさんの よくある質問 が書かれている場合に、特定の質問をすばやく見せられるというわけです。

長いページの場合、移動するのが大変なので、あらかじめラベルを設置しておくとスムーズに移動できるでしょう。

リンクは通常、青色で下線が引かれたデザインとなります。また、過去にアクセスしたことがあるリンクは、紫色で下線が引かれたデザインになります。

まだアクセスしたことがないリンク

アクセスしたことがあるリンク

しかし例えば背景が青色系の場合、リンクの文字色も青色だと文字が背景に溶け込んでしまうので、見づらくなる場合があります。

まだアクセスしたことがないリンク

アクセスしたことがあるリンク

上記のような配色では、リンクがどこにあるのかよく見えません。

その場合は、あなたのHTMLの冒頭部分にある <body> に属性を追加し、リンクの色を見やすいものに変更しましょう。

<body link="#66aa00" vlink="darkgreen" alink="red">

<body>タグにlink属性を追加すると、リンクの文字色を変更できます。

同様にvlink属性(Visited link)を追加すると、アクセスしたことがあるリンクの文字色を、alink属性(Active link)を追加すると、マウスをクリックしている最中のリンク文字色を、それぞれ設定できます。

これらの設定は <body> で行うため、ページ全体に影響が及びます。

まだアクセスしたことがないリンク

アクセスしたことがあるリンク

リンクの色をページのデザインにマッチしたものに変えておくと良いでしょう。

例えば青い背景なら、リンク色を白っぽくしておくと見やすいでしょう。

まだアクセスしたことがないリンク

アクセスしたことがあるリンク

なおページ全体ではなく、部分的に色を変えたい場合は、<font color="xxxx">～</font> を使う方法もあります。
下の例では<font>を使って文字色を赤に設定しています。影響が及ぶ範囲は、このリンクだけです。

<a href="http://www.google.co.jp/"><font color="red">Googleはこちら</font></a><br>
<br>
<a href="http://www.google.co.jp/">こっちは普通のリンク</a>

グーグルはこちら

こっちは普通のリンク

<font color="xxxx">～</font> による設定は、<body> による設定より優先されるので、一箇所だけ色を変えたいときなどに便利です。

通常、一度アクセスしたことがあるリンクの色は紫色に変色しますが、変色させたくない場合はlinkとvlinkの色を同じ色に設定しておけば実質的に変色しなくなります。

例えば下の例の場合、通常のリンクの色(link)が「blue」で、アクセスしたことがあるリンクの色(vlink)も「blue」なので、アクセスの有無に関係なく、常に青色のリンクが表示され、変色を防げます。

<body link="blue" vlink="blue">

まだアクセスしたことがないリンク

アクセスしたことがあるリンク

リンクに専用の属性を加えれば、クリックした際に別のウインドウ（あるいは別のタブ）を開けるようになります。

具体的な設定方法を説明する前に、なぜリンク先を別ウインドウで開く必要があるのかを考えてみます。

通常リンクをクリックすると、ブラウザのウインドウはそのままに、画面の内容だけが別のページに切り替わります。しかしこの動作は不便な場合があります。例えば、あなたが作成したサイトの中にリンク集を作ったと想像してみましょう。下のようになったとします。

ページ閲覧者がYahooのリンクをクリックした場合、画面はYahooのものに切り替わります。そしてYahooのサイトを見終わった閲覧者がウインドウを閉じると、あなたサイトの画面に戻ること無く、画面が閉じられてしまいます。

他のリンクも見たかもしれない閲覧者は、せっかくあなたが用意した他リンクを見ること無く、別のサイトに興味を移してしまうかもしれません。 また、あなたのサイトを偶然見つけた閲覧者は、あなたのサイトに再び訪れることなく、そのまま忘れ去ってしまうかもしれません。たとえば広告料を支払ってあなたのサイトに集客をしている場合などは、せっかく訪れた訪問者を逃してしまう、いわゆる機会損失となり、目も当てられません。（広告にお金を払ってまでお客さんを呼んだのに、さっさとどこかに行ってしまうなんて！）

そこでリンク先を別ウインドウで開くようにすると、このような問題を防げます。リンクをクリックした閲覧者がウインドウを閉じても、あなたのサイトのウインドウがまだ残っているからです。

このように外部のサイトにリンクする場合や、複数のページに分岐したい場合は、リンク先を別ウインドウで開くようにすると良いでしょう。閲覧者がうっかりウインドウを閉じて、そのままあなたのサイトのことを忘れてしまわないようにする効果もあります。

前置きが長くなりましたが、具体的にHTMLで別ウインドウが開くリンクを作るには、以下のように記述します。

<a href="http://www.google.co.jp/" target="_blank">ここをクリックすると別窓でGoogleを開きます</a>

ここをクリックすると別窓でGoogleを開きます

target="_blank" が追加されているのがポイントです。

上のリンクをクリックすると、Googleのページが別ウインドウで開きます。ウインドウを×ボタンで閉じたら、この基礎実習のページに帰ってこれる様子が分かります。

もし別ウインドウで開く設定をしておかなかったなら、Googleのウインドウを閉じた際にウインドウは消えてしまい、基礎実習のページには帰ってこれません。大変です。

このように「target」（ターゲット）属性を追加し、「_blank」(先頭にアンダーライン「_」を付けて「ブランク」)⁶⁾ という専用の値を記入すると、別ウインドウで開くようになります。

何でも別ウインドウで開けば良いわけではありませんが、外部サイトにつながるリンクを設置する際などは、上記の別ウインドウ指定をしておくのがおすすめです⁷⁾。

ページ上に多くの画像を掲載したい場合、単純に画像をページ上に並べると、画像で画面が埋め尽くされ見づらい場合があります。特に高性能なカメラで撮影した写真映像などは解像度（画像の密度）が高いため、非常に大きな画像となる傾向があるので、そのまま掲載すると、写真が画面を埋め尽くしてしまう事態におちいります。

また大きな画像はデータ容量も大きいです。たくさん掲載されていると、ページを開くたびに大量のデータが一度に転送されるため、ウェブサーバーやネットワークの負担となります。閲覧者もページが開くまでに待たされるため、ストレスを感じるでしょう。 俗に言う「重いページ」です。

そこで、たくさん画像を掲載する際は、「縮小画像」を並べるようにすると良いでしょう。

そして、縮小画像をリンク化し、クリックすると大きな画像が表示されるよう設定すれば、ページのデザインとデータ転送量の両方に効果的です。
このような縮小画像のことをネット用語で「サムネイル」(thumbnail)と言います。⁸⁾

たとえば 大きな画像「myface.jpg」を掲載する場合、縮小画像「myface-s.jpg」を別途用意して、以下のようにHTMLを記述すると良いでしょう。

<a href="myface.jpg" target="_blank">
<img src="myface-s.jpg">
</a>

<img>タグで縮小画像「myface-s.jpg」を画面に表示させるのが基本です。縮小画像のファイル名には「small」の-sをつけるなど、区別しやすい工夫をすると良いでしょう。

そして<img>全体を<a>のリンクが囲っており、リンク先(href)として大きな画像「myface.jpg」が別窓で開くようにしてあります。

動作イメージは以下のとおりです。下の画像をクリックすると大きな画像が表示されます。そして画像を見終わってウインドウを閉じると、このページに帰ってこられます。

縮小画像（サムネイル）を作る作業はやや煩雑です。

たとえば Windows標準の「ペイント」アプリの場合は、対象の画像を読み込んだ後に「サイズ変更」ボタンを押して縮小できます。前回紹介した Paint.net のような画像編集アプリであれば、画像を読み込んだ状態で、「編集」→「画像解像度」や「イメージ」→「サイズ変更」といった設定で縮小できます。（アプリによって若干異なります）

画像の枚数が多いと作業は面倒になりますが、その場合は縮小画像を作成するための専用アプリケーションを使うなどすれば簡単に処理できます。例えばWindowsの代表的な画像縮小アプリケーションとしては、「縮小専用。」というツールがあります。

縮小専用。公式サイト
http://i-section.net/software/shukusen/

画像ファイルをドラッグし、このアプリのウインドウに放り込むだけで自動的にサムネイル（縮小画像）を作ってくれる無料のツールです。もしよければ参考にしてください。

• 別のページにアクセスするためには、リンクでつなげておく必要があります。
• リンクは以下のように設定します。

  <a href="リンク先">ここをクリックしてください</a>

• 画像をクリックしてリンクするようにもできます。

  <a href="リンク先"><img src="画像ファイル名"></a>

• リンク先に応じて、別のサイトにつなげたり、自分のサイトの別ページにつないだり、ダウンロードリンクや、画像表示リンクにしたりできます。
• リンク先を別窓で開くには、target="_blank" を追加します。

  <a href="リンク先" target="_blank">ここをクリックしてください</a>

• 同ページ内でリンクするには、<a name="ラベル名"> でラベルを設置します。そして、<a href="#ラベル名"> でリンクします。
  リンク元： <a href="#ラベル名">ここをクリックしてください</a>
  　　　　　　↓↓↓
  リンク先： <a name="ラベル名"></a>

自己紹介サイト作成の続きを行います。前回までの授業で作成した「自己紹介ページ」（ここではjikosyokai.htmlとします）を以下のように編集しましょう。

1. 以下の練習用ファイルをダウンロードしましょう。圧縮フォルダ(ZIP形式)で圧縮されているので、解凍して中身を取り出しましょう。
   
   練習用ファイル詰め合わせ jyokyu05example.zip
   
   圧縮フォルダの中には diary.html　link.html　kuma.png　kuma-s.pngの４ファイルが格納されています。
2. diary.htmlは日記ページになっています。ページ上部の「2010年3月」「2010年4月」「2010年5月」と書かれている部分をクリックすると、ページ内の対応する見出しに同ページ内リンクするように設定してください。同ページ内リンクの項が参考になります。
   • 「リンク元」はdiary.htmlの上の方にある、以下のような部分です。

     <h2>飼育日記</h2>
     <ul>
      <li>２０１０年３月</li>
      <li>２０１０年４月</li>
      <li>２０１０年５月</li>
     </ul>

     ここをリンク元にするので、以下のように編集する必要があるでしょう。（とりあえず３月分だけ編集しました。他の月も同様に編集してください）

     <h2>飼育日記</h2>
     <ul>
      <li><a href="#march">２０１０年３月</a></li>
      <li>２０１０年４月</li>
      <li>２０１０年５月</li>
     </ul>

   • 一方、「リンク先」は、下に書かれた日記の文章へと進み、各章の見出しとなっている<h3>～</h3>の部分です。

     <h3>２０１０年３月</h3>
       : 省略
     <h3>２０１０年４月</h3>
       : 省略
     <h3>２０１０年５月</h3>

     のような部分です。
     ここをリンク先にするので、以下のように編集する必要があるでしょう。（とりあえず３月分だけ編集しました）

     <h3><a name="march"></a>２０１０年３月</h3>
       : 省略
     <h3>２０１０年４月</h3>
       : 省略
     <h3>２０１０年５月</h3>

     回答例はこちら。
     ページ冒頭部分で「３月」「４月」「５月」のリンクをクリックすると、同ページ内リンクで、それぞれの月の見出しに移動できる様子が分かります。
     回答例のページ内で「右クリック」→「ソースの表示」等の操作を行えばHTMLの書き方を確認できます。

1. kuma-s.pngはkuma.pngの縮小画像（サムネイル）です。あなたの自己紹介ページ（jikosyokai.html）内のどこかにkuma-s.pngを掲載し、画像をクリックしたら別窓でkuma.pngが開くように設定してください。参考：画像掲載時の工夫の項が参考になります。

   クリックすると大きな画像が別窓で開きます。
2. トップページである自己紹介ページ（jikosyokai.html）内にリンクを追加して、diary.htmlとlink.htmlにそれぞれアクセスできるようにしてください。たとえば日記の場合は、以下のように追記すると良いでしょう。

   <a href="diary.html">飼育日記</a><br>

   同様に、リンク集ページ（link.html）へもリンクを作ってください。

3. link.htmlはリンク集のページです。リンクを追加して、あなたのおすすめホームページを３サイト程度掲載し、クリックしたら別窓で各ページが開くようにしてください。
   • どんなサイトを紹介するかは、あなたの自由です。面白そうだと思うサイトを自由に紹介してください。
   • また、ページの一番下で「戻る」をクリックすると、自己紹介ページ（jikosyokai.html）に戻れるようリンクを設定してください。リンク先をjikosyokai.htmlにすればＯＫです。

     <a href="jikosyokai.html">戻る</a>

     • もちろん、トップページを jikosyokai.html と異なる名前で作っている場合は、リンク先を適切に修正してください。😁
   • 先ほど編集した日記diary.htmlのページも同様に、ページの一番下にある「戻る」をクリックすると、自己紹介ページ（jikosyokai.html）に戻れるようリンクを設定してください。

以下のような設定項目を確認し、各部が正しく機能することを確認してください。

自己紹介ページ（jikosyokai.html）の内容は以下のようになるでしょう。ページの下部にリンクやクマの画像が追加されています。

ページに必要なファイル（jikosyokai.html　diary.html　link.html　kuma.png　kuma-s.png その他掲載した画像ファイルなど）を全て「圧縮フォルダ」機能を使って単一のファイルに圧縮し、moodleにアップロードして提出してください。

提出期限は、次週の授業日いっぱいまでとします。

学習支援システム moodle
https://cclms.kyoto-su.ac.jp/

moodleへの課題提出方法が分からない場合は、こちらを参照してください。
moodleに課題をアップロードする方法

圧縮フォルダの作り方が分からない場合はこちらを参考にしてください。

以上で今回の作業は終了です。おつかれさまでした。

戻る