#16ゼロからwebの基本「HTML」「CSS」編　〜16日目〜　『絶対URLと相対URL』

「こんばんは」あるいは「おはようございます」それとも「こんにちは」

ゆーたろです。

今日も一緒に勉強して行きましょう。

前回リンクをやると言ったと思うのですが先に絶対URLと相対URLをやりましょう。

URL（ユーアールエル）とは、ファイルの住所みたいなもので、
例として、画像を表示させたい時はその画像ファイルの位置をHTML上で指定する必要があります。

リンクを貼って他のページに飛ぶときも、そのHTMLファイルがある位置を指定してあげないといけません。
このファイルの位置を表すのがURLです。

※ちなみにURL「Uniform Resource Locator」の略で直訳すると（リソースの位置を示す形式）になるっぽいです。

そして、URLには絶対URL と相対URL の2通りがあり、「絶対パス」「相対パス」もここでは同じ意味になります。

これは「http://」で始まる指定形式です。（「https://」もある）

※httpは、Hypertext Transfer Protocol の略。ブラウザとサーバの間の通信の作法のようなものです。

httpsは、httpが暗号化されているヤツね。Googleが推奨してるので今後これが主流になりそう。

別サーバにあるファイルへリンクするときには、この絶対パスを使うみたいです。
もちろん同じサーバ内のHTMLファイル同士や画像ファイルなどを、この絶対パスで指定しても大丈夫。
絶対パスの使用例はこんなかんじです。

絶対URLのメリット

絶対URLのデメリット

こちらは同じサイト内のファイルの位置関係を相対的に示す形式で、

説明が難しいのですが、現在のHTMLファイルを起点にして、階層が上か下か、どんな名前の階層か、その中のどの名前のファイルかを書きます。

階層はディレクトリとも言うのでフォルダだと思っ見てください。

起点になるファイル（現在編集しているファイル）がいる階層を、カレントディレクトリと言い、「./（ピリオドとスラッシュ）」で表します。
この「./」は省略できます。

階層は「/（スラッシュ）」で区切ります。
現在のファイルより下の階層は、/で区切ってディレクトリ名を書いていきます。
現在のファイルより上の階層を示すには「../（ピリオド2つとスラッシュ）」を使います。

まだ現時点では図を入れる技術がないのですみません。

ドキュメント相対URLのメリット

ドキュメント相対URLのデメリット

これは「絶対URL」「ドキュメント相対URL」のイイとこ取りのような書き方です。

サイトルート（サイトの第一階層。トップページの index.html を置く階層）を「/（スラッシュ）」で表し、そこから絶対パスのように書きます。

サイトルート相対パスのメリット

サイトルート相対パスのデメリット

ローカルでの作業ならドキュメント相対パスが基本。
で、同じサーバ内に無い、別ドメインにあるファイルへのリンクなら、絶対パスで貼る。

みたいです。笑

今回はここまでにしましょう。

わかりにくいかも知れないのですが、最後まで見ていただきありがとうございます。

次回　→今回の内容を踏まえてページリンクをやりましょう。

ゆるあわ自習室　ゼロから『HTML』『CSS』編