Home >> 映像配信入門 >> 第5章 リンクに関するタグ

第5章 リンクに関するタグ

1.<a>タグ

さて本章では HTML 文書の重要な機能であるリンクに関するふたつのタグ、<a>と<img>についてお話ししましょう。WYGIWYG 型エディタを使おうと決めてる人も、これだけは読んでおいて下さい。

前章でも出てきた <a>タグは、「リンク」という言葉から普通にイメージされる文字列をクリックしてジャンプという機能を提供します。
<a>タグは普通、単独で使われることはありません。<a href="何とか"> という風に href、あるいは name という属性と共に使われます。属性とは、タグに半角スペースを空けてつけ加える文字列で、タグの機能を更に詳しく定義します(例えば既に御存知の <body>タグなんかも、<body bgcolor="red"> などという風にして、bgcolor 属性でページの背景色(この場合は赤)を規定することができます)。そして <a>タグには href か name という属性がつきものなのです。
特によく使われるのが href 属性で、感覚的には a href と一組にして覚えておいた方がいいように思えます。使い方は前章での
<a href="http://www.google.com/intl/ja/">Google</a>
のように、クリックする対象文字列を挟み込みます(この例でも分かるように <a>タグには閉じタグが必須です)。href 属性でジャンプ先の場所を指定するわけですね。上の例の場合は、ブラウザで見ると以下のようになります。
Google
そして    ここからが最重要です    場所の指定の方法には、絶対リンクと相対リンクの二通りがあります。これだけはぜひ覚えておいて下さい。

