html・xhtmlのリンク先の記述についてのあれこれ

リンク先のURLをhttp://www.css-lecture.com/にしたいのにhttp://www.css-lecture.com/index.htmlになっちゃう><

こういう風に思っている人っていませんか?

自分も勉強したての頃は分からずに、ググっていろいろ調べてみたんですが、書いてくれいるサイトを見つける事が出来なかった事を思い出したので 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ファイルの拡張子を変更した場合でも適応される。
  • ソースが短く済む。(メリットか分からないけどw)
  • 常に同じリンク先を示すナビゲーションのリンク先とかフォルダの階層など関係なく、全ページ同じ記述で済む。
    (共通部分をインクルードなどで管理がしやすいですよね。)

デメリット

  • ローカル環境では使えない。
    ※特にCSSをこの記述で読み込んでもまったく反応してくれませんw
    でも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 」

まーこんな感じで知らなかった人は参考にでもして下さい。

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article