2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Yudai-HARA(原 雄大)

まずこれを書け！ モダンなCSSの「黄金テンプレート」【2026年4月版】

2
Posted at

概要

Webページ（HTML）を作成するときのために、
「とりあえず最初にこれを書いておけ」という CSSテンプレート を用意しました！

改変自由です！ ご自由にお使いください。

はじめに

簡単なWebページをすぐに作りたい、と思ったこと、ないでしょうか。筆者はあります。

最近は生成AIによるバイブコーディングで、HTML含めてすべて作れてしまいますね。
しかし、のちにカスタムすることを考えると、ある程度は自分で作っておきたいものです。
ここはあえて、一段階戻り、AIにCSSだけを作らせました。

綺麗でモダンなWebページを、ゼロからすぐに作りたい！
……という人（というよりは筆者）のために作った、
最速でWebページを作成するための、CSSのベースです。
まず最初にこれを書いておけば大丈夫です。

拡張性を高くしてありますので、このCSSをベースとして、
カスタムのクラスを加え、ぜひオリジナルのページに役立ててください。

本編

早速ですが、「とりあえず、これ書いとけ」なベースCSSを以下に載せます。
CSSの解説は下部の #解説 に記しています！

このCSSはあくまで「ベース」のものになります。
これだけだとただ白いページになってしまうので、
別途スタイルを書き加えて適用し、オリジナルのページ作りに役立ててください。

CSS (base.css)

base.css
@charset "UTF-8";
/* ========== 基本設定 ========== */

/* ---------- 1. 変数 ---------- */

:root {
  /* システム設定 */
  color-scheme: light dark;

  /* 色（デフォルト：ライトモード） */
  --clr-primary: #1a1a1a;
  --clr-accent: #2563eb;
  --clr-bg: #ffffff;
  --clr-text: #334155;

  /* フォントサイズ */
  --fs-h1: clamp(2.25rem, 1.5rem + 4vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 3vw, 2.75rem);
  --fs-h3: clamp(1.5rem, 1.1rem + 2vw, 2rem);
  --fs-body: 1rem;

  /* フォントウェイト */
  --fw-normal: 400;
  --fw-bold: 700;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 色（ダークモード） */
    --clr-primary: #ffffff;
    --clr-accent: #60a5fa;
    --clr-bg: #0f172a;
    --clr-text: #e2e8f0;
  }
}

/* ---------- 2. リセット＆ベース ---------- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
  line-height: 1.6;
  color: var(--clr-text);
  background-color: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 古いブラウザ対策 */
  min-height: 100svh;
}

main {
  flex: 1;
}

header, footer {
  flex-shrink: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  vertical-align: middle;
}

svg {
  fill: currentColor;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
}

/* ---------- 3. 要素別設定 ---------- */
h1, h2, h3 {
  margin: 0;
  line-height: 1.3;
  font-weight: var(--fw-bold);
  font-feature-settings: "palt" 1; /* 日本語対応 */
  font-kerning: normal;
  color: var(--clr-primary);
  overflow-wrap: break-word;
}
h1 {
  line-height: 1.2;
  font-size: var(--fs-h1);
}
h2 {
  line-height: 1.25;
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
@media (hover: hover) {
  a:hover {
    opacity: 0.7;
  }
}

p, ul, ol {
  margin: 0;
}

p {
  overflow-wrap: break-word;
  word-break: auto-phrase; /* 日本語対応 */
}

ul {
  list-style: none;
}

strong, b {
  font-weight: var(--fw-bold);
}

解説

上記CSSの解説をします。

1. 変数

システム設定

:root {
  color-scheme: light dark
}

color-scheme: light dark は、ライトモード・ダークモードに対応していることを示します。

色

:root {
  --clr-primary: #1a1a1a;
  /* 以下略 */
}
@media (prefers-color-scheme: dark) {
  :root {
    --clr-primary: #ffffff;
    /* 以下略 */
  }
}

色を変数として定義しています。var(--clr-bg)のように使うことができます。
自由に変更して、お気に入りの色を設定してください！

ライトモードをデフォルトとしていて、
@media (prefers-color-scheme: dark) により、ダークモードの場合に変数が上書きされるようにしています。

フォントサイズ・フォントウェイト

:root {
  --fs-h1: clamp(2.25rem, 1.5rem + 4vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 3vw, 2.75rem);
  --fs-h3: clamp(1.5rem, 1.1rem + 2vw, 2rem);
  --fs-body: 1rem;

  --fw-normal: 400;
  --fw-bold: 700;
}

フォントサイズ・フォントウェイトを指定しています。自由に調整してください。
clamp()関数により、フォントサイズは動的に変更されるようになっています。

標準の文字サイズを vw（画面幅）だけに依存するのではなく、固定値を足して 1.1rem + 2vw のようにすることで、最低限の文字の大きさを確保しています。

2. リセット＆ベース

全体

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

margin と padding を 0 に設定し、余計な空白が生まれるのを防ぎます。

box-sizing: border-box; を設定することで、要素の大きさがpaddingを含むようになり、のちの計算がしやすくなります。

::before、::after を加え、疑似要素にも一貫した設定が適用されるようにしています。

html

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

scroll-behavior: smooth; は、ページ内リンク等の自動ページ移動で、アニメーションスクロールになるオプションです。
@media (prefers-reduced-motion: reduce) で、「視覚要素を減らす」を選択した場合の、このオプションの強制をオフしています。

body

body {
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
  line-height: 1.6;
  color: var(--clr-text);
  background-color: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 古いブラウザ対策 */
  min-height: 100svh;
}

-webkit-font-smoothing: antialiased; は、主に macOS や iOS（WebKit系ブラウザ） で文字を細く、綺麗に見せるための設定です。（ほぼ影響がないとは言われますので、好みです）

min-height: 100svh; ですが、最新のブラウザで使える svh（Small Viewport Height）を利用しています。
svhは、アドレスバーが表示されている状態（最も狭い表示領域）の高さを基準（100svh）とした単位です。
これを使うことにより、スマホで「アドレスバーのせいで下が隠れてしまう」という問題を回避できます。

svhが解釈できない古いブラウザ対策のため、1行上でmin-height: 100vh; と書いて（フォールバックさせて）あります。

main

main {
  flex: 1;
}

main の要素を縦いっぱいに広げます。
このおかげで、フッターを一番下に固定するなどのメリットが得られます。

header, footer

header, footer {
  flex-shrink: 0;
}

flex-shrink: 0; を設定することで、header, footer の高さが変わらないようにします。

img, video, svg

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  vertical-align: middle;
}

