彩りの大地 うぇぶでざいん

<a href>(ハイパーリンク)

というわけで、リンクを設置します。 これまたよく言われることですが、リンクを設置しないと、ウェブページらしくないですもんね。

ちなみに、このリンクのことを「ハイパーリンク(Hyper Link)」と呼びます。 「HTML(Hyper Text Markup Language　ハイパー・テキスト・マークアップ・ランゲージ)」のリンクだから「ハイパーリンク」なのです。
(やっぱり言葉はほぼどうでもいいが)

ハイパーリンクにはリンク先のURLが必要ですが、以下のように記述します。

<a href="(URL)">(リンク文字)</a>

簡単なことです。要は、リンク先のURLを(URL)のところに記述し、 リンク文字にしたいところを開始と終了でくくってやればいいだけです。
サンプルは用意しません。ものは試しということで、自分で作ってみましょう。

<a name>(アンカー)

Anchor(アンカー)とは、船が備えている”いかり”のことです。 強い波風や潮流などで船が流されたりしないようにおろすものです。
※とはいうが、実は<a>の意味自体がそもそもアンカー。リンク文字という言葉で統一しているが、実際にはそれをアンカーと呼ぶ。

それと同じように、HTML上でもアンカーを設置することができます。 巷では「ページ内リンク」とか「ページ内ジャンプ」とか呼ばれているものの正体がこれです。

たとえば、上部の方の「ぺぇじへっどらいん」の項目(または左のサイドに並んでいるハイパーリンク)を見てください。 これが実は名前を付けたところに対するアンカーです。
その中で「<a name>(アンカー)」のハイパーリンクをリンクしてもらえればお分かりですが、 この項目の「<a name>(アンカー)」の部分に飛ぶようになっています。

ということで、これはどういう仕組みになっているのかの説明を。 基本的にこれの設置の仕方がわかっていない方がいらっしゃいますが、まず、名前の付け方から先に説明します。

<a name="(名前)">(なんか文字)</a>

これで名前を付けました。
ちなみに、中にはこの名前を付けたところを終了タグで閉じない方がいらっしゃいます。 あれは反面教師、ダメな例ですので絶対にやってはいけません。

終了タグで閉じない限りは効果がページの最後まで効果が続くので、 ページの装飾しだいでは見栄えも非常に悪くなりますし、行儀が悪い行為なのです。

続いて、アンカーに対するリンクの設置の仕方です。

<a href="#(名前)">(リンク文字)</a>

「(名前)」には<a name="(名前)">で記述したものを書きます。 名前に対してリンクするということで、一意に特定できるわけですね。
ちなみに、

<a href="#">(リンク文字)</a>

これをやるとページの先頭に飛ぶかもしれませんが、実際にはブラウザの挙動によって異なるようです。 よく使ってらっしゃる方もいるようですが、ブラウザごとに違いがあるので要注意、そういうのは使わないのが一番。

上記の「ぺぇじへっどらいん」例ではそれぞれの見出しタグ(<h2>)の名前に対してリンクをはっています。 ページがこういう作りだとすぐに目的のところへと飛べますね。

<a href="(URL)#(名前)">(リンク文字)</a>

組み合わせてこんなこともできます。 言うまでもないかもですが、そのURLのページの名前に飛ぶという意味があります。

私のサイトは大体名前だらけなので、この方法を用いれば、 外部サイトからでも目的のドキュメントにピンポイントで特定できる特徴があります。

<h2 id=(id名)">(なんか文字)</h2>

<a href="#(名前)">(リンク文字)</a>
<a href="(URL)#(名前)">(リンク文字)</a>

HTMLタグにもいろいろ

<br>
<p>～</p>
<a href="(URL)">～</a>
<font color="red" size="7">～</font>

HTMLタグにはいろいろとありますが、まずはその構造を知っておきましょう。

