トップ > インターネット > ホームページ作成・素材 > HTMLの基礎−タグを覚えてウェブページを作ろう!−

ホームページはHTMLタグの知識とテキストエディタさえあれば作成できます。またタグを理解していればサイトの細かい部分まで手が届きます。でも、わからない・・そんな方にお送りする初心者向けのHTMLタグ講座「HTMLの基礎」。

RSS


メルマガの登録・解除

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。



HTMLの基礎HTMLの基礎 Vol.48 相対パス・絶対パスについて

発行日:5/27

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

    HTMLの基礎 −タグを覚えてウェブページを作ろう!−

      2005/05/27(Fri) Vol.48       執筆:ykr
              http://ykr.main.jp/html/index.html

*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

   1.相対パス・絶対パスについて

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   


  ここ数日寝不足気味です。これが寒い冬だとおきるのがとても辛いのです
  が、最近朝方でも気温が高めなので大分楽です。忙しくて時間がなくなる
  のと比例して、デスクに張り付いたまま動けなくなります。そうするとゆ
  っくり買い物する時間もないので必然的にネットでの買い物が多くなりま
  す。(もともと好きなのですが)本当にネットは便利ですね。

  さて、今回は相対パスと絶対パスについて説明します。
  それでは今回も最後までお付き合い宜しくお願いいたしますね。


  ※注意  HTMLのバージョンは4.01です。
       発刊時点で非推奨とされてるものも掲載しています。
       表示確認しているブラウザは、WinIE6、WinNN7、MacIE5.2
       MacNN7です。その他のブラウザでの表示は未確認ですので
       意図したとおりにならないことがあります。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


1.相対パス・絶対パスについて

  参照:http://ykr.main.jp/html/component/htmldir.html

  ウェブページ上で、リンクを張ったり画像を表示させたりする際、リンク
  先のファイルや画像等のファイルのパスを指定します。パスによるファイ
  ルの指定方法には「相対パス」と「絶対パス」による2通りの指定方法が
  あります。

  相対パスと絶対パスは、記述するアドレスが外部リンク(自分のサイト外
  )か内部リンク(自サイト内)かによって、どちらにした方が後々便利な
  のか等で使い分けます。


----------------------------------------------------------------------


  ここで簡単に階層構造について触れておきます。ディスク上のファイルや
  ディレクトリ(フォルダ)はまるで木のように連なっています。最初のデ
  ィレクトリがあり、その中にファイルやさらに次のディレクトリがあり・
  ・などというようにだんだんと下の階層にいくにつれ、幹のように広がっ
  て行きます。それらをまとめて 【ツリー構造】 と呼びます。

  【例】

  最初のディレクトリ

  ▼ http://ykr414.com/ からはじまり
  ▼ http://ykr414.com/dos/
  ▼ http://ykr414.com/css/
  ▼ http://ykr414.com/xml/ 

  ・・・等という様に、最初のディレクトリの下にいくつでもディレクトリ
  を作成する事ができます。

  この始めに位置するディレクトリを 【ルートディレクトリ】
  その下に作成したディレクトリを  【サブディレクトリ】
  と呼びます。

  また現在いるディレクトリの事を  【カレントディレクトリ】
  と呼びます。


----------------------------------------------------------------------


■■絶対パスで指定する

  絶対パスによる指定方法とは、ルートディレクトリから目的のファイルの
  位置までの全ての階層を順に記述するものです。「http〜」から全て記述
  したアドレスがそれにあたります。

  ▼htmldir.htmlを絶対パスで指定

  http://ykr.main.jp/html/component/htmldir.html

  この記述の仕方ですと、目的のファイルである「htmldir.html」を指定す
  る場所が、外部ファイル・内部ファイルどこであろうと関わらず、記述の
  仕方は変わりません。


■■相対パスで指定する

  相対パスによる指定方法とは、現在いるカレントディレクトリから見て、
  目的のファイルのパスを記述します。では・・

  「http://ykr.main.jp/html/index.html
  から見て、
  「http://ykr.main.jp/html/component/htmldir.html
  を相対パスで記述するにはどうすればよいのでしょう?


   ./component/htmldir.html

   もしくは

   component/htmldir.html


  と記述します。(どちらでも同じです)
  では今度は逆に・・

  「http://ykr.main.jp/html/component/htmldir.html
  から見て、
  「http://ykr.main.jp/html/index.html
  を相対パスで記述するにはどうすればよいのでしょう?


   ../index.html


  と記述します。「..」は1つ上の階層を表します。


