リンクの張り方

Webページからリンクを張る方法についてです.


解説

リンクとは

リンクとはあるファイルから見た,他のファイルへの場所を示したものです. 例えば,このサイトの,「Webページ作成について」ページへリンクを張ってみます. 以下をクリックして確認して,ブラウザの「戻る」で戻ってきてください.

リンクの例

これはHTMLでどう書いているかと言うと,

<A Href="./index.html">リンクの例</A>

となります.<A Href="./index.html">の,./index.htmlにあたる部分が, ファイルの場所を指している部分です.「index.html」はもちろんファイル名で, 「./」は場所を決めている部分で,リンク元のファイルのあるフォルダを意味しています. そして,この「./」は省略する事が出来ます.同じフォルダ内ならわざわざ書かなくても 良いという事です.


図1.同一フォルダ内では,ファイル名だけでリンクを張る事が出来る

ブラウザで見られるファイルの種類

リンク先に指定できるのは,htmlファイルだけではありません. 画像のファイルや,他の形式のファイルにもリンクを張る事が出来ます. 試しに画像に対してリンクを張ってみます.

画像へのリンク

<A Href="linktest.png">画像へのリンク</A>

しかし,ブラウザで直接見られる形式は多くはありません. ブラウザで直接見られないファイルに対してリンクが貼ってあった場合, 保存するか,そのファイルを開く事の出来る別のアプリケーションで開くかを選ぶウインドウが出ます.

ここでは,「zip」というアーカイブ(書庫)形式のファイルへのリンクを張っておきます. ブラウザでは直接開く事が出来ないので,どうするか聞いてくるはずです. ウインドウが開いたら,ここではキャンセルしてください.

なんでもないファイルへのリンク

<A Href="test.zip">なんでもないファイルへのリンク</A>

図2.ファイルの種類によってはブラウザでは表示できない

ブラウザによる違い

ブラウザというのは,Webページを見るためのアプリケーションです. 恐らく情報処理実習を受講している人たちは 「インターネットエクスプローラー(Internet Explorer: IE)」を使っている人が多いと思います. このアイコンで使えるブラウザですね.


図3.Internet Explorer: IEのアイコン

このIEは,OSであるWindowsを作っているマイクロソフト社のアプリケーションです. 皆さんが良く使う,マイクロソフトオフィスというシリーズの,ワードであったり, パワーポイントといったアプリケーションも同じくマイクロソフト社のアプリケーションです.

ここでIEには他のブラウザには無い特徴があります.それは, ワードのファイル(.doc)やパワーポイントのファイル(.ppt)といった, 普通のブラウザでは見られないファイルを,ブラウザで直接見ることができます.

逆に言うと,他のブラウザを使っている人には, 例えば.doc形式のファイルを直接見ることはできません. よって,一度ダウンロードして自分のパソコンの中から見ることになります. 他のブラウザの例としては,firefoxというものが有名です. 私もこれを使っています.


図4.firefoxのアイコン

Webページは多様な人を相手にする必要がありますので, 自分でページを作ったら,なるべく複数のブラウザで動作の確認をするようにしましょう.


図5.ブラウザによって直接見られるファイルに違いがある

相対参照と絶対参照

最初の方で,同じフォルダのファイルへリンクを張るには,「./」を付けるとか, あるいはそれは省略しても良いという話をしました. 他のフォルダにあるファイルにリンクを張るには,その場所を指定してやる必要があります.

フォルダの構造

ここではまず,フォルダの構造について思い出します. フォルダにはフォルダとファイルを入れることが出来ます. その多くを包括しているフォルダを「」とみなす事で, フォルダの構造を階層構造で表現する事が出来ます. その例を以下に示します.このような表現の仕方は, 「エクスプローラ」等多くの場所で使われるので慣れておきましょう.



図6.フォルダ構造を階層構造で表す

ちなみにエクスプローラは,「Windowsキー+E」で開く事が出来ます. また,開いているフォルダの「フォルダ」というところをクリックする事でも開きます.


図7.「フォルダ」ボタンで左に階層的な表示が出てくる

違うフォルダのファイルへのリンク

では本題の,違うフォルダへのリンクの張り方の説明に移ります. 最初に「リンクとは他のファイルの場所を示したもの」と書きました. その場所の表し方には,2種類の方法があります. その方法をそれぞれ,相対参照絶対参照といい, その表記の事をそれぞれ相対パス絶対パスと言います. パス(Path)とは「道」のことですね. 別のファイルへの道だと考えれば良いでしょう.

