コンピュータ基礎実習

ユーザ用ツール

サイト用ツール

現在位置: コンピュータ基礎実習 » コンピュータ基礎実習 (上級) » 第5回 ハイパーリンクの作成
jyokyu:j05

目次

第5回 ハイパーリンクの作成

戻る

作業準備とおさらい

今回は、前々回（第３回）まで編集していた自己紹介ページの書き換え作業の続きを行います。

前々回の段階で、USBメモリ上に MicroApache というサーバーを設置していました。
これはサーバー経由でホームページにアクセスするという正式な手順を踏むためです。

今回は、自己紹介ページ jikosyokai.html を主に編集します。

ファイルの配置状況

ファイルの配置は以下のようになっているはずです。

自己紹介ページ

現在、自己紹介ページ jikosyokai.html の内容は、おおむね以下のようになっているでしょう（実際には文章の内容や、使っている色、画像ファイルの名前など、皆さんそれぞれ異なるかと思います）。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介</title>ページタイトル
</head>
 
<body bgcolor="#ddeeff" text="#004488">背景色と文字の色

<!-- 本文ここから -->コンテンツ
 
コンピュータ基礎実習 上級 ○曜○限<br>
学生番号 １２３４５６<br>
学部     外国語<br>
学年     1<br>
氏名     ○○○○<br>

<h1><font color="#0088ff">自己紹介</font></h1>文字色の変更 font大見出し h1

<p><img src="neko.jpg"></p>画像の表示 img

<p>こんにちは、○○です。 コンピュータ基礎実習を受けることになりました！京都市内の実家から通っています。<br>
ウェブページは普段見るだけですが、この講義はページを作成する授業と聞いてどんなものか興味があります。</p>

<h2><font color="#0088ff">● 趣味または得意なこと ●</font></h2>中見出し h2

<p>友人と月に何度かカラオケに行きます。安い店を知っているので行く回数は多めです。気分転換にいいですね。<br>
あと最近はAmazonのKindleで電子書籍を読むのがマイブームです。読み終わった本がかさばらず、値段がちょっとだけ安い事が多いので助かります。最近面白いと思った作品は「鬼滅の刃」です。流行の作品なので読んでみましたが、意外と面白かったです。キャラクターの目的がはっきりしているのが良いと思いました。先生にもお勧めします、未読ならいかがですか？</p>

<h2><font color="#0088ff">● ウェブページ作成について ●</font></h2>中見出し h2

<p>インターネットは普段良く見ていますが、ページを作ったことはありません。今度サークルのページをつくろうかと思っています。トップページとリンク集と、簡単な掲示板があれば良いかなと思っています。どこまでできるかわかりませんががんばります。</p>

<h2><font color="#0088ff">● 先生に一言 ●</font></h2>中見出し h2

<p>がんばって受講しますのでお手柔らかにお願いします。</p>

<!-- 本文ここまで -->
</body>
</html>
jikosyokai.htmlの例

  • <title>～</title> の範囲内にページのタイトルを記入しましょう。
  • <body>～</body> の範囲内に、画面に表示する内容（コンテンツ）をすべて記入しましょう。

実行例

ページの背景に色がついて、画像が表示されていることでしょう。

サーバーを準備する

それでは以下の手順で MicroApache サーバーを起動し、作業の準備を行いましょう。

  1. USBメモリ内の run.cmd を実行して、MicroApache サーバーを起動します。
    自動的にブラウザが起動し、http://localhost:8800/ が開いてトップページ index.html が表示されます。
  2. http://localhost:8800/jikosyokai.html のようなアドレスにアクセスして、自己紹介ページ jikosyokai.html をブラウザに表示させましょう。
  3. USBメモリ内の htdocs フォルダ内にある jikosyokai.html を、サクラエディタなどのテキストエディタに読み込ませて、ページの内容を編集できる状態にしましょう。

今回のテーマ

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

リンクは基本的な使い方から発展し、さまざまな用途がある奥深いものなので、ぜひ使い方を学んでください。

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

ハイパーリンクとは

リンクについて第２回でも簡単に触れましたが、ここで再び基本をおさらいしておきましょう。

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

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

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

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

さまざまな所にあるリンク

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

２ページ以上作るなら、リンクは必須のものと言えるでしょう。

リンクで接続する

ページが増えてきたら、リンクでつないで、すみずみまでアクセスできるようにしましょう。

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