絶対リンクとは、上の例のようにジャンプ先の場所を、その URL(上記の場合は http://www.google.com/intl/ja/)をまるごと書いて指定する方法です。<a>タグで他のサーバーにあるファイルにジャンプするには、この絶対リンクしか方法はありません。

これに対し相対リンクとは、サーバーの自分のディレクトリ内にある他のページにジャンプするときに、その場所を現在のファイルから相対的に記述する方法です。つまり、「自分から見てひとつ上のディレクトリにある○○というファイル」とか、「自分と同じディレクトリにある××というファイル」とかいう意味の場所指定をすることです。
この記述の方法には、以下のような規則があります。
  1. ディレクトリの区切りは "/" で表される。
  2. 現在のファイルがあるディレクトリは "./" で表される。
  3. 現在のファイルのひとつ上のディレクトリは "../" で表される。
  4. "./" も "../" もない場合は、現在のファイルがあるディレクトリと解釈される(つまり、"./" が略されていると考える)。
例を挙げて説明しましょう。ちょっと面倒ですが、よく読めば必ず分かります。
例えば、以下のようなファイル構成があるとします(少し下の図をご覧下さい)。

  1. まず、hoge ディレクトリの直下に index.html というファイルがあります。
  2. 更に hoge ディレクトリの中には poporo というサブディレクトリがあり、その直下には ura.html と omote.html があります。
  3. poporo ディレクトリには as というサブディレクトリがあり、その中には is.html というファイルがあります。
さて、このような構成で、ura.html から見た index.html の場所はどのようになるでしょうか? 答えは簡単、「自分自身の親ディレクトリ(一階層上のディレクトリのことです)にある index.html」ですね。従って、ura.html 内に index.html へのリンクを記述するには、以下のようにすればいいのです。
<a href="../index.html">適当な文字列</a>
"../index.html" の "../" がひとつ上のディレクトリを意味するのですから、これでいいのは分かりますね? 間違っても、"hoge/index.html" というように指定してはいけません。これだと、"./hoge/index.html" と同じく「現在のディレクトリ(=poporo)にある hoge というサブディレクトリの中の index.html」という意味になってしまうからです。
さらに、ura.html から見た omote.html は "./omote.html" あるいは単に "omote.html"。is.html は "./as/is.html""as/is.html" という風になります。
図を見てよく理解して下さい。
ファイルの相対位置
このように相対リンクで記述することにより、あなたが自分のパソコンの中でホームページを作成している時点で、(サーバーに置かなくても)各ページのリンクが正しく行われているか確認することができるのです。
ではここで問題です。上の図のような構成で、更に hoge ディレクトリの直下に me というサブディレクトリを作り、その中に you.html というファイルを作ったとします。この場合、ura.html から you.html への相対リンクを記述するには、どのように書けばいいのでしょうか? 答えはこちらをクリックして下さい。正解されましたでしょうか?

ここまでで、「うわー、ホームページを作るのって、こんなに面倒なのか(溜息)」となってしまう人もいるかも知れません。でも、ご安心下さい。WYGIWYG 型のホームページ作成用ソフトウェアはもちろん、テキストエディタでさえマクロ(ソフトウェアの機能を拡張する小さなプログラム)で「ファイル一覧から選択したファイルへの適切な相対リンク文字列を書き込んでくれる」という風に使える場合が多いのです。いま、大事なのは相対リンクってどういうものかを知ることです。
マクロによる相対リンク文字列入力 HTML作成支援マクロ Expert 入手先

さて、絶対リンクと相対リンクを間違えると、かなり致命的なことになります。そして、一見たやすく思える WYGIWYG 型エディタを使った方が、間違いに気づかない例も多いのです。以下に説明しましょう。
例えば、あなたが C ドライブの homepage ディレクトリ(フォルダ)内に hoge ディレクトリを作って、その中でホームページ作成の作業をしているとします。その hoge ディレクトリ直下の index.html にリンクをはったとき、間違って絶対リンクにしてしまうと、
<a href="C:/homepage/hoge/index.html">適当な文字列</a>
あるいは
<a href="file:///C:/homepage/hoge/index.html">適当な文字列</a>
とされることがあるのです。つまり、C ドライブの homepage ディレクトリ内の hoge ディレクトリ内の index.html にリンクします…という意味になるのですね。従って、あなたのパソコンのブラウザ上でリンク文字列をクリックすると……当然のように、目的のファイルが表示されます。あなたのパソコン内の C ドライブ内には、そういうファイルがあるわけですから。
でも、それで「うまくいった」と誤解しちゃまずいのです。hoge ディレクトリ内のファイルをサーバーに置いて公開した時、他の人はそのリンク文字列をクリックしても、あなたの意図したファイルは表示されないのです。他の人のパソコンの C ドライブ内には、そんなファイル、ないのですから。
こうした間違いに気づくには、ソースを表示して "C:" などという文字列がないか検索してみるしかありません。そして手作業で直すのが、一番確実でしょう。そのためにも、<a>タグぐらいは直接編集できるテクニックを身に付ける必要があるのです。

さて、href 属性でリンクした文字列をクリックすると、リンク対象が HTML ファイルのようにブラウザで表示できるものなら、そのページにジャンプすることは分かりましたね? では、ブラウザで表示するのではないタイプのファイルの場合は、どうなるのでしょう? 例えば
<a href="../files/file.lzh">何とか</a>
のように、ブラウザで表示される形式ではないファイル(この場合は LZH ファイル)を指定した場合は、どうなるのでしょうか?
答えは、ほとんどの場合、下図のようにダウンロードが始まるのです。これによって、よくソフトウェア作者のホームページにある「クリックしてダウンロード!」とかが実現できるわけですね。
ファイルのダウンロード
この他、<a href="mailto:xxx@xx.xx">メール</a> のように mailto 文字列を使うと、クリックで xxx@xx.xx 宛のメール新規作成画面を開かせたりできます。これも非常に多くのホームページで採用されている方法です。

name 属性についても説明しておきましょう。これはあるファイルの特定の場所にリンクさせたいときに使います。例えば、
<a href="../index.html#you">ここをクリック</a>
という文字列をクリックした場合、ひとつ上のディレクトリにある index.html ファイルの中で<a name="you">何とか</a>という箇所を探して開きます。つまり name 属性によってファイルの中のリンク先を規定しているわけですね。一例として、ここをクリックしてみて下さい。前章のファイルの「ひとくちメモ」の箇所にジャンプします。

2.<img>タグ

何度も言うように HTML ファイルはテキストファイルです。ですから最近の(一太郎や Word などの)ワープロソフトのファイルのように画像を直接埋め込むことはできません。
画像を表示したい場合は、画像ファイルは別に用意して、「ブラウザで表示する時に、この場所にはこのファイルをダウンロードして表示します」という意味のタグで対処するのです。このための    画像ファイルを呼び出す    タグが、<img>タグなのです。
画像表示の仕組み
HTML ファイルが、自分自身とは別のファイルを、場所を指定して呼び出すわけですから、これもある種のリンク機能を持つタグです。<a>タグとの違いは、クリックしなくても自動的にブラウザ側でダウンロードを開始し、実行(画像の表示)するという点です。
<img>タグで画像の場所を指定するには、src という属性を使います(従って、この属性抜きで <img>タグが使われることはないのです)。src で画像ファイルの場所を指定するやり方には、a href と同じように、絶対リンクと相対リンクがあります。以下にそれぞれの記述例を示します。
絶対リンク:<img src="http://xxx.xx.com/xx/hoge.gif">
相対リンク:<img src="../image/hoge.gif">
いずれも指定した場所に hoge.gif という画像ファイルが存在すれば、ブラウザ上では、タグを書いた箇所に表示されます。そして上記の例でも分かるように、<img>タグでは閉じタグを記述しないのです。
<img>タグでも絶対リンクと相対リンクを間違うと、致命的で、なおかつ気づきにくいミスとなります。例えば、あなたのパソコンの C ドライブ内にある homepage ディレクトリの サブディレクトリ image 内にある paint.gif という画像ファイルを指定する際に、
<img src="C:/homepage/image/paint.gif">
あるいは
<img src="file:///C:/homepage/image/paint.gif">
などとしてしまった場合。そのファイルをホームページとして公開したとき、あなたが自分のパソコンで見る限りは表示されるけれども、他の人のパソコンからはさっぱり見えない……ということが起きるのです。気をつけましょう。
<img>タグにつきものの属性としては、他に altwidthheight があります。例えば以下のような図の場合は(画像ファイル名は circle.gif)
赤丸
<img src="./image/circle.gif" alt="赤丸" width="100" height="100">
……という風に記述します。
上の例からも分かるように、alt は画像の簡単な説明ですね。ホームページを画像が表示できない環境で閲覧する場合や、あるいは視覚障害者の方などが読み上げソフトを使う場合などのために、書いておいた方がよいものです。ちなみに、InternetExplorer では画像の上にマウスカーソルを置くと、カーソル位置に alt に記述された文字列が表示されます。上の赤丸で試してみて下さい。
width、height はそれぞれ、画像の横幅と高さです。単位は(ブラウザの表示領域に対するパーセンテージでの指定もできますが)普通はピクセルで表します。指定しないと画像の表示が遅くなるらしいので、記述するようにしましょう。

ところで、<img>タグと <a>タグが一緒に使われることも、よくあります。以下の図のようなボタン画像を使っているサイトを見たことがありませんか?
ボタン画像1 ボタン画像2 ボタン画像3
これらの場合は、例えば
<a href="../index.html"><img src="./image/top_button.gif" alt="トップページへ" width="60" height="20"></a>
……などという風に、<img>タグを <a>タグで囲んでいるわけです。ところが多くのブラウザではこの場合、画像に(リンク文字列に下線が表示されるように)枠線が表示されてしまいます。これを消したい場合には、border="0" とか style="border-style:none" などという風に、「枠線は表示しない」という意味の属性を <img>タグにつけましょう。以下にそれぞれの例を挙げます。
<a href="../index.html"><img src="./image/top_button.gif" alt="トップページへ" width="60" height="20" border="0"></a>
<a href="../index.html"><img src="./image/top_button.gif" alt="トップページへ" width="60" height="20" style="border-style:none"></a>
(なお、上の3つのボタンのソースはちょっと異なっていますが、これは特殊な事情によるものです。気にせず、真似されないで下さい。)

ひとくちメモ
画像ファイル
現在、ホームページでよく使われている画像ファイルには、次の3種類があります。
GIF ファイル(拡張子 gif)
JPEG ファイル(拡張子 jpg もしくは jpeg)
PNG ファイル(拡張子 png)
もちろん、これらのファイルタイプしか使えないというわけではありません。例えば Windows での標準的な画像ファイルであるビットマップ・ファイル(拡張子 bmp)も、使おうと思えば使えるのです。でも、使わない方がいいのです。なぜなら、ビットマップファイルはやたらサイズ(画像そのものの大きさではなくファイルの容量)が大きくなるからです。サイズが大きいとダウンロードに時間がかかり、なかなか表示されないので、ホームページには不向き……というわけです。
対して、GIF・JPEG・PNG は、サイズをなるべく小さくして表示できる形式なのですね。つまりサイズが「圧縮されている」わけで、ホームページに使うにはこのようなタイプのファイルがよろしいのです。
GIF は画像の中でも単純な図や、絵に向いた形式です。256 色を超える色数を扱うことはできません。逆に言えば、256 以下の色しか使ってないファイルは、そのまま表示できるわけです。更に色数を 16 色や2色にまで落とすと、その分サイズが小さくなります。
現在の普通のパソコン環境では、未圧縮の画像ファイルは、たとえその絵に 16 色程度しか使っていなくても、内部的に千万単位の色情報を保持しています。これはいかにも非効率なので、サイズを軽くするためにはまず減色という作業を行います。
これは、実際に絵に使われている色を減らすというよりも、内部的に利用可能な色数(画像の「パレット」の色数)を減らすという意味です。もちろん、その絵で実際に256色以上の色数が使われている場合は、絵自体の色も減るわけですが……。標準的なビットマップファイルでも、何かのソフトウェアで減色作業を行うと、かなりサイズが減るものです。さらに GIF 形式に変換すると、もっと小さくなります。
まとめると、無駄な色情報の多すぎる画像ファイルを GIF に変換する場合は、「もとファイル」→「減色」→「GIF 化」という流れを辿ることになるわけです。Photoshop などの GIF 書き出し機能のある画像編集ソフトでは、この流れを一括してやってくれるわけですが、面倒でなければ減色は減色専用ソフトにやらせて、しかるのちに Photoshop などで GIF 化のみを行うようにした方が綺麗に仕上がります。
この他、GIF ファイルに特徴的な機能として、「透明色」と「アニメーション」というのがあります。前者はパレットの中で特定の色を透明色に指定することで、その部分を透過させる機能です。これによりホームページなどで、壁紙の色を活かしたまま、好きな輪郭で絵を貼り付けられるようになります。後者は複数の GIF 画像を結合して、文字通りアニメーションを作る機能です。これにはアニメーション作成機能のあるソフトウェアが必要となります(フリーウェアでも存在します)。
アニメーションGIF
JPEG ファイルは GIF のように減色する必要はないので、色数の多い写真などに向いています。JPEG の圧縮率は一定ではありません。圧縮率を上げれば上げるほど、画質は低下し、サイズは小さくなります。
圧縮率:低 圧縮率:中 圧縮率:高
fish1.jpg(2732バイト) fish2.jpg(1852バイト) fish3.jpg(1193バイト)
PNG ファイルは一時期 GIF が米ユニシス社の特許問題でもめたとき(現在では特に問題はないようです)に注目されたフォーマットです。最大 280 兆色までの色数が利用できる上、同じように減色した場合は GIF よりも圧縮率が高く、複数の透明色を微妙に指定できる(たとえば何%透明……とか)などの利点があります。ただし古いヴァージョンの Netscape では表示できなかったり、できても透明色が有効にならなかったりするので、GIF や JPEG に比べると使っているホームページは少ないようです。
未圧縮の画像フォーマットを GIF・JPEG・PNG に加工するためのソフトウェアは数多く、市販の Photoshop 等でも可能ですが、もちろんオンライン・ソフトにも優秀なものはあります。Windows の場合は海外ソフトウェアではありますが、IrfanView(個人使用に限ってフリー:http://www.irfanview.com/)が多機能で使いやすく、Macintosh の場合は GraphicConverter(シェアウェア:http://www.bridge1.com/graphicconverter.html)というのが評判がよいようです。

トップへ次へ戻る
ライブシネマ