相対パスは,「今いる場所からの道」という形で表記し, 絶対パスは,「誰から見ても同じ場所からの道」という形で表記します. その名の通り,相対パスは相対的な位置関係を表しているのに対し, 絶対パスは絶対的な位置を指し示すものです.

実は今まで使っていた,「ファイル名を書くだけ」というのは相対参照でした. なのでまず相対参照から説明します.

相対参照

相対参照を使うに当たって,まずはいくつのか約束事を覚える必要があります.

これだけ覚えれば自由に相対パスが書けるようになります.上の図6の, 2つのファイルから見た,他のファイルへの相対パスを以下に示します.


図8.相対パスで指定すると,リンク元のファイルの場所によってパスが変わる

例えば「111.png」というファイルは,index.htmlから見れば「./ccc/111.png」 となり,report2.htmlから見れば「../ccc/111.png」となります. このように,どのファイルから指すかで,同じファイルを示すのであっても 表記が変わるのが相対パスです.

絶対参照

続いて絶対参照について説明します.これはどこから見ても同じになる 表記法の事です.例として,このページへのリンクを絶対パスで書いてみます.

<A Href="http://www.ipe.tsukuba.ac.jp/~s0720857/webpage/link.html">

こういうやつの事です.スラッシュがフォルダを表すことは相対パスと共通しています.

さて,このページがlink.htmlという名前である事や, それがwebpageという名前のフォルダに入っていることは分かるかと思います. では,その左の部分はどのように決まっているのでしょうか.

学術情報メディアセンターの端末を使っている場合,自分の環境の, 「Z:\www」というフォルダが,以下のパスと対応しています

http://www.ipe.tsukuba.ac.jp/~s*******/

*******は自分のログインする番号です.

よって,wwwフォルダに入れたhello.htmlというファイルは,

http://www.ipe.tsukuba.ac.jp/~s*******/hello.html

と書けば参照することができます.

先ほどの例で示しましょう.aaaというフォルダが上記のwwwフォルダにあったとすると, それぞれのファイルへの絶対パスは以下のようになります.


図9.絶対パスでの指定

この書き方であれば,リンクを張るファイルがどこにあっても, 同じ表記で場所を指定する事が出来ます.

相対参照と絶対参照の使い分け

まず当然ですが,他人のサイトにリンクを張る場合は絶対参照で張るしかありません.

その他の使い分けですが,どちらを使うべきという決まりがあるわけではありませんが, 明確に片方が便利な場合がありますので,参考にしてください.

相対参照が便利な例

基本的には,自分のサイト内では相対参照を使った方が良いかと思います. 大きな理由は,Webページがどこにあっても同じ挙動をしてくれるからです. Webページを編集する際に,普通はローカル(自分のパソコン)で編集してから, それをインターネット上にアップロードすると思います. 相対参照で記述してあれば,ローカルでのリンクはローカルの別のファイルへのリンクになり, インターネット上でのリンクはインターネット上での別のファイルへのリンクになります (フォルダの位置を移動する感覚を思い出してください). しかし絶対参照で記述してしまうと,ローカルで確認している時にも,(まだ更新していない) インターネット上のファイルに飛ぶことになってしまいます.不便ですよね?

また,Webサイトをまるまる別の場所に置き換えるときに,手間が要りません. 例えば,このWebサイトは私が修士の学生だった時からあったのですが, 今現在のURLのうち,

http://www.u.tsukuba.ac.jp/~s0930155/

の部分が以前は

http://www.ipe.tsukuba.ac.jp/~s0720857/

だったのですが,単にまるまる新しい場所にコピーして使う事が出来ました. しかし絶対参照の部分だけは,直さなければいけませんでした.

絶対参照が便利な例

例えば,このWebサイトの一番下にある,この部分,

これは,全部のページに同じものを置いています.リンクが二つありますが,どちらも 元のページに関わらず同じ場所へのリンクですよね.なので,絶対参照で書けば,後は全てのページに 「コピー&ペースト」するだけです.しかし,これを相対参照で書こうとすると, そのページがどのフォルダに入っているかに応じて,HTMLの記述を書き換えなくてはいけません. 手間から考えて,絶対参照の方が便利ですね.

サイトルートからの相対パス

もう一つの記述方法として「サイトルートからの相対パス」というものがあります. しかし大きなWebサイトを作るのでなければ上記二つで何とかなると思うので, 興味がある人だけ調べてみてください.

関連リンク