トップページ＞タグを打ってみよう！＞リンクと階層
リンクと階層
サイト内のリンクを作るとき、リンク先がどの階層にあるのか、迷うことがあります。 このページでは、Windowsのフォルダ配置を見ながら、階層を説明しています。 メニューやサイトマップ（サイト一覧）を作るとき、役立つと思います。
Windowsのフォルダ配置
フォルダボタンをクリックすると、下のような画面になります。矢印のフォルダをクリックすると、右側にフォルダの中身が表示されるようになっています。
index.htmlフォルダにbeginingとlevelupフォルダが入っています。
beginingフォルダには、hp01とhp02フォルダと、beg.htmlが入っています。
hp01フォルダには、hpa.htmlとhpb.htmlと、hp.cssが入っています。
levelupフォルダには、hp03とhp04フォルダが、
hp03フォルダにはhpc.htmlとhpd.htmlと、hp0.cssが入っています。
フォルダ配置図をツリー状に書き直すと、下のようになります。
階層ごとのリンクの書き方
フォルダ配置図を確認したら、リンクの書き方を説明していきます。
同階層へのリンク
hpa.htmlからhpb.htmlへリンクする場合、両者ともhp01フォルダ内にあるので、同階層です。
この場合のHTMLは
<a href="hpb.html">***</a> と、リンク先のファイル名を書けばよいのです。***はリンクテキストで、リンク先の内容を表す言葉を入れます。
下の階層へのリンク
下の図とあわせて、フォルダ配置図をご覧ください。
beg.htmlからhpa.htmlへリンクする場合は、１つ下の階層になります。
この場合のリンクのHTMLは<a href="hp01/hpa.html">***</a>になります。
リンク先のファイル名の前にフォルダ名を付け加えます。
上の階層へのリンク
逆に、hpa.htmlから見るとbeg.htmlは１つ上の階層になります。
この場合は、<a href="../beg.html">***</a> と、../ （ピリオド２つにスラッシュ）を付けてファイル名を書きます。
../ が１つ上の階層に上がる、の意味です。
離れた階層へのリンク
フォルダ配置図で、hpc.htmlからbeg.htmlへリンクするときは？
levelupフォルダとbeginingフォルダは同階層に見えますが、配置図をよく見ると、
両者は離れています。
hpc.htmlからbeg.htmlへリンクするには、1度indexフォルダへ上がり、beginingフォルダ→beg.htmlへ下りていきます。
hpc.htmlはhp03フォルダ内にあるので、hp03→levelup→indexと２階層上がります。
HTMLは<a href="../../begining/beg.html">***</a>となります。
階層ごとの書きかたを、まとめました
同階層 <a href="ファイル名">***</a>
1つ下の階層 <a href="フォルダ名 / ファイル名">***</a>
2つ下の階層 <a href="フォルダ名 / フォルダ名 / ファイル名">***</a>
1つ上の階層 <a href="../ フォルダ名 / ファイル名">***</a>
１つ階層が上がるごとに../ を増やす。
../ はピリオド２つにスラッシュで、１つ上の階層を表します。
２つ上の階層なら、../../ になります。
***の部分は、リンクテキストと呼ばれますが、例えば「階層についてはこちらから」など、リンク先の予想ができるようなテキストを入れます。
画像を挿入するときも、リンクと同様の位置指定が必要になります。画像フォルダの階層を指定するをご覧ください。
なじみにくい？階層構造
階層構造は、ふだんからほとんど意識してこなかった事柄なので、理解しにくいものですが、なにげなく開いているファイルも、どのような階層にあるのかを知ることができます。
上の画像はマイドキュメントから画像のフォルダを開いたところです。￥マークは / (スラッシュ)と同じく、階層を表すしるしです。
gusuku365というフォルダは、My Documentsフォルダの、使用者名のフォルダの、Documents and Settingsフォルダにあり、Cドライブ（ハードディスク）に保存されている。ということがわかります。普段から、階層構造のお世話になっていた？というわけです。
用語：階層構造/リンクテキスト/Cドライブ/ハードディスク/リンク
サイト内のリンクを作る前のページ | 次のページ画像と文章（テキスト）のレイアウト