タイトル: CSSの組み込み方法
SEOタイトル: HTML に CSS を組み込む 4 つの方法（External / Internal / Inline / @import）
| この記事の要点 | |||
| そのページ専用 / Critical CSS | ★★ 限定 | |
| Inline | style="..." | 動的値・メール HTML | ★ 例外時のみ |
@import | CSS 内で別 CSS を読む | 古い CMS / 一部用途 | 非推奨 |
1. External (外部 CSS) — 最推奨
サイト
...
External のメリット:
- ブラウザキャッシュが効く（複数ページで同じ CSS を再 DL しない）
- HTML と CSS の分離で保守性 ★
- HTTP/2 / HTTP/3 では複数ファイル同時 DL がほぼコスト無し
- min化 / hash付与（
main.abc123.css）で長期キャッシュ可能
2. Internal (style タグ)
注意
Internal の使いどころ:
- そのページにしか使わない CSS（メール購読確認ページ等）
- Critical CSS（ファーストビューに必要な最小 CSS）を inline → レンダリング高速化
- 1 ページ完結の LP（ランディングページ）
- キャッシュは効かない（HTML 毎回再 DL）
3. Inline (style 属性)
エラー
{{ user.name }}
本文
Inline の問題点:
- 詳細度が高すぎる:
!important以外で上書き不可能 - キャッシュ不可
- CSP（Content Security Policy）と相性悪い:
style-src 'unsafe-inline'が必要 - 保守性最悪: グローバル変更ができない
例外的に使ってよいケース:
- HTML メール（受信側 CSS 解釈の制限）
- JS で実行時に算出した値（座標、サイズ）
- テスト用の 1 回限り検証
4. @import
/* main.css */
@import url("base.css");
@import url("components.css");
/* メディア条件付き */
@import url("print.css") print;
/* CSS の最先頭でなければ無効 */
body { background: white; }
@import url("late.css"); /* これは無効 */@import の弱点: パーサが @import を読んでから次の CSS を取りに行くブロッキング読込になり、レンダリングが遅れます。今は使わないのが正解。代わりに Sass/PostCSS の @import や @use でビルド時に結合してください。
5. CSS-in-JS
// styled-components (React)
import styled from 'styled-components';
const Button = styled.button`
background: #4caf50;
color: white;
padding: 0.5em 1em;
&:hover {
background: #45a049;
}
`;
// Emotion
import { css } from '@emotion/react';
const style = css`color: red;`;
...React / Vue で使われる。SSR 時にスタイルを
これで First Contentful Paint (FCP) が劇的に改善します。
HTTP/2 Push（過去の手法）
サーバから CSS を先回り送信する手法ですが、HTTP/2 Push は Chrome で廃止（2022 年）。代わりに + 103 Early Hints が使われます:
HTTP/2 103 Early Hints
Link: ; rel=preload; as=style
HTTP/2 200 OK
Content-Type: text/html
...性能と保守性の比較
| 方式 | 初回描画 | キャッシュ | 保守性 | 備考 |
|---|---|---|---|---|
| External (link) | ○ | ★★★ | ★★★ | 標準 |
| External + preload | ★★★ | ★★★ | ★★ | HTTP 階層下げで最強 |
| Internal (style) | ★★ | × | ★ | 1 ページ限定 / Critical |
| Inline (属性) | ○ | × | × | 動的のみ |
| @import | ×（遅延） | ○ | ★ | 非推奨 |
現代の推奨構成
- ソース: Sass / PostCSS / Tailwind 等で書く
- ビルド: Vite / Webpack で 1 本の
app.[hash].cssに - 配信: CDN で長期キャッシュ（hash 付きなので安全）
- 読込:
+ Critical CSS を inline - CSP:
style-src 'self'で inline を禁止（Critical 部分は nonce で許可）
FAQ
Q: link と style、どちらを使うべき？
A: 基本は （External）。キャッシュが効くため。