HTMLやCSSを使い、Webサイトの更新・修正をしていると、「なぜこう書く？」「これはどういう仕組み？」と思うことはありませんか。この連載では、書籍『スラスラわかる HTML&CSSのきほん』の著者・狩野 祐東さんがそれらについて解説。ちょっと人には聞きづらい、と思うような「基礎の話」もご紹介します。作業の困った！が解決されますように。
URL、なにが書いてあるの？
URLは、ファイルの場所を示す「アドレス」、つまり住所のようなもので、Webサイトで公開されているすべてのファイルにURLがついています。1つひとつのファイルに固有のURLがあり、世界中のどんなファイルとも絶対に重複しない仕組みになっています。
URLの読み方がわかれば、編集すべきファイルを探し出すことができます。また、URLが書けるようになれば、別のページにリンクしたり、新たに画像を載せたり、差し替えたりすることもできるようになります。
今回は、URLの仕組みと、なにが書かれているのかを解説します。
- URLの構造を知ろう
■スキーム
■ドメイン（ホスト）
■ポート
■パス
■クエリーパラメーター
■アンカー - URLはどこで使われている？
■別のページへのリンク
■画像ファイルへのリンク
■CSSファイル、JavaScriptファイルへのリンク - パスの構造を詳しく見てみよう
- 相対パスと絶対パス
URLの構造を知ろう
Webサイトで公開されているHTML、CSS、JavaScript、画像など、すべてのファイルに固有のURLがついています。URLがわかれば、特定のファイルをブラウザに表示させることができます。
URLの例を見てみましょう。（こちらは例です。他ページには遷移しません。）
- https://www.example.co.jp/
- https://www.example.co.jp/company/aboutus.html
- https://example.com/search/index.html?q=%E3%82%B9%E3%83%8B%E3%83%BC%E3%82%AB%E3%83%BC（?q=の後ろにはスニーカーと書かれている）
URLは複数の要素で構成されています。ここではそれぞれの構成要素について見ていきましょう。
▲URLの構成要素
■スキーム
URLの先頭から「://」の前までが「スキーム」です。
スキームは、どんな通信方式でデータを送信・受信するか、その手段を示しています。Webサイト用のデータであれば、ほとんどの場合スキームは「http」か「https」のどちらかです。
スキームが「https」の場合、「ブラウザー ─ （データを公開している）Webサーバー」間のデータの送受信が暗号化され、第三者がのぞき見ることができないようになっています。「http」の場合は暗号化されません。
現在のWebサイトは、ほとんどの場合スキームには「https」が使われ、通信が暗号化されています。
■ドメイン（ホスト）
「://」の後ろから、最初の「/」までが「ドメイン」です。「ホスト」と呼ばれることもあります。
ドメインは、技術的にはどのWebサーバーとデータを送受信するかを指定しています。ドメインは企業や個人がドメイン登録団体に申請して、唯一無二のドメイン名を取得することができます。
ドメインはさらに「サブドメイン」と「ドメイン」に分かれます。このうち「ドメイン」は登録団体に申請しないと使えないもので、サブドメインは、Webサーバーを設定できれば、ドメインの所有者が自由につけることができます。この記事では、原則としてサブドメインとドメインを区別せず、「ドメイン」と呼ぶことにします。
■ポート
ポートは、ブラウザーからWebサーバーにデータを要求する際の「リクエストの届け先」を示す番号です。通常、スキームがhttpsならポートは443番、httpなら80番と決まっているため、ほとんどの場合省略されます。
■パス
ドメインに続く「/」以降が、「パス」と呼ばれます。これは、HTMLファイルなどがWebサーバーのどこに保存されているかを示すものです。ファイルを特定するには、このパスが役立ちます。
ただし、CMSなど、Webサーバー側で動作するプログラムによってページが生成される「動的サイト」では、URLはプログラムが一定のルールに従って生成するため、ページのHTMLの場所をパスから特定することはできません。
パスについては後ほどもう少し詳しく見ていきます。
■クエリーパラメーター
「?」以降の部分は「クエリーパラメーター」と呼ばれます。ブラウザーからWebサーバーになんらかのデータ、たとえば「検索語」などを送信する場合に使われます。図の「q=shirts」のように、「データの名前=データの中身」という形式になっていて、複数のデータを送信する場合はそれが「&」で連結されます。
■アンカー
「#」で始まる部分は「アンカー」と呼ばれ、ページの特定の場所にリンクするときに使われます。
URLはどこで使われている？
Webサイトでは、URLはいろいろな場所で使われています。まず目立つのは、ブラウザーのアドレスバーに表示されているものでしょう。
▲アドレスバーのURL
また、次のような場所でも使われています。
■別のページへのリンク
あるページのHTMLから別のページにリンクするにはURLを使います。HTMLタグの説明は別の記事でする予定ですが、あるページから別のページにリンクするところには、図のようなHTMLコードが書かれています。
▲別のページにリンクするときのURL
■画像ファイルへのリンク
ページに画像を表示するときは、画像ファイルのURLを指定します。
▲画像ファイルを表示するときのURL
■CSSファイル、JavaScriptファイルへのリンク
ページのデザインを作るCSSファイルや、プログラムを組み込むためのJavaScriptファイルを使う場合は、ページのHTMLファイルからそれらのファイルにリンクします。そのときもURLを使います。
▲CSSファイルやJavaScriptファイルにリンクする例
パスの構造を詳しくみてみよう
Webサーバー側のプログラムを使わず、HTMLを手動で作成する「静的サイト」では、Webサイトを構成するファイルを図のようにフォルダに分けて保存します。
▲Webサイトのフォルダ・ファイル構成
フォルダ構成には一番の親フォルダがあります。この図では「root」がそのフォルダで、それより上のフォルダには、Webサイトで使うデータは保存されません。
また、rootフォルダ直下の「index.html」が、そのWebサイトの「トップページ（ホームページ）」になります。Webサイトのドメインが「example.com」だとしたら、ホームページのURLは次のようになります。
https://example.com/index.html
この場合、「/index.html」が「パス」になります。
Webサーバーの設定にもよりますが、たいていの場合、ファイル名が「index.html」の場合、URLから（パスから）省略できます。最後の「/」も省略できます。
すると、このURLは次のように書いても同じです。（こちらは例です。他ページには遷移しません。）
または
index.htmlが省略できるので、上記の「Webサイトのフォルダ／ファイル構成の例」でいえば、「aboutus」フォルダのindex.htmlにリンクするURLは、次のいずれでも同じindex.htmlにリンクできます。
https://example.com/aboutus/index.html
相対パスと絶対パス
HTMLから各ファイルにリンクするとき、リンクの書き方には「相対パス（相対URL）」と「絶対パス（絶対URL）」の2種類があります。
■相対パス
相対パスとは、リンク元のファイルを基点に、リンク先ファイルの場所を、相対的な位置関係で指定する方法です。静的サイトでしか使用できません。
たとえば、上記の「Webサイトのフォルダ・ファイル構成」で、「root」フォルダ直下のindex.htmlから、「support」フォルダのindex.htmlにリンクするとします。
▲ルートのindex.htmlからsupportフォルダのindex.htmlにリンクする
このとき、相対パスは次のようになります。
support/index.html
パスは、リンク先のファイルに到達するまでのフォルダ名とファイル名を「/」で区切って続けて書きます。
相対パスの先頭に「../」と書くと、1階層上（フォルダ）を参照します。また、先頭に「./」と書くと、同階層を表します。ただし、「./」は省略可能です。
「../」の使い方を見てみます。たとえば、「products」フォルダの「index.html」に、「images」フォルダの「photo.jpg」を掲載するとします。「products/index.html」を基点に、「images/photo.jpg」にリンクすることになり、一度、1階層上に上がります。
▲1階層上に上がる例
1階層上に上がって、「images」フォルダの「photo.jpg」を参照することになりますから、この場合の相対パスは次のようになります。
../images/photo.jpg
■絶対パス
絶対パスは、URLそのものです。「https://」から始まり、ドメイン名とパスをすべて書きます。
たとえば1つ前の例で見た、「products/index.html」から「images/photo.jpg」にリンクするときは、絶対パスで書くと次のようになります。パスの部分は、ルートフォルダから、リンク先ファイルへのフォルダ／ファイル階層だと考えてかまいません。
https://www.example.com/images/photo.jpg
さいごに。
ここまで、URLの仕組みと、なにが書かれているのかを説明してきました。
アルファベットや数字の羅列に見えていたURLも、読み方がわかることで、作業に必要な情報がたくさん含まれていることがわかりましたね。
URLを理解しておくことは、Webサイトのデータを扱ううえでとても重要です。ぜひマスターして、作業に役立ててください。
UIデザイナー、エンジニア、書籍著者。アメリカ・サンフランシスコでUIデザイン理論を学ぶ。帰国後会社勤務を経てフリーランス。2016年に株式会社Studio947を設立。Webサイトやアプリケーションのインターフェースデザイン、インタラクティブコンテンツの開発を数多く手がける。各種セミナーや研修講師としても活動中。著書に『スラスラわかるHTML&CSSのきほん』『これからのJavaScriptの教科書』(SBクリエイティブ)『WordPressデザインレシピ集』 (技術評論社)など多数。 https://studio947.net
※本記事に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。