svg {
  fill: currentColor;
}

画像のレイアウト設定です。
svg { fill: currentColor; } は、アイコンの色を文字色に連動させる設定です。

button, input, select, textarea

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
}

フォントを親要素と同じものに設定します。
button はデフォルトの設定をすべて排除しています。

ボタンには何も装飾がない状態です。
別途CSSのクラスなどで設定してください。

cursor: pointer; は、マウスオーバーしたときにカーソルをポインターに変える設定です。

3. 要素別設定

h1, h2, h3

h1, h2, h3 {
  margin: 0;
  line-height: 1.3;
  font-weight: var(--fw-bold);
  font-feature-settings: "palt" 1; /* 日本語対応 */
  font-kerning: normal;
  color: var(--clr-primary);
  overflow-wrap: break-word;
}
h1 {
  line-height: 1.2;
  font-size: var(--fs-h1);
}
h2 {
  line-height: 1.25;
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
}

設定した変数を用いてフォントサイズを決定しています。

font-feature-settings: "palt" 1; は、日本語において、文字ごとの幅に合わせて余白を詰めてくれる（字詰めをしてくれる）オプションです。

font-kerning: normal; は、英語においてカーニングを行うオプションです。

overflow-wrap: break-word; は、非常に長い英単語やURLなどが枠からはみ出すのを防ぐため、必要に応じて単語の途中でも改行させる設定です。

a

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
@media (hover: hover) {
  a:hover {
    opacity: 0.7;
  }
}

text-decoration: none; で、デフォルトの設定をすべて解除しています。

ただし、クラスを設定していない場合は、a:not([class]) で下線を設定しています。

a:focus-visible では、キーボード操作時にアウトラインを表示させています。アクセシビリティー対応です。

a:hover で、マウスオーバー時に少し薄くするようにしています。

@media (hover: hover) を使っているのは、スマホなどのタッチデバイスでタップした後に、ホバー状態のままになってしまう現象を防ぐためです。

p, ul, ol

p, ul, ol {
  margin: 0;
}

p {
  overflow-wrap: break-word;
  word-break: auto-phrase; /* 日本語対応 */
}

ul {
  list-style: none;
}

word-break: auto-phrase; は、日本語において、改行する位置を単語の区切りに調整してくれるオプションです。

word-break: auto-phrase; は、一部の古いブラウザでは動作しません。
ただし、動作しない環境では通常の改行が行われるだけなので、問題なく使って構いません。

ul { list-style: none; }を設定することで、リストのマーカー（"・"）を消す効果があります。

ul { list-style: none; } は強力すぎる設定のため、
全体に設定するのが良くない場合もあります。その場合、消去しても構いません。

strong, b

strong, b {
  font-weight: var(--fw-bold);
}

変数を利用した、太文字の設定です。

使い方（Tips）

上記ファイルを base.css として、別途style.css を定義するのがおすすめです。
利用の際は、両方を読み込ませてください。

例

index.html
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>タイトル</title>
  <link rel="stylesheet" href="base.css" />
  <link rel="stylesheet" href="style.css" />
</head>

おわりに

本記事に載せているCSSコードは、パブリックドメインとします（すべての権利を放棄します）。
※一部 Google Gemini を利用して作成しました。

この記事が皆様のお役に立てば幸いです。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?