パソコンでは初となる高等身の本格派3Dオンライン格闘ゲーム

リンクの張り方と相対/絶対パスについて

ファンサイトを作ろう！目次へ

リンクを作ってみよう

リンクを作るのには準備がいらないので、早速リンクのサンプルソースを。以下の背景が灰色の部分をエディタにコピー＆ペーストして、作業用フォルダにlink.htmlという名前で保存してください。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>サイトのタイトルを書く部分です。</title>
</head>
<body>
<p>
↓をクリックすると、ネトゲブックマークのトップページが表示されますよ。<br/>
<a href="http://www.netgamebm.com/">ネトゲブックマーク</a>
</p>
</body>
</html>

さて、保存したファイルをブラウザ(InternetExplorerやFireFox等)で開いてみましょう。開くと以下のように表示されると思います。
サンプル画面

次からは、どこに何を書けばいいのかを順番に説明していきます。

aタグ

上のサンプルにあるように、リンクを作るにはaタグを使います。

<a href="http://www.netgamebm.com/">ネトゲブックマーク</a>

↑を例として簡単に説明していきましょう。

まず、「ネトゲブックマーク」という部分。これが実際に表示される文字列で、この文字をクリックするとリンク先が表示されます。ちなみに、前ページで説明したimgタグをこの文字の代わりに書くと、画像をクリックするとリンク先が表示されるようになります。

href属性

href属性とは、リンク先のURLを指定する属性です。さっきの例では「http://www.netgamebm.com/」としていたのでネトゲブックマークが表示されていましたが、例えば

<a href="http://www.yahoo.co.jp/">Yahoo!JAPAN</a>

とすれば、クリックするとYahoo!JAPANが表示されるようになります。

相対パスと絶対パス

画像のところでも出てきた「パス」ですが、実は2種類あります。

絶対パス: http://から始まるURLを記述するもの。
相対パス: 画像のパスのところで書いた、今書いているHTMLファイルから見てどの位置にあるのかを指定する方式。自分のサイト内のファイルを指定するときに使う。

簡単に言えば次のような感じになるでしょうか。

リンク集などで他の人のページにリンクを張るときは「絶対パス」。
自分のサイト内の他のページへ移動させたいときに張るリンクは「相対パス」。

別に自分のサイト内の他のページへ移動させるのに絶対パスを使っちゃいけないわけではないですが、例えば同じフォルダ内にある他のHTMLファイルにリンクしたいときにhttp://から全部書くのはかなり面倒です。相対パスなら、同じフォルダ内の場合ファイル名を書くだけでOKなのでかなり楽です。

「絶対パス」と「相対パス」は、画像でもリンクでも使う決まりなので覚えておくと便利です。
詳しい説明を絶対パスと相対パスに書いておきましたので、よろしければ一読を。

他にはどんなことが出来るの？

文字、画像、リンクときましたが、他にはどんなことが出来るのかを簡単に触れてみましょう。
表が作れるテーブルと一覧表示が出来るリストについて次のページで説明します。