ハクソク

世界を動かす技術を、日本語で。

見栄えの良いサイトに必要な最小限のCSS（2023年）

2025年10月7日原文(thecascade.dev)

概要

  • HTMLのみ でレスポンシブなWebサイト構築が可能
  • 画像や動画 のはみ出し対策のCSS設定
  • タイポグラフィ の改善による可読性向上
  • ダークモード のサポート方法
  • コンテンツ幅の制御 による読みやすさの確保

HTMLとCSSだけで始めるレスポンシブWebサイト

  • HTMLのみ でもレスポンシブWebサイトのベース構築が可能
  • 画像 は横幅制限がないと、画面からはみ出す問題
  • 対策として、以下の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; }
  • 行間は 1.5～1.7 程度が読みやすさの目安

ダークモードのサポート

  • ユーザーの システム設定 に合わせて自動でテーマ切り替えが可能
  • color-scheme プロパティを利用
    • html { color-scheme: light dark; }
  • HTMLタグに直接属性追加も可能
    • <html lang="en" color-scheme="light dark"></html>
  • ユーザーによる手動切り替え機能の実装も推奨

コンテンツ幅の制御

  • テキストの行長は 45～90文字 程度が最適
  • main 要素や .container クラスを用いて幅を制限
    • main { max-width: min(70ch, 100% - 4rem); margin-inline: auto; }
  • min()関数 で画面幅に応じて柔軟に調整
  • margin-inline: auto で中央寄せ

最終的な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; }

まとめと今後の発展

  • ここまでの設定で シンプルかつ見やすいWebサイト の基礎が完成
  • より複雑なデザインや機能は、このベースの上に追加実装可能
  • 拡張性 の高いスタートポイントとして活用推奨

Hackerたちの意見

リセット関連のものがまだまだ必要だな。とりあえず、基本的な一貫性を持たせるためにね。もし現代の（5年以内の）ものだけをターゲットにするなら、その人気のリセットは削減できるかも。

└

リセットって過大評価されてるよね。OPがやってるような個人ブログのミニマルなセットアップなら、プラットフォーム間でそんなに一貫性が必要ないと思う。リセットして一貫性を求めるのは、デザイナーの頭が「場所によって少し違って見えるのも全然オッケー」ってことを受け入れられないだけじゃないかな。

└

一貫性じゃなくて、基本的な読みやすさの問題だよね。いろんなプラットフォームやブラウザで違いは出るけど、ちゃんと読めるのが大事。見た目が完璧じゃなくても、1994年のデフォルトよりは使いやすいと思う。

「ユーザーが手動でカラースキームを切り替えられるようにするのがベストプラクティスです。」 「ダークなシステムテーマを好む人もいれば、ライトなウェブサイトテーマを好む人もいます。これは一般的ですか？どうしてそういう人たちはブラウザをライトテーマに設定しないんでしょう？それとも、異なるウェブサイトで異なるテーマを使いたいなら、ブラウザのプラグインを使えばいいのに。」 「もっと一般的な問題は、すべてのウェブサイトが多くのことを再実装しなければならないことです。小さな問題ですが、新しいユーザーを遠ざける要因になっていて、各ウェブサイトの冗長性が積み重なります。理想的には、CSSがなくてもサイトはちゃんと見えるべきですが、レガシーサイトをサポートするために（これは良いことですが）デフォルトスタイルがレガシーのものになってしまっている（これは悪いこと）。当時なら「バグ」と見なされていたものを保持しているんですよね（犯罪が合法化されるように、発見が遅れたことで「機能」として扱われるようになった）。例えば、大きな画像が横にオーバーフローする問題とか。正直、デフォルトのフォントをTimes New Romanの16pxにする理由って何かあるの？」

└

そういうブラウザ拡張は、ウェブサイトの内容に完全にアクセスする必要があるから、使わない人もいるんだよね。

└

ブラウザは、サイトごとにダークモードのCSS設定を切り替えられるように設定されるべきだったと思う。サイトごとのズーム設定を許可しているのと同じようにね。ブラウザ全体をライトテーマに設定するのは間違った解決策だよ。一部のウェブサイトはダークモードの方が見栄えが良くて、他はライトモードの方がいいから。さらに、ブラウザの設定はウェブサイトの内容だけでなく、ブラウザ自体のUIにも影響するんだ。もちろん、これらは解決可能な問題だけど、一番簡単で明白な対処法は、ズーム設定と同じ場所にサイトごとのフラグを追加することだと思う。

└

デフォルトスタイルは悪くないと思う。言われているほどひどくはないよ。ただ、追加したいのは（画像があるウェブページに対して）「img { max-width: 100%; }」かな。この記事でも触れられているし、動画やSVGにも意味があると思う。だけど、もしこれが気に入らないなら、ユーザーがカスタマイズできるようにすべきだよね。もしこれが異なるスタイルを使っているウェブページに問題を引き起こすなら、ユーザーのCSSを優先するための属性を追加できるといいな（場合によっては、ウェブページがこの属性を指定していないときにブラウザが自動的に判断できるかもしれない）。ユーザーは、必要に応じてウェブページのCSSを完全に無効にすることもできるけど、特定のウェブページやウェブアプリ内のスタイリングクラスやその他の複雑なものにウェブページのCSSが必要ないことを指定できるようになるんだ。（ユーザーが自分のCSSを定義しなければ、ウェブページで定義されているものを使うことになるし、ウェブページにCSSがなければデフォルトを使うことになる。デフォルトは、CSSがないウェブページに対してライト/ダークスキームを適切にサポートするように変更されるべきだけどね。）そして、私が言った仮定の属性は無視されることになる。

└

昼は明るくて、夜は暗い方が好きだな。そんな感じでOSを自動で切り替えるスケジューラーを使ってるし、他のアプリもそれに合わせて設定してる（例えば、自動設定のアプリやダークリーダーのブラウザとか）。特にモバイルでは、昼間は暗いと反射が強くて、夜は明るいと眩しいから、これが大事なんだよね。

https://meyerweb.com/eric/tools/css/reset/ 現金！

└

これ、何回か見たことあるけど、なんか目に合わないんだよね。古さを感じさせないシンプルさや機能性が足りないし、逆に新しさもないから、ちょっと微妙な感じ。フォントのせいかもしれないけど、あんまり読みやすくないな。もしかしたら、俺だけかもしれないけど。

58バイトのCSSでほぼどこでも素晴らしい見た目に！ https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad...

└

100バイト: https://www.swyx.io/css-100-bytes （こういうデザインのアドバイスをたくさん集めてるんだ。もっと見たい人は: https://github.com/swyxio/spark-joy/）

Hacker Newsで議論の続きを見る