最小限のCSSでそこそこ良いサイトを作る（2023）

(thecascade.dev)

6 ポイント投稿者 GN⁺ 2025-10-07 | 1件のコメント | WhatsAppで共有

多くの開発者は CSS設計のやりすぎ によって不要な問題を抱えがち
最小限の グローバルスタイル だけでも、十分にすっきりしてレスポンシブなページを作れる
画像、SVG、動画 要素はサイズ制限とブロック表示だけで基本的なレイアウト問題を解決できる
system-ui フォントと適切な行間、段落の最大幅制限を設定することで可読性を向上できる
OSの ダークモード などの環境設定を反映するため、color-scheme プロパティの適用が必要

最小限のCSSでそこそこ良いサイトを作る

過剰なCSSの問題とアプローチ

多くの人はWebサイトを作るとき、CSS設計を必要以上に複雑にしがち
最小限のCSSだけでも、十分に洗練され、基本に忠実なレスポンシブページ を作成できる

基本的なHTMLと画像への対応

基本的なHTMLを書くだけでも、サイトは 基本的なレスポンシブ性 を備えている
画像が原因でレイアウトに オーバーフロー問題 が発生することがあるため、以下のCSSを適用する
```
img {
  max-width: 100%;
  display: block;
}
```
SVG、video 要素でも同様の問題が発生する場合は、以下のように拡張して適用できる
```
img,
svg,
video {
  max-width: 100%;
  display: block;
}
```

タイポグラフィの改善

ブラウザのデフォルトフォントは、デザイン面でやや味気なく見えやすい
フォントファミリーに system-ui を使うことで、各プラットフォームに適した標準書体 を適用できる
既定のフォントサイズと行間は やや小さめな傾向 があるため、以下のような改善設定が推奨される
```
body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}
```
この設定だけでも、ブラウザのデフォルト値 と比べて大きな改善効果がある

ダークモード対応

多くのユーザーは ダークモード を好むため、OS設定に追従する color-scheme プロパティの適用が有効
```
html {
  color-scheme: light dark;
}
```
このプロパティにより、ユーザーエージェントスタイルが システムの優先テーマ を自動で反映するようになる
HTMLタグの属性として指定することもできる
```
<html lang="en" color-scheme="light dark"></html>
```
システムの設定だけでなく、色のスキームをユーザーが直接選べるようにする のも良いベストプラクティス

コンテンツ幅の制限

コンテンツ段落の長さ は可読性に大きく影響する重要な要素
一般的には、本文は1行あたり45〜90文字 の範囲で表示されるように設定するのが理想的
以下のように main 要素の最大幅を制限することで、段落の 可読性改善 が可能
```
main {
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}
```
min() 関数で 70ch と 100% - 4rem のうち小さい方の値を選ぶ
margin-inline: auto によって 水平方向の中央揃え が行われる
必要に応じて、main の代わりに .container または .wrapper クラスを使ってもよい

最終的な最小CSSの例

以上をまとめると、以下のような最小CSSセットで安定したサイトを構築できる

html {
  color-scheme: light dark;
}

body {
  font-family: system-ui;
  font-size: 1.25rem;
  line-height: 1.5;
}

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

main {
  max-width: min(70ch, 100% - 4rem);
  margin-inline: auto;
}

まとめと拡張性

上記の例は、軽量な出発点や小規模なページ にすぐ活用できる
多くの場合、この土台の上に 追加のスタイル を重ねて拡張していくのが望ましい

1件のコメント

GN⁺ 2025-10-07

Hacker Newsの意見

古い記事だが、一部の地域では今でも有効な system ui font family を非推奨とする理由を整理した記事。 https://infinnie.github.io/blog/2017/systemui.html
- 記事の内容は興味深かったが、フォントの st リガチャがあまりに見づらく、そのサイトからフォントの助言を受けたいとは思わない
正直よく分からない。読みやすいミニマルなWebページを作りたいのは分かるが、そのために必要な方法はすでにかなり知られているのではないか。これで苦労するターゲットユーザーが誰なのか気になるし、なぜこれがHNで人気なのかも疑問だ
- 自分だ。自分は主にバックエンド開発者で、サイドプロジェクトでたまにフロントエンドも作るが、CSSはほとんど分からない。自分にとってこういう方法は「よく知られている」ものではない。CSSを知らないので毎回苦労する
- max-width ひとつで苦労する人たち？個人ホームページを作るすべての人が対象だ