「<br>」、この中でコード長が一番短いやつで、しかも終了タグのないものでしたね。
でも、それとは打って変わって「<p>～</p>」には開始と終了まであります。
しかし、「<a href="(URL)">～</a>」なんかはどうでしょうか、 同じ開始と終了があるものでも、開始と終了とでは書かれているコードの長さが違いますし、 「<font color="red" size="7">～</font>」にはさらにおまけが付加されているような感じになっています。

そこで、タグの構造の話が出てきます。
まず、「<」のすぐ次に現れる文字列、これを「要素」といいます。「br」「p」「a」「font」がそうです。
そして、それ以外の文字列を「属性」、「"～"」でくくられている文字列を、その属性の「値」と呼びます。
つまり、

<要素>
<要素>～</要素>
<要素 属性="値">～</要素>
<要素 属性="値" 属性="値">～</要素>

ということですね。
つまり、どのタグも必ず要素が含まれており、終了タグを書くべきは要素である、ということです。

要素はタグの大まかな効果をあらわす意味が含まれているため、タグの構造上では一番重要なものなのです。
たとえば、brなら改行、pなら段落、aならハイパーリンク(アンカー)関連、fontならフォント関連といった具合です。
ただ、ハイパーリンク関連・フォント関連といったように、そういったものには関係するけれども、 その要素単体だけでは効果をなさないものがあります。そこで使うのが「属性」と「値」です。

「属性」と「値」、先ほどのURLの例を見てもわかると思いますが、あんな感じです。
さらに、要素は1タグにつき1つまでですが、1要素につき「属性」と「値」はいくつでも書けます。

※「値」は属性によっては省略できる(というか、そもそも属性によっては値が存在しない)ものもありますが、 将来的にはそれは無しの方向に向かっているようですので、 そういうものの場合は属性と同じものを値にするようにと推奨されています(たとえば「readonly="readonly"」など)。

<font>の例をもう少し突き詰めて見てみましょう。

<font color="red" size="7" face="MS Pゴシック">～</font>

フォントは見たままの記述で一番効果が実感しやすいタグなので説明が楽というメリットがあります。ｗ
欠点は……実際にはあまり使ってはいけないタグであるぐらいかな。。。まあ、それが大問題なんだけれども。。。
つまり、このタグの効果を覚えても使用は推奨されていない為、無理に覚える必要はありません。
この項目では、あくまで学習用に紹介するだけです。

まず、要素がfontなので、フォント関連に関係します。
そして、fontにはcolor属性があり、その値がredになっています。 そうです、そのままズバリ、フォントのカラーを赤にするということです。
さらにはsizeが7となっています。この要素の属性は設定できる値は1～7の範囲の整数値、値が大きいほどフォントサイズが大きくなる効果があります。 7なので最大値ですが、それが何ptに該当するのかはブラウザのレンダリングに依存している為、ブラウザごとに大きさも変わってしまいます。
そして最後にfaceが「MS Pゴシック」……値からどんな効果は容易に想像できると思いますが、使用するフォントフェイス/フォントファミリを変える効果があります。 たとえば、「HGP創英角ポップ体」なんかとすると、文字フォントがポップ体になったりします。
ただし、このフォントはあくまでウェブを見ている側のフォントファイルのインストール状況に依存するので、 ユーザによっては変化がなかったりします、その点には注意です。
また、フォントによっては見づらいなどの問題もある為、出来るだけ見やすいフォントを選択するようにしましょう。

・使用が推奨されているフォント：コンセプトは無難
　メイリオ、ゴシック体
・よく標準で使われるアプリなどはあるが、使用が推奨されていないフォント
　明朝体、文字がかすれるフォント、ユーザーの環境に依存するフォントなど、インストール配布による独自フォント
※CSSでは複数のフォント指定ができるので(使用するフォントの優先順位を付けられる)、環境依存フォントについては推奨フォントと併用するようにしましょう。 もちろん、環境依存フォントについても推奨フォントのコンセプトにそったものが望ましいです。

ディレクトリって何？