仮に、サーバー上にある xyz.html にどこからもリンクが張られて居なかったとしても、正確なページの名前が分かっていれば、http://localhost:8800/xyz.html のようにURLのうしろにファイル名を正しく書くことでアクセスできます。 しかしながら、xyz.html がサーバーに有ることを知っているのは製作者である貴方だけでしょう。ふらりとサイトにやってきた閲覧者は、そんなことは知る由もないので、xyz.html と入力することなど、きっと思いつきもしないでしょう。たとえ知っていたとしても、いちいち入力するのは面倒ですし。

というわけで、せっかくページを作っても、最初の入口である index.html から他のページにリンクをつなげておかないと、スムーズにアクセスすることができません。ですから、あなたがサイトを作るときは、全てのページにアクセスできるよう、もれなくリンクをつなげておきましょう。

j05_14.jpg

大学のページの例
最初のページ index.html には、
サイト内の各ページに隅々までアクセスできるような
リンクを設置しましょう。

もちろん、一方通行ではなく、進んだあと、戻ってこれるような経路もリンクで作っておかないとスムーズに移動できません。

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

リンクの書き方

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

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

HTML

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

実行例

画面表示内容

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

そして「画面表示内容」の部分をクリックすると、href="リンク先アドレス" で指定した場所が開きます。

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

具体例

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

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

グーグルはこちら

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

必ず href="～" でリンク先を設定するのを忘れないでください。href 属性を設定しないとリンクは意味を持ちません。

応用

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

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

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

HTML

<a href="request.html"><img src="button.gif"></a>
画像のリンク化
a タグが img タグを囲っています。

実行例

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

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

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

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

よくある小さなバナーなどは基本的に、このような構造になっています。

リンク先を間違えたらどうなる

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

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

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

大学が表示するエラー画面の例

京都産業大学のサーバーは、上のようにいろいろと豪華なデザインでエラー画面を表示するかも知れません。

MicroApacheサーバーでは、もっとシンプルなエラー画面が出ることでしょう。 

Not Found

The requested URL /xyz.html was not found on this server.
MicroApacheのシンプルなエラー画面例
「リクエストされたURL xyz.html はこのサーバー上で見つかりません」

このようにサーバーによってエラーの見た目はだいぶ異なります。

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

さまざまなリンク先

リンク先には、実はいろいろな種類があります。
「リンク先アドレス」を変えることで、リンクはさまざまな動きをします。

以下に代表的なリンク先の設定方法を紹介します。

別サイトにリンク

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

<a href="https://www.yahoo.co.jp/">Yahooにアクセス！</a>

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

サイト内にリンク

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

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

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

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

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

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

最初のページ index.html からは
各ページにリンクを繋げておきましょう。

ダウンロードリンク

リンク先をHTMLファイルではない、他の種類のファイルにした場合、自動的にダウンロードリンクとなります。
違いは、リンク先がWORDファイルやEXCELファイル、音楽ファイルや映像ファイルといったものになっているだけで、あとは同じです。

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

  • 画像ファイル
    画像が直接表示されます。
  • 音楽ファイル
    ブラウザ上で音楽が再生されます。
  • PDFファイルなどいくつかのファイル
    ブラウザ上に文章の内容が表示されます。
  • その他一般的なファイル
    ダウンロードが始まります。ファイルをあなたのパソコン上に保存します。
<!-- JPG画像へのリンクは、クリックで画像が表示されます。-->
<a href="mycat.jpg">猫の画像</a>
 
<!-- PDFファイルへのリンクは、クリックで直接書類の中身が表示されます。-->
<a href="context.pdf">配布資料</a>
 
<!-- WORDファイルへのリンクは、クリックでダウンロードが始まります。-->
<a href="example.docx">練習問題</a>

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

要するに、あなたがサイト上に掲載したものを閲覧者に配布したい場合などは、単にそのファイル名を書けば良いというわけです。

  • もちろん必要なファイルを用意し、HTMLファイルと同じ場所に置いておきましょう。
  • ファイル名には半角英数文字だけを使う、といったおなじみのルールも守りましょう。

同ページ内リンク

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

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

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

リンク先

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

<a name="top"></a>
リンク先の書き方

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

リンク元

一方、リンク元 となる場所では、<a href="#ラベル名">のように、リンク先を「#を付けたラベル名」に設定します。

<a href="#top">ここをクリックしてTOPに戻る</a>
リンク元の書き方
ここをクリックしてTOPに戻る

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

具体例

実際に設置する例を下に示します。

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

HTML

実行例

書き方が似ているので注意

「リンク元」と「リンク先」で書き方が微妙に異なります。
name と href の違い、ラベル名の # のあり・なしに注目してください。