font-family: System UI;

これは誤り。正しい構文は

font-family: system-ui;

記事の筆者は一部の例では正しく書いているが、最初の例では間違っていて混乱を招きうる

フォント名が2語なら二重引用符で囲む必要があるのか気になる。たとえば

font-family: Times New Roman;

のように。times も Times New Roman も引用符なしで問題なく動くのを見ると、古いフォントだから特別扱いされているのか、それともCSSの名前マッチングがかなり寛容なのかが気になる

https://meyerweb.com/eric/tools/css/reset/
これ、ただのキャッシュ・マネーと呼びたくなる
- Eric MeyerはCSS界のレジェンドだ。2002年にボックスモデルを理解できなかったとき、彼の説明のおかげで理解できた https://meyerweb.com/eric/books/
- これはよく見かけるが、なぜか自分の目にはあまり合わない妙な感じがする。十分シンプルでもないし、現代的／ミニマルでもない。文字自体もあまり読みやすくない気がする。単に好みの問題かもしれない
- CSS resetスタイルシートは、スタイル汚染の出発点だ。Kevin Powell式のアプローチ（ブラウザのデフォルトスタイルを尊重する）のほうがよい。クロスブラウザテストは必要だが、ほぼ20年間CSS resetが当然のようについて回り、その上にフレームワークまで重ねて複雑さだけが増した。今では最新のCSS Gridや変数などで、従来のやり方から離れてもっと創造的に取り組める。昔はいろいろなハックに悩まされてCSSが嫌いだったが、今はぴったり合うレゴを組み立てる感覚だ。CSS resetは、今では必須というより恐れを捨てるための補助ツールだ。CSSプリプロセッサももうあまり必要ない
シンプルな学術向けミニマルWebサイト向けのSSG（static site generator）のおすすめを尋ねる話。AstroかHugoが候補だが、Astroは複雑すぎると感じ、手で html/css を書くのもレイアウトやカスタマイズが面倒だという。Astroのテーマは個人ブログ向けが少なく、ほとんどが企業向けか派手なものばかり。こうした悩みを通じて、Webサイト設計がなぜここまで難しくなったのか改めて驚かされる。フレームワーク、コンポーネント、数多くの依存関係の中で、Web開発者はどうやってこの流れについていっているのか気になる
- Eleventy(https://11ty.dev/) または Zola(https://getzola.org/) を勧める。どちらも比較的新しいツールで、腕のいい利用者が多い
- Webシステムの自然な複雑さだ。単純さは維持できない。それでも、ライセンスなしで使えるオープンスタンダードやフレームワークには感謝している。選択肢が多すぎて選択困難になる
- こうした議論そのものが、現代のWebの状況の恥ずかしさを覆い隠している。Facebookのような大規模Webサービス以外には価値のあるものがほとんどなく、恥ずかしい
- 選択肢はこれ以上いらないかもしれないが、franklin.jl は数式、コードのインライン処理、そして簡潔さの面でちょうどよかった
このWebサイト自体、記事で提案しているよりずっと多くのCSSを使っている。ざっと300行以上ある。それでもベースラインを整えるには悪くない
- モバイルでその事実を確認してくれてありがとう。この事実でその媒体への信頼は下がる。後で自分でも確認するつもりだ。それでも紹介された手法がうまく適用されていることを願う
「可読性のためにコンテンツ幅を制限しよう」という提案を見て、これはやめてほしいと思う。ユーザビリティ研究が何と言おうと、自分は広い幅のほうが好きだ。ブラウザのサイズ調整だけでもコンテンツ幅はコントロールできる
- ブラウザサイズを変えるとウィンドウ全体が狭くなるので、むしろ不便さが増す。たとえば、左端に寄った80カラムのテキストを中央に移したい場合、ブラウザサイズを延々と変えなければならず非常に面倒だ。不便すぎて、ときどき自分でサイトのスタイルシートを上書きすることもある。いっそプレーンテキストを見るほうがましだと思うことさえある。あるいはreader modeに切り替えて読む
- テック系であれそうでなくても、知人のほぼ全員がいつも大量のタブを開いている。どのタブもテキスト1行だけで済んでいる可能性は0%だ。毎回ウィンドウサイズを調整するくらいなら、ドットマトリクスプリンタで印刷して読むほうがまだましな気さえする。少し大げさに言っているが
- 散文コンテンツは、幅が制限されているほうが好ましい。広い画面で端から端まで視線を動かして読むのはつらい
- このコメントがいちばん票を集めているのを見ると、HNでの助言をあまり深刻に受け止める必要はないことが分かる
- コンテンツ幅の制限自体は構わない。ただし、content-width、大きなフォント、行間の乱用には不満がある。最近の多くのサイトはフォントが大きすぎ、行間も広すぎて、スクロール量が増えすぎている。ブラウザのデフォルトフォントサイズはシステムにちょうど合っているのだから、フォントサイズはそのままにして、ズームに任せるのがよい
記事を読まなくても答えは明白だ。その答えは「0」だ
- デフォルトスタイルは、とくに画像対応がモバイルでかなり不便だ。記事の言うように「かなり見栄えがよい」ものを求めるなら、デフォルトのままではそこまで簡単ではないと思う
- ブラウザのデフォルトはセリフ体だ
CSS resetでは依然としてある程度の基準合わせが必要だ。ここ5年以内のブラウザだけを対象にするなら、簡潔に整えられた人気のresetを使えば十分だ
- 重要なのはスタイルの統一ではなく、読みやすいベースラインだ。プラットフォームやブラウザごとに見え方が違っても、読みやすければよい。美的な完璧さではなく、基本的な使いやすさに焦点を当てるほうが実用的だ
- resetは過大評価されている。個人ブログのようにミニマルなものなら、プラットフォームごとにスタイルが多少違っても大きな問題ではない。デザイナー的本能が、それを強迫的に揃えたがる心理から来ているのだ

img { max-width: 100%; }
この設定は必ず height: auto と一緒に使うべきだ。さもないと画像の比率が崩れる
img, svg, video { max-width: 100%; }
Chrome 141では、ネストされたSVG要素の width/height の問題で auto 計算が狂う。一時的には
svg:where(:not(svg svg)) で対処すべきだ
system-ui フォントは単純な sans-serif の代替ではない。システムUIフォントを本文コンテンツに使うと、一部のOS/言語の組み合わせではほとんど読めないほど不快になることがある。sans-serif が必要なら sans-serif を使うのが正しい
デフォルトのフォントサイズは少し小さめなので、18〜20px（1.25rem）程度が適切だ。ただし小さい画面では 1rem を超えないほうがよい
デフォルトの line-height は 1.5〜1.7 を勧めるが、1.7 は小さい画面では広すぎる。1.4〜1.5 が適切で、画面サイズに応じて 1.4〜1.6 まで調整できる
font-family: System UI;
これは明らかな文法エラーだ。スタイルシートを確認すればすぐ分かる
ダーク／ライトのシステムテーマとWebテーマを分けるのは良い考えだ。Firefoxはコンテンツがシステムテーマに従うよう標準設定されており、個別に調整もできる
main { max-width: min(70ch, 100% - 4rem); margin-inline: auto; }
これは最小でも2rem程度の余白を意味する（bodyのデフォルトマージンまで含めると 2rem+8px）。余白が多すぎ、適用箇所も不自然だ。main に適用するなら

main {
  max-width: 70ch;
  padding-inline: 2rem;
  margin-inline: auto;
}

のようにパディングを使うほうが理にかなっている。ただ実際には、header や footer にも同じ左右余白が必要なので、body のマージンを調整するほうがよい

body {
  margin: 1rem;
}

main {
  max-width: 70ch;
  margin-inline: auto;
}

余白を約40pxから16px程度まで減らせる

現実的には、レイアウト調整や細かなチューニングの大半はメディアクエリで解決できる。この場合、結局は普通にきちんと書かれたCSSと比べてもコード量はそれほど増えない

最小限のCSSでそこそこ良いサイトを作る（2023）