ウェブページを作成する際に留意しなければならない点、それは「ディレクトリ」です。
「ディレクトリ」とは「階層」のことで、ウィンドウズでいうところの「フォルダ」と同じものです。

世の中には、何でもいいから詰め込む人もいれば、きちんとテーマに沿ってものを整理してつめる人とがいます。 もちろん、後者のほうがいいわけで、そのテーマごとにきっちり分けられたページを作るべきということは言うまでもありません。

ディレクトリを知る

root directory
├index.html
├data(dir)
│├index.html
│├ff5(dir)
││├index.html
││├neta_world(dir)
││├item(dir)
│││├index.html
│││├weapon.html
│││├gurad.html
│││└use.html
│││
││└job(dir)
││　├index.html
││　├job00.html
││　├job01.html
││　└job02.html
││
│└ff9(dir)
│　├index.html
│　├neta_world(dir)
│　├item(dir)
│　│├index.html
│　│├weapon.html
│　│├gurad.html
│　│└use.html
│　│
│　└mag(dir)
│　　├index.html
│　　├black.html
│　　├white.html
│　　└shop.html
│
└web_design(dir)
　├html_hand_made.html
　├html_tag_struct.html
　├index.html
　└testpage.html

当サイト「彩りの大地」の階層構造の一部を現したもの。多少違うところもあるけれども、面倒なのでこれで。

「root directory(ルート・ディレクトリ)」というのは、サイトの頂点のディレクトリのことで、 早い話、フォルダで表現した、一番浅い階層のこと。
そのルートディレクトリの中には、上の図ではindex.htmlというページと、data、web_designのディレクトリの合計3つが入っている。

ちなみに、ディレクトリにはわかりやすいように「(dir)」という印をつけておいた。 見てのとおり、ディレクトリの中にはさらにまたファイルやディレクトリが入っているけれども、 ディレクトリの中に入っているディレクトリのことをサブディレクトリと呼ぶ。

で、どうしてこんなややこしい話をしたかというと、この階層構造というのが、 それぞれのページにアクセスするためのURLを決めるためのひとつの要素となっているからだったりする。

絶対パス指定

絶対パス指定とはフルパスとも呼ばれるとおり、「http://～」か「https://～」からフルにファイル名を指定して書くこと。
URLとくれば、たいていの場合はその「http://～」か「https://～」などから書き始める絶対パス指定による記述方式を思い浮かべる人が大半だと思われる。
たとえば、

<a href="http://test.domain.jp/web_design/html_tag_struct.html">～</a>

と書くと、彩りの大地がtest.domain.jpというサーバにあるのなら、 このページにたどり着くリンクが作れることは誰でも容易に想像がつく。

もちろん、URLには意味があって記述されているため、それも忘れてはならないということ。
それについては以下。なお、そんなに難しいことではない。

http://　→HTTPという通信方式で通信しているの意
test.domain.jp　→ドメイン名(要するに、どんな名前のサーバを使っているのか)
　　　　　　　　　実際には「.」毎に意味があるが、ここでは掘り下げない
web_design　→フォルダ(ディレクトリ)の名前
html_tag_struct.html　→アクセスしているHTMLファイル名

といった感じになっている。早い話ディレクトリ名やファイル名がそのままURLに使われているのである。
そして、ディレクトリは「/」で区切って表現する。

http://test.domain.jp/data/ff5/item/

このようなURLで始まるページは (彩りの大地で「data」ディレクトリはビデオゲーム部門で、「FF5」はファイナルファンタジー5の攻略を一応取り扱っている)、 FF5というゲームに登場するアイテムのコンテンツを示していることも容易に想像ができる。
(実際には僅かな階層変更しているため、それに伴ってリダイレクトされるようになっている)

<a href="http://test.domain.jp/web_design/html_tag_struct.html">～</a>

話を戻すと、このように、通信方式の部分からファイル名まで漏れなく全部記述してURLを指定することを、 絶対パス指定と呼ぶ。

