他ファイルへリンクする方法

他のHTMLファイルにリンクしたり、HTMLファイル内に画像を貼り付けたり、動画を埋め込んだりする時には、基本的に「URL」を指定する。

URLとは

とは、と言いつつ言葉の説明は省く(ぇ

URLにはだいたい2種類あって、絶対URLと相対URL※1。だいたい他所のサイトのファイルにリンクする時は絶対URL、自分のサイトのファイルにリンクする時は相対URLを使う。

絶対URL

http://とかhttps://とかから始まってるのがだいたい絶対URL。例えば、https://www.w3.org/TR/html5/changes.htmlは、www.w3.orgというドメインで指定されたコンピュータの、公開する対象のディレクトリから見て、TRディレクトリにある、html5ディレクトリにある、changes.htmlというHTMLファイルを指している。イメージ的にはこんな感じ。

自サイトでもこの方法でリンクできるけど、基本的に外のサイトにリンクする時に使う。

相対URL

相対URLは更に2種類あって、パス絶対URLとパス相対URLがある。以下のディレクトリ構成をベースに考える。parentディレクトリが公開されているディレクトリとする。

パス絶対URL

上の図で言うと、parentディレクトリからの場所を示すURLをパス絶対URLと言う。「/」で始まり、「/」区切りでディレクトリ名、最後にファイル名。以下のようなかたちで書く。

<a href="/sibling/sib.html">sibへ</a>
<a href="/current/child/fuga.html">fugaへ</a>

この書き方の場合、自サイト内のどのページからでも同じURLでリンクできる。

パス相対URL

これは現在閲覧中のファイルのあるディレクトリからの相対的な場所を指す。「/」区切りでディレクトリ名、最後にファイル名。..は1つ上のディレクトリを指す。

上の図で「hoge.html」から各ファイルへのリンクを例として示す。

<a href="child/fuga.html">fugaへ</a>
<a href="nya.html">nyaへ</a>
<a href="../sibling/sib.html">sibへ</a>
<a href="../moga.html">mogaへ</a>

例には無いが、2つ上のディレクトリを参照する場合は、../../と2つ続ける。3つ上の場合は3つ続ける。

この書き方の利点は、サーバーにアップロードして試さなくても、手元で試せるという事。お引越し等でディレクトリ構造が変わったりするのにも強い。

※1: この辺りの用語は、解説サイトによってバラけているので注意。当リファレンスはURL Standardの定義に従っている

フラグメント

絶対URLでも相対URLでも、末尾に#hogehogeというかたちで書き足す事で、文書の途中にリンクできる。これをフラグメントと言う。hogehogeの部分には、文書内のid属性で指定した値を入れる。例えば、同じディレクトリ内のolympic.html

<h2 id="section-volunteer">東京五輪のボランティアについて</h2>

にリンクする場合は、

<a href="olympic.html#section-volunteer">東京五輪のボランティアの詳細</a>をクリック!

といったかたちになる。同じ文書内で頭出しとして利用するなら、

<a href="#section-volunteer">ボランティア詳細</a>

のようなかたちになる。

特殊なフラグメント

フラグメントには特殊なものが2つあって、1つが#だけで頭出し先の指定が無いもの、もう1つが#top。この2つは共に文書の一番上(先頭)を示す。つまりa href="#"とかa href="#top"とかすると、id=topな場所が無くても一番上にジャンプするリンクが作れる。これはHTML5で追加された仕様。

dataスキームを使ってリソースを埋め込む

httpでもhttpsでもなく、dataから始まるURLを使ってHTMLファイル内にリソースを埋め込む事ができる。

詳しくはdataスキームでHTMLファイルやCSSファイルに画像データを埋め込むを参照。

ファイル名とディレクトリ名について

基本的に小文字の英数字とハイフン。拡張子は.htmlでも.htmでも良い。

大文字もサーバーとして使われているOSのファイルシステムでは、大文字小文字を区別するものが多いので、基本的に小文字のファイル名にしておくと良い。ディレクトリ名も同様。

日本語名のファイルも可能ではあるが、色々問題が起きやすいので英数字に留めたほうが懸命。

✗これ.html
△This.html
○this.html

大抵の検索エンジンは_(アンダースコア)を単語の区切りと見なさないため、基本的にファイル名は-(ハイフン)で区切ると良い。

△this_is_file.html
○this-is-file.html

拡張子について

「え?.htmlって何?」と思っているそこのあなたは、きっとWindowsユーザー。「.html」の部分を拡張子と言うが、困ったことにWindowsでは初期には表示されていない。

Windows 10の場合は、エクスプローラの「表示」から「ファイル名拡張子」にチェックを入れてみよう。