<!-- リンク先 -->
<a name="top"></a>

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

余裕があるなら jikosyokai.html の一番下から、ページの一番上端に戻る同ページ内リンクを設置してみましょう。ちょうど上に示した例と同じように書けば動作するはずです。

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

後で課題に取り組む際に、この同ページ内リンクを使用しますので、リンクの仕方を把握しておいてください。

応用1：目次を作る

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

<h1>目次</h1>
<a href="#first">はじめに</a><br>  <!-- ここをクリックすると... -->
    ：     ：
    ：     ：
<a name="first"></a>               <!-- ここへと移動します -->
<h1>はじめに</h1>
<p>まずはじめに、今回のレポートの概要を説明します。第一に……

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

応用2：別ページの特定の場所につなげる

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

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

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

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

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

リンクの色を変える

次は、リンクの色に注目してみましょう。

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

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

アクセスしたことがあるリンク
クリックしたことがないリンクと、あるリンク
初期デザイン

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

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

アクセスしたことがあるリンク
背景の色とリンクの色が似ていて
めっちゃ見づらい！

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

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

<body link="#66aa00" vlink="darkgreen" >
リンク色の変更

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

アクセスしたことがあるリンク
緑色に変えてみた例

このように <body> タグに link 属性を追加すると、リンクの文字色を変更できます。
同様に vlink 属性(Visited link)を追加すると、アクセスしたことがあるリンクの文字色をそれぞれ設定できます。

これらの設定は <body> に対して行うため、ページ全体に影響が及ぶので、注意してください。

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

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

<body bgcolor="darkblue" link="skyblue" vlink="deepskyblue">

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

アクセスしたことがあるリンク
白っぽいリンク
skyblue と deepskyblue
見やすい！

ただしあまり奇抜な色にすると、ページの閲覧者にリンクと認識してもらえない可能性があるので注意しましょう。

一箇所だけリンクの色を変えたい

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

<p><a href="http://www.google.co.jp/">
<font color="red">Googleはこちら</font>
</a></p>

<p><a href="http://www.google.co.jp/">こっちは普通のリンク</a></a>
一部のリンクだけ色を変える

グーグルはこちら

こっちは普通のリンク

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

リンクを変色させない

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

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

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

link と vlink を同じ blue に設定すると……

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

アクセスしたことがあるリンク
クリックしてもリンクの色が変色しないようになりました

一度アクセスしたことがあるかどうかは気にしない、それよりもリンクの色を統一したい時にはこの設定が良いでしょう。

リンク先を別ウインドウで開く

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

なぜ別ウインドウで開く必要があるのか

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

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

リンク集の例
色々なリンクを掲載しているとします

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

j05_04.jpg

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

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

j05_05.jpg

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

別ウインドウリンクを作る方法

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

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

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

基本は通常のリンクと同じ書き方ですが、target="_blank" のように target 属性が追加されているのがポイントです。

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

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

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

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

参考：画像掲載時の工夫

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

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

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

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

j05_06.jpg

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

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

基本は <img> タグを使って縮小画像 myface-s.jpg のほうを画面に表示させます。<img src="myface-s.jpg">
最初に画面に見せるのはあくまで縮小画像というわけです。
縮小画像のファイル名には small（スモール）を意味する -s をつけるなど、元画像とサムネイルが区別しやすい工夫をすると良いでしょう。

そしてその <img> 全体を <a>～</a> のリンクが囲っており、リンク先 href が元の大きな画像 myface.jpg になっています。（さらに target="_blank" で別窓で開くようにもしてあります）

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

j05_07.jpg

クリックすると大きな画像が別窓で表示される例
（実際にクリックしてみましょう）

縮小画像の作り方

サムネイルを作るためには、元々の画像を小さくした「縮小画像」を別に作る必要があります。

たとえば Windows標準の「ペイント」アプリの場合は、対象の画像を読み込んだ後に「サイズ変更」ボタンを押して縮小できます。

前回の授業で紹介した画像編集アプリ Paint.net であれば、画像を読み込んだ状態で「画像」メニュー →「画像サイズを変更（Ctrl+R）」を選択すると縮小できます。

他の画像編集アプリでも、だいたい似たような「編集」→「画像解像度」など、ほぼ同様の操作で縮小処理ができます。

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

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

画像ファイルをドラッグし、このアプリのウインドウに放り込むだけで自動的にサムネイル（縮小画像）を作ってくれる無料の Windows 用ツールです。もしよければ参考にしてください。アプリの使い方は上記公式サイトを見ると分かりやすいと思います。