相対パス指定

<a href="html_tag_struct.html">～</a>

それに対して、このような書き方をすることを、おそらく察しはついていると思いますが、相対パス指定と呼ぶ。
絶対に対して相対という言葉があるのだから、絶対パスがあれば相対パスもあるのかというのは当然の疑問。まさにそのままの話。

相対パス指定というのは、今のディレクトリからみてどこへリンクするか指定する方式のため、 ドメイン名(サーバ)が違う場合は使えない。他人の家に無断で入れないのと同じ。
そのため、違うサイトにリンクする場合には絶対パスを使う。

ということはその逆、つまり、自分のサイト内にリンクする場合は相対パスが使えることになる。 そもそも、自分のサイトをローカル(自分のPc上)で構築するのに、 リンクをクリックするたびにサーバへ飛ぶとかいうのは、自分のサイトの動作確認がとれないのと同じこと。 ローカルリンクは相対パスを使うのが普通である。
※絶対パスだとhttp://から書かないといけないため、結果的にサーバにつながなければいけないことになる。 対して相対パスだと、ローカルからローカルへのハイパーリンクも実現するため、 感覚的にもプラットフォーム的にもハイパーリンクが確認しやすい。

ということで、次は相対パス指定によるハイパーリンクの書き方。Linuxを触ったことがある人は今更なので要らないかも。

今のディレクトリが
http://test.domain.jp/web_design/
だとして
<a href="html_tag_struct.html">～</a>
でハイパーリンクすると
http://test.domain.jp/web_design/
の中で
html_tag_struct.html
を探してアクセスする

書いてあることそのままずばりでくどいようですが、 相対パス指定は自分が今いるディレクトリを基準にしてファイルを探す方式になります。
自分が今いるディレクトリのことをカレントディレクトリといいます。
※カレント：「現在の」の意

カレントディレクトリが
http://test.domain.jp/
だとして
<a href="data/index.html">～</a>
にハイパーリンクすると
http://test.domain.jp/data/
の中で
index.html
を探してアクセスする

サブディレクトリに移動するときも大体同じようになる。
「/」がディレクトリ移動であるため、 「data」というディレクトリ内の「index.html」に行けというリンクとなる。

カレントディレクトリが
http://test.domain.jp/
だとして
<a href="data/ff9/index.html">～</a>
にハイパーリンクすると
http://test.domain.jp/data/ff9/
の中で
index.html
を探してアクセスする

階層が浅かったり深かったりしても同じこと。
「data」というディレクトリ内の「ff9」というディレクトリ内の「index.html」に行けというリンク。

カレントディレクトリが
http://test.domain.jp/data/ff1/item/
だとして
<a href="../index.html">～</a>
にtest.domainすると？

ディレクトリ移動で覚えておきたいもの、もうひとつが「..」。 「..」は1つ上のディレクトリに移動するという意味を持つ。
つまり、以下の様になる。

カレントディレクトリが
http://test.domain.jp/data/ff1/item/
だとして
<a href="../index.html">～</a>
にハイパーリンクすると
http://test.domain.jp/data/ff1/item/
の1つ上
http://test.domain.jp/data/ff1/
の
index.html
を探してアクセスする

ということはつまり、以下の様にもできる。

カレントディレクトリが
http://test.domain.jp/data/ff5/item/
だとして
<a href="../../../index.html">～</a>
にハイパーリンクすると
http://test.domain.jp/data/ff5/item/
の3つ上
http://test.domain.jp/
の
index.html
を探してアクセスする

「../」が1つ上なら「../」を2つなら2つ、3つなら3つ上のディレクトリに移動するという意味を持つ。そのままの意味なので深く考える必要はない。

カレントディレクトリが
http://test.domain.jp/data/ff1/item/
だとして
<a href="../../../web_design/index.html">～</a>
にハイパーリンクすると
http://test.domain.jp/data/ff1/item/
の3つ上
http://test.domain.jp/
まで戻り、さらにweb_designディレクトリ、つまり
http://test.domain.jp/web_design/
の
index.html
を探してアクセスする

