過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li><strong>絶対 URL</strong>: <code>https://example.com/page</code> ← 外部サイト</li><li><strong>ルート相対</strong>: <code>/path/page</code> ← 同一ドメイン、サイトルートから</li><li><strong>相対 URL</strong>: <code>../page</code> ← 現在のページからの相対</li><li><strong>フラグメント</strong>: <code>#section</code> ← ページ内ジャンプ</li><li><strong>特殊スキーム</strong>: <code>mailto:</code> / <code>tel:</code> / <code>sms:</code></li></ul></td></tr></table>
<h2>href の基本</h2>

<p>HTML <code><a></code> タグの <strong>href 属性</strong>はリンク先 URL を指定します。URL の書き方は複数あり、用途で使い分けます。</p>

<h2>主な href の種類</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>種類</th><th>例</th><th>解決先</th></tr></thead>
<tbody>
<tr><td>絶対 URL</td><td><code>https://example.com/page</code></td><td>そのまま</td></tr>
<tr><td>プロトコル相対</td><td><code>//example.com/page</code></td><td>現在のスキーム (http/https)</td></tr>
<tr><td>ルート相対</td><td><code>/path/page</code></td><td>サイトルートから</td></tr>
<tr><td>相対 (同階層)</td><td><code>page.html</code></td><td>現在ディレクトリから</td></tr>
<tr><td>相対 (親階層)</td><td><code>../page.html</code></td><td>1 階層上から</td></tr>
<tr><td>フラグメント</td><td><code>#section</code></td><td>同ページ内</td></tr>
<tr><td>クエリ</td><td><code>?id=1</code></td><td>現在 URL にクエリ追加</td></tr>
<tr><td>mailto:</td><td><code>mailto:foo@example.com</code></td><td>メールクライアント起動</td></tr>
<tr><td>tel:</td><td><code>tel:+81-3-1234-5678</code></td><td>電話アプリ起動</td></tr>
<tr><td>javascript:</td><td><code>javascript:void(0)</code></td><td>JS 実行 (非推奨)</td></tr>
</tbody>
</table>

<h2>絶対 URL</h2>

<p>外部サイトへのリンク、SNS シェア、メールに貼るリンク等は絶対 URL:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><a href="https://example.com/article/123" target="_blank" rel="noopener noreferrer">
  外部記事
</a>

<!-- プロトコル相対 (https/http どちらでも追従) -->
<!-- ※ 現代はすべて https なので非推奨 -->
<a href="//cdn.example.com/lib.js">CDN</a></code></pre>
<h2>ルート相対 (推奨)</h2>

<p>同一ドメイン内のリンクには<strong>ルート相対</strong>が無難:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 現在の URL が何であれ /about に飛ぶ -->
<a href="/about">About</a>
<a href="/products/laptop">ノートパソコン</a>

<!-- スラッシュで始めるのがポイント -->
<a href="/css/main.css">スタイル</a></code></pre>
<p>利点:</p>
<ul>
<li>現在のページ階層に依存しないので壊れにくい</li>
<li>ステージング / 本番のドメインが違っても同じパスで動く</li>
<li>SSR / 静的サイトジェネレータと相性◎</li>
</ul>

<h2>相対 URL</h2>

<p>現在のページからの相対パス。ファイルシステムベースのサイトで使います:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 現在 /blog/2024/article.html の場合 -->
<a href="next.html">/blog/2024/next.html へ</a>
<a href="../2023/old.html">/blog/2023/old.html へ</a>
<a href="../../about.html">/about.html へ</a>
<a href="./page.html">同階層 (= page.html)</a></code></pre>
<p>注意: ベース URL は <code><base href></code> タグで変更可能 (後述)。</p>

<h2>フラグメント (ページ内リンク)</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 同ページの id="section1" にジャンプ -->
<a href="#section1">セクション 1 へ</a>

<h2 id="section1">セクション 1</h2>

<!-- 別ページの特定セクションへ -->
<a href="/article/123#comments">コメント欄</a>

<!-- 最上部へ -->
<a href="#">先頭へ</a>
<a href="#top">先頭へ (top はブラウザ既定)</a>

<!-- スクロール挙動を JS で滑らかに -->
<style>
  html { scroll-behavior: smooth; }
</style></code></pre>
<h2>クエリパラメータ</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 現在 URL にクエリだけ変更 -->
<a href="?page=2">次ページ</a>

<!-- 既存のクエリも維持したい場合は JS 必須 -->
<a href="?page=2&sort=date">並び替え</a>

<!-- 検索フォームのリンク -->
<a href="/search?q=html&lang=ja">HTML 検索</a></code></pre>
<h2>特殊スキーム</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- メール -->
<a href="mailto:contact@example.com">お問い合わせ</a>
<a href="mailto:contact@example.com?subject=資料請求&body=お世話になります">資料請求</a>
<a href="mailto:a@x.com,b@x.com?cc=c@x.com&bcc=d@x.com">複数宛先</a>

<!-- 電話 (モバイルでタップで発信) -->
<a href="tel:+81-3-1234-5678">03-1234-5678</a>
<a href="tel:0312345678">国内表記でも可</a>

<!-- SMS -->
<a href="sms:+81-90-1234-5678?body=こんにちは">SMS</a>

<!-- ファイルダウンロード -->
<a href="/files/manual.pdf" download>マニュアルをダウンロード</a>
<a href="/files/data.csv" download="export-2024.csv">CSV を保存</a></code></pre>
<h2>JavaScript URL (非推奨)</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- ❌ 非推奨: CSP / セキュリティで弾かれる -->
<a href="javascript:alert(&apos;hi&apos;)">クリック</a>
<a href="javascript:void(0)" onclick="doSomething()">処理</a>

<!-- ✅ 推奨: button を使う -->
<button type="button" onclick="doSomething()">処理</button>

<!-- ✅ どうしても a タグなら -->
<a href="#" onclick="event.preventDefault(); doSomething();">処理</a></code></pre>
<h2>target / rel / download 属性</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 新タブ (必ず rel="noopener noreferrer" を付ける) -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  外部
</a>

<!-- iframe 内のリンクを親フレームに -->
<a href="/page" target="_parent">親に開く</a>
<a href="/page" target="_top">最上位に開く</a>

<!-- ダウンロード強制 -->
<a href="/files/report.pdf" download>レポート</a>

<!-- リンク先言語 -->
<a href="/en/article" hreflang="en">English</a>

<!-- リンク種類 -->
<a href="https://shop.example.com" rel="sponsored noopener">広告</a></code></pre>
<h2>Laravel での書き方</h2>

<p>Laravel では URL ヘルパー / ルートヘルパーを使うと、ルート定義変更時にも壊れません:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-php">// Blade テンプレ

// 1. ルート名で生成 (推奨)
<a href="{{ route(&apos;home&apos;) }}">ホーム</a>
<a href="{{ route(&apos;article.show&apos;, [&apos;id&apos; => 123]) }}">記事 123</a>

// 2. URL ヘルパー
<a href="{{ url(&apos;/about&apos;) }}">About</a>
<a href="{{ url(&apos;/article/&apos; . $id) }}">記事</a>

// 3. asset ヘルパー (CSS / JS / 画像)
<link rel="stylesheet" href="{{ asset(&apos;css/app.css&apos;) }}">
<img src="{{ asset(&apos;images/logo.png&apos;) }}" alt="ロゴ">

// 4. 現在のクエリを保持
<a href="{{ url()->current() }}?page=2">次ページ</a>
<a href="{{ request()->fullUrlWithQuery([&apos;page&apos; => 2]) }}">次ページ</a>

// 5. ログインユーザーのプロフィールへ
<a href="{{ route(&apos;users.show&apos;, auth()->id()) }}">マイページ</a></code></pre>
<p>routes/web.php 側:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-php">Route::get(&apos;/article/{id}&apos;, [ArticleController::class, &apos;show&apos;])->name(&apos;article.show&apos;);
Route::get(&apos;/&apos;, [HomeController::class, &apos;index&apos;])->name(&apos;home&apos;);</code></pre>
<h2><base href> (相対パスのベースを変更)</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!DOCTYPE html>
<html>
<head>
  <!-- すべての相対 URL がこのベースから解決される -->
  <base href="https://cdn.example.com/v2/">
</head>
<body>
  <!-- → https://cdn.example.com/v2/img.png -->
  <img src="img.png">
  <!-- → https://cdn.example.com/v2/page.html -->
  <a href="page.html">ページ</a>
</body>
</html></code></pre>
<p>SPA や iframe 多用ページで便利。ただし副作用 (フラグメント <code>#anchor</code> も絶対 URL 化される) があるので慎重に。</p>

<h2>href の選び方フローチャート</h2>

<ul>
<li>外部サイトへのリンク? → <strong>絶対 URL</strong> + <code>target="_blank" rel="noopener noreferrer"</code></li>
<li>同サイト内?</li>
<ul>
<li>同ページ内ジャンプ → <strong>フラグメント (#id)</strong></li>
<li>サーバサイドルーティング (Laravel/Rails) → <strong>ルート相対</strong> (route ヘルパー推奨)</li>
<li>静的サイト (HTML 直書き) → <strong>ルート相対</strong></li>
</ul>
<li>メール / 電話アプリ起動 → <strong>mailto: / tel:</strong></li>
<li>ファイルダウンロード → <strong>絶対 or ルート相対</strong> + <code>download</code></li>
<li>JS 実行のみ → <strong>button タグ</strong>に置き換える</li>
</ul>

<h2>FAQ</h2>

<p><strong>Q: 相対 URL とルート相対 URL、どちらを使うべき?</strong><br />
A: 個別ファイルでサイト構成が変わらないなら相対でも OK。テンプレ展開やリファクタリングが多いプロジェクトは<strong>ルート相対 (または route ヘルパー)</strong> が壊れにくい。</p>

<p><strong>Q: href="" (空) はどうなる?</strong><br />
A: 現在のページを再読み込みします (POST 後の意図しない再送信に注意)。意図せず空になっていないかチェック。</p>

<p><strong>Q: SPA で a タグだと全リロードしてしまう</strong><br />
A: フレームワーク標準の <code>Link</code> コンポーネント (Next.js <code>Link</code>, Vue Router <code>RouterLink</code>) を使うと SPA 遷移になります。</p>