----------------------------------------------------------------------


  では、これら「相対パス」と「絶対パス」の使い分けはどのようにすれば
  よいのでしょう。それには自分のサイト内へのリンクを相対パスで記述す
  る場合と、絶対パスで記述する場合を考えてみてください。

  「http://ykr.main.jp/html/index.html」から
  「http://ykr.main.jp/html/component/htmldir.html」へのリンクは・・


  ▼相対パスだと・・

  <a href="component/htmldir.html">ああ</a> 又は
  <a href="./component/htmldir.html">ああ</a>

  ▼絶対パスだと・・

  <a href="http://ykr.main.jp/html/component/htmldir.html">ああ</a>


  となります。どちらでも記述可能です。
  しかし、もしサイトごとどこか別の場所、例えば「http://ykr414.com/
  から始まる場所に移動させたと考えてみましょう。ファイルの位置関係や
  フォルダ名などは変更なしです。サイトの引越しはありえないことではあ
  りません。その場合の記述方法は・・


  ▼相対パスだと・・

  <a href="component/htmldir.html">ああ</a> 又は
  <a href="./component/htmldir.html">ああ</a>

  ▼絶対パスだと・・

  <a href="http://ykr414.com/html/component/htmldir.html">ああ</a>


  見てわかるように、相対パスは変更なしですが、絶対パスで指定した場合
  、「http://ykr.main.jp/」から「http://ykr414.com/」に変更しなくて
  はなりません。ひとつふたつなら変更も容易ですが、もし全ての内部リン
  クを絶対パスで記述していたとしたら・・・

  それを考えると、自分のサイト内へのリンクは、相対パスで記述するのが
  望ましいと言えます。(見た目にもスマートです)


  逆に外部リンク、他サイトへのリンクを張る場合には絶対パスで記述しま
  す。相対パスで記述するのは気が遠くなりそうですし、自分が移動したと
  しても、絶対パスで記述された他サイトへのリンクは変化しません。

  勿論、リンク先のページが移動すれば書き換えなくてはなりませんが・・

  内部リンクを相対パスで記述する際に複雑にしない為にも、サイト内の階
  層構造はわかりやすく作成しておきましょう。そうすると後々ファイルが
  増えた場合のメンテナンスなどもしやすくなります。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━


来週は・・・

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

    ・ これまでにお便りから特に多かったFAQを掲載します。

   ◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆◇◇◇◆   

(予告なく変更する事があります)


■ 雑記 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


  今回も最後まで付き合ってくださった方、お疲れ様でした。
  最近ネットでの買い物が多いと書きましたが、今に始まった事ではありま
  せん。特に、ネットでは夜中でも買い物できるので、日中ゆっくり買い物
  できない人にとっては重宝すると思います。

  本当になんでも購入することができるので、色々なものを購入しますが、
  そのせいか先日本屋さんに行ったときに、とても不便だと感じました。
  なぜかというと、検索機能がないからです。大きな本屋さん等では検索
  できる端末機器を置いている所もあるようですが、それでもウェブ上の
  ものよりは私の知っている限りでは劣ります。

  同じ商品で価格のできるだけ低いもの等を探したり比較したり・・昔はな
  くても平気だったものが、今では欠かせないものになっています。

  さて、来週のメルマがですが、今まで頂いたお便りからいくつか抜粋し、
  FAQとして掲載します。役に立つかどうかはわかりませんが。
  では次回のメルマガもどうぞ宜しくお願いいたします。


━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

■■■「HTMLの基礎」姉妹サイトです。よろしくお願いします。■■■■

■■■「全部まるごとスタイルシート」
■   http://ykr414.com/css/
■   スタイルシート辞典です。プロパティごと、または目的ごとに引
■   け、ブラウザの対応状況なども掲載しています。
■   HTMLに加える事で、より細かいレイアウトの指定が可能に。
■   コピーペーストするだけで利用できるテンプレートのページも。