別のところにあるディレクトリに入る場合も、いったん上位のディレクトリを経由してパス指定すれば同じように相対パス指定できる。

カレントディレクトリはともかく、
<a href="/index.html">～</a>
にハイパーリンクすると……

これはサーバによって使える人と使えない人がいます。 「/」だけでルートディレクトリをあらわすので、

カレントディレクトリはともかく、
<a href="/index.html">～</a>
にハイパーリンクすると
http://test.domain.jp/
の
index.html
を探してアクセスする

ということです。 但し、注意点として、使っているサーバがドメイン名のみだけの指定の人なら (この例なら「http://test.domain.jp/」までという、特にディレクトリの記載がない場合に限る) 「/」だけで自分のルートディレクトリへと移動できますが、 中には「http://test.domain.jp/fusianasan/」のように、サーバの割り当てが個別のネーム(この例では「fusianasan」)でホームディレクトリを割り当てられている人にとっては「fusianasan/」がすっ飛ばされてしまい、 うまくいかないため、ルート「/」を使う場合はそのあたりも意識して使ってください。

カレントディレクトリはともかく、
<a href="/fusianasan/index.html">～</a>
にハイパーリンクすると
http://test.domain.jp/fusianasan/
の
index.html
を探してアクセスする

例えば、ホームディレクトリつきの人はこのように、 一旦ルート「/」に行ってからホームディレクトリに入りなおすという使い方になると思います。
たとえホームディレクトリだろうと、普通のディレクトリと扱いは同じです。

index.htmlについて

これまで何度か「index.html」が登場してきました。 実際にそういう名前のファイル名(URL)にアクセスした人もいることでしょう。
ここはその理由について教えるトピックです。

<a href="http://test.domain.jp/">～</a>
 →　http://test.domain.jp/index.html　に飛ぶ
<a href="http://test.domain.jp/data/">～</a>
 →　http://test.domain.jp/data/index.html　に飛ぶ
<a href="http://test.domain.jp/data/ff5/">～</a>
 →　http://test.domain.jp/data/ff5/index.html　に飛ぶ
<a href="http://test.domain.jp/data/ff5/item/">～</a>
 →　http://test.domain.jp/data/ff5/item/index.html　に飛ぶ

例の通り、ハイパーリンクのパスにはファイル名の指定がありません。 というのも、記載がない場合は無条件で「index.html または index.htm を探せ」という風に、サーバ側の設定がそうなっているため、 「index.html」へアクセスする場合は省略が出来るのです。
※設定とは言うが基本的にWebサーバインストール時の初期設定。 変更可能だが一般的な動作でもある為、わざわざ変える意味もないことからだいたいのサーバでこのような仕様となっている。

ということでまた例を。

今のディレクトリが
http://test.domain.jp/data/ff1/item/
だとして
<a href="./">～</a>
 →　http://test.domain.jp/data/ff1/item/index.html　に飛ぶ
<a href="../">～</a>
 →　http://test.domain.jp/data/ff1/index.html　に飛ぶ
<a href="../../">～</a>
 →　http://test.domain.jp/data/index.html　に飛ぶ

相対パスの場合も同じです。
ちなみに、「.」はカレントディレクトリを表します。 つまり、省略可能というやつですが、HTMLが値が空なのはダメなので、省略せずに書く必要が有ります。

見てのとおり、ファイル名がないだけでURLがすっきりしました。 特にルートディレクトリのindex.htmlといえば、そのページの顔とも言える存在なので、 そういう存在ならURLはすっきりしていたほうがいいですよね。


そして、もちろん下位のセクションである各ディレクトリ・サブディレクトリ内にもindex.htmlを設置して、 それぞれのセクションの顔といえるようなページを設置しておくことが望ましいということは言うまでもない。