html・xhtmlのリンク先の記述についてのあれこれ
こういう風に思っている人っていませんか？
自分も勉強したての頃は分からずに、ググっていろいろ調べてみたんですが、書いてくれいるサイトを見つける事が出来なかった事を思い出したので html・xhtml のリンク先記述について思いつくものをまとめてみます。
リンク先記述の仕方 1
URLの最後にindex.htmlがついちゃう人って下記ソースのようにxhtmlを記述しているはずです。
<a href="../index.html">hoge</a>
<a href="../../index.html">hoge</a>
それをindex.htmlという記述を消す事で最後につくindex.htmlを表示しなくなってくれるんですよ。
<a href="../">hoge</a>
<a href="../../">hoge</a>
メリット
- URLに別に必要のないinde.htmlの記述が出ない。
- indexファイルの拡張子を変更した場合でも適応される。
※例：index.html → index.php
デメリット
リンク先記述の仕方 2
CSS Lectureのソースを見てもらうと分かると思うですが自分は殆どの場合リンク先の指定を｢/｣から初めています。
<a href="/">トップページ</a>
<a href="/log/">全エントリー一覧</a>
これで言う｢/｣は分かりやすく言えば、そのサイトのURLになっちゃうわけなんですよ。
なので上記ソースはイメージとしたらこういう感じですね。
<a href="http://www.css-lecture.com/">トップページ</a>
<a href="http://www.css-lecture.com/log/">全エントリー一覧</a>
自分が何故この記述でするかというとメリットが多いと思うからです。
メリット
- URLに別に必要のないinde.htmlの記述が出ない。
- indexファイルの拡張子を変更した場合でも適応される。
- ソースが短く済む。（メリットか分からないけどｗ）
- 常に同じリンク先を示すナビゲーションのリンク先とかフォルダの階層など関係なく、全ページ同じ記述で済む。
(共通部分をインクルードなどで管理がしやすいですよね。)
デメリット
- ローカル環境では使えない。
※特にCSSをこの記述で読み込んでもまったく反応してくれませんｗ
でもDreamweaverでサイトの管理を行ってのプレビューの場合は反応してくれますよ＾＾
違うページのアンカー部分へリンク先を指定
まぁーこれも今までに説明した通りですねけどね＞＜
例えば「hoge」ファイルの「id="anchor"」部分にリンクを飛ばしたい時の例を挙げてみます。
（トップページに居ると仮定します）
<a href="hoge/index.html#anchor">hoge</a>
「 http://www.css-lecture.com/hoge/index.html#anchor 」
<a href="hoge/#anchor">hoge</a>
「 http://www.css-lecture.com/hoge/#anchor 」
<a href="/hoge/#anchor">hoge</a>
「 http://www.css-lecture.com/hoge/#anchor 」
まーこんな感じで知らなかった人は参考にでもして下さい。
