03. URL・ドメイン・パスの基本

この章では、URL、ドメイン、パスの基本を学びます。

Web制作では、リンク先、画像、CSS、JavaScript、フォーム送信先など、いろいろな場所でURLやパスを扱います。

ここがあいまいだと、リンク切れや画像の読み込みエラーが起きやすくなります。

URLとは

URLは、Web上の場所を示す住所のようなものです。

たとえば、次のようなものがURLです。

URLの例
https://example.com/about/
https://example.com/news/?page=2
https://example.com/service/#price

URLを見ると、どの通信方法で、どのドメインの、どのページやファイルへアクセスするのかがわかります。

URLを分解する

次のURLを分解してみます。

URLの分解
https://example.com/about/?from=top#profile
部分名前意味
httpsプロトコル通信方法
example.comドメインWebサイトの住所
/about/パスサイト内の場所
?from=topクエリパラメータ追加情報
#profileハッシュページ内の位置

Web制作では、特にドメイン、パス、ハッシュをよく扱います。

プロトコル

プロトコルは、通信の方法を表します。

Webサイトでは、主に http と https を見かけます。

プロトコルの例
http://example.com/
https://example.com/

現在のWebサイトでは、基本的に https を使います。

https は通信が暗号化されるため、フォームやログインがあるサイトだけでなく、通常のコーポレートサイトでも必要です。

ドメイン

ドメインは、Webサイトの住所にあたる部分です。

ドメインの例
example.com
example.jp
sub.example.com

ドメインがあることで、ユーザーはIPアドレスのような数字ではなく、覚えやすい名前でWebサイトへアクセスできます。

Web制作では、クライアントから「このドメインで公開したい」と言われることがあります。

その時、ドメイン自体の取得やDNS設定はドメイン・サーバー講座の領域ですが、ドメインがWebサイトの入口になることは理解しておきます。

パス

パスは、ドメインの後ろに続く、サイト内の場所を示す部分です。

パスの例
/about/
/service/
/news/article-01/
/assets/css/style.css

パスは、ページだけでなく、CSS、JavaScript、画像などのファイルにも使われます。

たとえば、次のURLでは、/images/main.jpg がパスです。

画像ファイルのURL
https://example.com/images/main.jpg

画像が表示されない時は、このパスが間違っていることがよくあります。

クエリパラメータ

クエリパラメータは、URLの ? 以降に付く追加情報です。

クエリパラメータの例
https://example.com/search/?keyword=css
https://example.com/news/?page=2

検索キーワード、ページ番号、流入元の情報などを渡すために使われます。

複数の情報を渡す場合は、& でつなぎます。

複数のクエリパラメータ
https://example.com/search/?keyword=css&page=2

Web制作では、フォーム、検索ページ、広告リンク、アクセス解析用のURLなどで見かけます。

ハッシュ

ハッシュは、URLの # 以降の部分です。

ページ内の特定の位置へ移動するためによく使います。

ハッシュの例
https://example.com/service/#price

HTML側では、対応する id を持つ要素が必要です。

移動先になる要素
<section id="price">
    <h2>料金</h2>
</section>

ページ内リンクやLPのナビゲーションでよく使います。

トップページと下層ページ

トップページは、サイトの入口になるページです。

トップページ
https://example.com/

下層ページは、トップページの下にあるページです。

下層ページ
https://example.com/about/
https://example.com/service/
https://example.com/contact/

Web制作では、トップページと下層ページでパス指定が変わることがあります。

特に相対パスを使っている場合、下層ページだけ画像やCSSが読み込まれないことがあります。

trailing slash

URLの最後にある / を trailing slash と呼ぶことがあります。

trailing slashありなし
https://example.com/about/
https://example.com/about

サイトやサーバーの設定によって、どちらを正式なURLにするかが変わります。

Web制作では、内部リンクの書き方をそろえることが大切です。

URL設計で気をつけること

URLは、ユーザーや検索エンジンにも見える情報です。

Web制作では、次の点に気をつけます。

  • 意味が伝わる英単語を使う
  • 長すぎるURLにしない
  • 日本語URLを安易に使わない
  • ページ内容とパスを合わせる
  • 不要に深い階層にしない
  • 途中でURLを変える場合はリダイレクトを考える

たとえば、サービス紹介ページなら /service/、会社概要なら /company/ や /about/ のように、内容が想像しやすいパスにします。

この章のまとめ

  • URLはWeb上の場所を示す住所のようなもの
  • URLは、プロトコル、ドメイン、パス、クエリパラメータ、ハッシュに分けて考えられる
  • パスはページだけでなく、画像、CSS、JavaScriptにも使われる
  • ハッシュはページ内リンクでよく使う
  • URL設計では、意味が伝わり、管理しやすい形にそろえる