■■■「コマンドプロンプトを使ってみよう!」
■   http://ykr414.com/dos/
■   コマンドプロンプトとは何かから始まり、バッチファイルの作成
■   法や、コマンド別・目的別に引けるコマンド辞典。
■   初心者でもわかるよう細かく説明。

■■■「伸び縮みマークアップ言語 XML」
■   http://ykr414.com/xml/
■   SGMLのサブセットであるXMLは、ネット上で扱うデータを
■   記述するためのデータフォーマットで、柔軟性のある言語構造を
■   持っており、プログラムで自在にデータを情報処理できます。そ
■   のXMLを実際に文書を作成しながら解説。随時追加更新。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■


・MAKERS     http://ykr414.net/
         ダイエットグッズ、美味しいもの、かわいいもの
         セレクトショップ。ちょっと珍しいグッズ・便利な
         サービスなどの情報も掲載。
         コラムなどのコンテンツもあります。

・YKR GALLERY   http://ykr414.com/gallery/
         CG、また実際に描いた絵を紹介するギャラリー。
         趣味で運営の為かなり更新が遅め。
         ・・・というか時間がなくて殆ど更新してません(汗)


*――*――*――*――*――*――*――*――*――*――*――*――*――*――*
  Auther       ykr
  Mail         ykr414@yahoo.co.jp
  URL          http://ykr.main.jp/html/index.html
  Copyright    (C)2004 ykr414. All rights reserved.
  Attention    掲載記事の無断転載を禁じます
*――*――*――*――*――*――*――*――*――*――*――*――*――*――*

最新の記事

ブックマークに登録する

TwitterでつぶやくLismeトピックスに追加するdel.icio.usに追加Buzzurlにブックマークニフティクリップに追加Yahoo!ブックマークに登録記事をEvernoteへクリップ
My Yahoo!に追加Add to Google

規約に同意してこのメルマガに登録/解除する

登録した方には、メルマ!からオフィシャルメルマガ(無料)をお届けします。


この記事へのコメント

コメントを書く


上の画像で表示されている文字を半角英数で入力してください。

※コメントの内容はこのページに公開されます。発行者さんだけが閲覧できるものではありません。
コメントの投稿時は投稿者規約への同意が必要です。

  1. コメントはありません。

このメルマガもおすすめ

  1. @(あっと)驚く!エクセル好きルアップ  

    最終発行日:
    2011/05/26
    読者数:
    4068人

    エクセル(Excel)の基礎から裏ワザまで... D-UP発行のマガジンは、1問1答の形式、詳細な解説付きで配信。さらに連動した懸賞サービスもあり、スキルとプレゼントを同時にゲット。映画情報もあるよ

  2. これ知ってます?Wordの小ワザ&便利ワザ

    最終発行日:
    2011/05/26
    読者数:
    4680人

    D-UPが送る、ほほー!っと納得ワード(Word)の小ワザ&便利ワザをクイズ形式で楽しく学んでいきます。知ってて損することはありません。あなたの文章にアクセントをつけてみませんか?懸賞のチャンスもWでお得。

  3. 全部フリーソフト!!

    最終発行日:
    2014/02/26
    読者数:
    4880人

    ネット上にはこんなに便利なソフトがいっぱい。仕事にも、遊びにも、あると絶対にお得で楽しいソフトを1つずつご紹介します。

  4. 高橋浩子の日本一“お気楽”なパソコンマガジン

    最終発行日:
    2017/05/25
    読者数:
    1130人

    「クスッと笑えてタメになる」をモットーとするテクニカルライター高橋浩子が魂を込めてお届けする週刊メルマガ。パソコン講座を中心に、便利ネタやおすすめサイトもご紹介。とにもかくにも、“お気楽”に楽しめる異色のエンターテイメントマガジンである。

  5. C#プログラミングレッスン

    最終発行日:
    2017/03/04
    読者数:
    973人

    C#での .NETプログラミングを易しく丁寧に解説するメールマガジンです。「C#プログラミング・レッスン」で、.NETプログラミングをマスターしましょう。

発行者プロフィール

過去の発行記事