まとめ

今回はハイパーリンクに関する様々なテクニックを紹介しました。

  • リンクでスムーズなアクセス
    各ページにスムーズにアクセスするために、最初のページ index.html から全てのページにリンクでつなげておきましょう。
  • リンクの基本
    リンクは以下のように設定します。
    <a href="リンク先">ここをクリックしてください</a>
  • 画像を使ったリンク
    画像をクリックしてリンクするようにもできます。<img> タグをリンクで囲いましょう。
    <a href="リンク先"><img src="画像ファイル名"></a>
  • さまざまなリンク先
    リンク先を変えれば、別のサイトにつなげたり、自分のサイトの別ページにつないだり、ダウンロードリンクや、画像表示リンクにしたりできます。これらはリンク先に応じて自動的に切り替わります。
    <a href="xyz.docx">ダウンロードリンク</a>
  • 別窓で開くリンク
    リンク先を別窓で開くには、target="_blank" を追加します。
    <a href="リンク先" target="_blank">ここをクリックしてください</a>
  • 同ページ内リンク
    同じページ内の特定の位置にリンクするには、<a name="ラベル名"> でラベルを設置します。そして、<a href="#ラベル名"> でリンクします。
    リンク元：
    <a href="#ラベル名">ここをクリックしてください</a>
    　　　　　　↓↓↓
    リンク先：
    <a name="ラベル名"></a>
  • リンクの色を変える
    リンクの色は <body> タグに属性を追加して設定できます。
    <body link="green" vlink="darkgreen">

課題

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

  1. 以下の練習用ファイルをダウンロードしましょう。圧縮フォルダ(ZIP形式)で圧縮されているので、解凍して中身を取り出しましょう。

    練習用ファイル詰め合わせ jyokyu05example.zip

    圧縮フォルダの中には diary.html　link.html　kuma.png　kuma-s.pngの４ファイルが格納されています。
    中身を取り出して、jikosyokai.html と同じ場所に配置してください。
    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>

      リンク元
      diary.html の冒頭部分
      ここをリンク元にするので、以下のように編集する必要があるでしょう。
      リンク先は #march #april #may のようにそれぞれ変えてください。
      <h2>飼育日記</h2>
<ul>
 <li><a href="#march">２０１０年３月</a></li>
 <li><a href="#april">２０１０年４月</a></li>
 <li><a href="#may">２０１０年５月</a></li>
</ul>
      diary.html を編集してリンクを設置

    • 一方、「リンク先」にはラベルを設置します。下に書かれた日記の文章へと進み、各章の見出しとなっている<h3>～</h3>の部分を見つけます。
      <h3>２０１０年３月</h3>
  : 省略
<h3>２０１０年４月</h3>
  : 省略
<h3>２０１０年５月</h3>

      リンク先
      diary.html で上記のような部分を探しましょう。
      ここをリンク先にするので、以下のように編集する必要があるでしょう。
      ラベル名は march、april、may のようにそれぞれ変えてください。
      <h3><a name="march"></a>２０１０年３月</h3>
  : 省略
<h3><a name="april"></a>２０１０年４月</h3>
  : 省略
<h3><a name="may"></a>２０１０年５月</h3>
      diary.html を編集してラベルの設置
      回答例はこちら。

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

      なおMac標準のSafariブラウザの場合は、上記の方法ではHTMLの確認ができないので、以下の作業を行ってください。

      1. MacでSafariを起動し、上部メニューの「Safari」→「環境設定」を開き、「⚙詳細」タブの「メニューバーに"開発"メニューを表示」チェックをＯＮにします。
      2. これで上部メニューに「開発」が追加されるので、以降は「開発」→「ページのソースを表示」でHTMLの確認ができるようになります。
  3. あなたの自己紹介ページ jikosyokai.html 内のどこか見やすい場所にクマの小さな画像 kuma-s.png を掲載し、画像をクリックしたら別窓でクマの大きな画像 kuma.pngが開くように設定してください。kuma-s.png は kuma.png の縮小画像（サムネイル）です。参考：画像掲載時の工夫の項が参考になります。
    <a href="kuma.png" target="_blank">
  <img src="kuma-s.png">
