</code></td><td>タブのタイトル（<strong>必須</strong>）</td></tr>
<tr><td><code><meta></code></td><td>charset / viewport / description / og:* 等</td></tr>
<tr><td><code><link></code></td><td>CSS / favicon / preload / canonical</td></tr>
<tr><td><code><script></code></td><td>外部 / インライン JS</td></tr>
<tr><td><code><style></code></td><td>インライン CSS</td></tr>
<tr><td><code><base></code></td><td>相対 URL の基底</td></tr>
<tr><td><code><noscript></code></td><td>JS 無効時表示（head 内は <code><link></code>/<code><style></code>/<code><meta></code> 限定）</td></tr>
<tr><td><code><template></code></td><td>クライアントテンプレ（head/body 両方可）</td></tr>
</tbody>
</table>
<p>これ以外（<code><div></code> / <code><p></code> / <code><span></code> / <strong>素のテキスト</strong>）を置くと押し出されます。</p>
<h2>原因チェックリスト</h2>
<h3>① タグの誤配置</h3>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- NG パターン -->
<head>
<title>Page
Hello
説明
Title
② BOM や空白行
NG: ファイル先頭に BOM (EF BB BF) や空白行がある
↓
← BOM があると quirks mode に落ちる
対処:
- エディタで「BOM なし UTF-8」で保存し直す
- VS Code: 右下のステータスバーで「UTF-8 with BOM」→「UTF-8」に変更
- PHP:
③ サーバ側テンプレートの出力ミス
// NG: include されたファイルの末尾に空白行があり、それが 内に流れ込む
// NG: BOM 付きファイル
// → output buffer 取って一括出力するか、文字コード変換ツールで一括解消
Laravel Blade の場合:
{{-- NG: @section の外にテキストや HTML を書いている (head に流れ込む可能性) --}}
@extends('layout')
これは body 用テキスト {{-- ← レイアウト次第で 内に出る --}}
@section('content')
Hello
@endsection
{{-- OK: 必ず @section 内で出力 --}}
@extends('layout')
@section('content')
Hello
@endsection
④ の位置
...
...
確認手順
- Chrome DevTools の Sources タブで生 HTML を確認（サーバが何を返したか）
- 同じく Elements タブで実 DOM を確認
- 2 つを diff すると押し出されたタグが特定可能
- 生 HTML の
- W3C Markup Validator に通す
# CLI で W3C 系チェック
npm install -g html-validate
html-validate index.html
# あるいは tidy
sudo apt install tidy
tidy -errors -quiet index.html
対処パターン
| 原因 | 対処 |
|---|
| head 内に div / p / 素テキスト | 削除 or body 側へ移動 |
| BOM 付きファイル | 「BOM なし UTF-8」で保存 |
| テンプレ include の末尾改行 | 末尾の ?> を省略、ob_start 利用 |
| meta charset が遅い | head 開始直後に置く |
| 独自タグ（カスタム要素） | HTML5 でカスタム要素は body 推奨。head に置くとパースエラー |
| コメントタグの誤閉じ | |
FAQ
Q: head に Google Analytics の
ページの作成
親となるページを選択してください。
ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！
2026-05-16 17:19:31
T
938
作成日時
2017-11-16 16:37:19
更新日時
2026-05-16 17:19:31
バージョン
6
閲覧数
938
コメントを削除してもよろしいでしょうか？
|