</a>
    jikosyokai.html にクマの画像を掲載
    各タグの構造に注目しながら入力してみましょう。
    実行例
    クリックすると大きな画像が別窓で開きます。
  4. 自己紹介ページ jikosyokai.html 内の好きな場所にリンクを追加して、diary.html と link.html にそれぞれアクセスできるようにしてください。たとえば日記の場合は、以下のように追記すると良いでしょう。
    <a href="diary.html">飼育日記</a><br>
    jikosyokai.html を編集して
    diary.html につながるリンクを追加
    同様に、リンク集ページ link.html につながるリンクも作ってください。上のリンクをコピー・貼り付けして、ちょっと手直しすれば簡単に作れるでしょう。
    <a href="link.html">リンク集</a><br>
    同様に link.html につながるリンクも追加
  5. link.html はリンク集のページです。リンクを追加して、あなたの好きなおすすめホームページを３つほど掲載し、クリックしたら別窓で各ページが開くようにしてください。
    • どんなサイトを紹介するかは、あなたの自由です。面白そうだと思うサイトを自由に紹介してください。
    • ブラウザで目的のページを開いて、上部のアドレス欄に書かれている https://abc.com/xyz.html のような部分をコピー・貼り付けすると、簡単にURLを入手できるので良いでしょう。
      <a href="https://abc.com/" target="_blank">なんたらのページ</a><br>
<br>
<a href="https://xyz.com/abc/def/" target="_blank">かんたらのページ</a><br>
<br>
<a href="https://opq101.com/def/" target="_blank">どこそこのページ</a><br>
      link.html には、あなたの好きなページへのリンクを３つ追加
      外部のサイトは別窓で開く設定がおすすめ。target="_blank"
    • また、ページの一番下で「戻る」をクリックすると、自己紹介ページ jikosyokai.html に戻れるようリンクを設定してください。リンク先を jikosyokai.html にすればＯＫです。
    • さらに先ほど編集した日記 diary.html のページも同様に、ページの一番下にある「戻る」をクリックすると、自己紹介ページ jikosyokai.html に戻れるようリンクを設定してください。
      <a href="jikosyokai.html">戻る</a>
      diary.html や link.htmlに
      自己紹介ページに戻るリンクを設置

      もちろん、自己紹介ページを jikosyokai.html と異なる名前で作っている場合は、リンク先を実際のファイル名に置き換えてつじつまを合わせてください。😁

完成図

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

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

j05_09.jpg

提出

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

圧縮フォルダの名前は 学生番号 氏名 リンク.zip としてください。

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

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

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

圧縮フォルダの使い方については基礎実習ページの補足資料コーナーにある「圧縮フォルダの利用方法」記事を参照してください。

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

戻る

1)
一般的なウェブサーバー（ホームページを管理するコンピューター）では通常、「ファイル名を指定せずにアクセスした場合に、最初に開くHTMLファイルは index.html とする」という暗黙の了解があります。
Microapacheでもそのようなルールになっています。
なので index.html は外から来た人が最初に訪れるページであると言えます。
2)
船を係留するのにつかう「錨（いかり）」の意味です⚓。錨が別のページにくっついて繋がっているイメージです。
3)
https://はSSLと呼ばれるセキュリティ機能に守られたサイトであることを意味しています。要するに、アクセス情報が外部に漏れにくい、やや安全なサイトというわけです。
4)
なお、あなたのサイト内のファイルをhttp://localhost:8800/xyz.htmlのようなURLで表してもリンクは問題なく動作しますが、処理が少し遅くなります。
5)
# は「ラベルである」ことを示す記号だと考えると分かりやすいでしょう。 # が付いていないとHTMLは、そういう名前のファイルが有ると思って探してしまいますから。
6)
「23番目のQA」的な意味だと思ってください。
7)
アンダースコア _ は、標準的な日本語キーボードではShift+ ろ キーで入力できます。
8)
リンク先を同じウインドウで開くか、別ウインドウで開くかは、難しい問題です。
「どのようにウインドウを開くかは利用者の好きに決めさせて欲しい」、「ブラウザの『戻る』で全て戻れる方が良い」という理由で同ウインドウを推奨する意見もありますが、サイト制作者側としては「なるべく閲覧者に脱線して欲しくない」「自分のサイトに帰ってきてほしい」という理由で別ウインドウを推奨する意見もあります。
9)
Thumb-nail を直訳すると「親指の爪」です。「非常に小さいもの」を意味したりもします。「コンパクトにしたもの」的な意味合いから転じて、本などの「あらすじ」といった意味でも使われます。ネット用語では更に変化して「お試し用の縮小画像」的な使われ方するようになったものと思われます。
jyokyu/j05.txt · 最終更新: 2025/05/13 19:51 by 127.0.0.1

ページ用ツール

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki