ハクソク

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

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

231日前原文(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/）

「ウェブサイトをもっと読みやすくするために、コンテンツの幅を制限します。」 やめてほしいな。ユーザビリティの研究がどう言おうと、数秒ごとにスクロールして動くテキストを目で追うより、広いコンテンツの方が好きなんだ。ユーザーである私が、ブラウザのサイズを変えることでコンテンツの幅を調整できるから、ありがとう。

└

複数列でテキストを表示するのもアリだよ。段落の幅の「使いやすさ」を解決できるし、画面のスペースをフルに使えるのに、なんで使われないのか不思議。今の巨大な白いサイドバーのトレンドもあんまり好きじゃないな。

└

失礼だけど、「Xをやらないでください」って言うのは、Xが大多数のユーザーに好まれていて、広く科学的な根拠がある場合、ちょっと…傲慢に聞こえるかな？

└

実は、文章コンテンツには限られた幅の方が好きなんだ。広い画面でフル幅のコンテンツだと、毎行ごとに目を端から端まで動かさなきゃいけないからね。

└

テキストが多いウェブサイトがコンテンツの幅を制限していない場合、ブラウザをどのくらいのサイズにすることが多い？テキストサイズによるの？それとも他の要因？

└

いや、絶対に無理。毎日何百ページ、いや何千ページも見てるけど、そんなサイトは閉じるか、すごく幅が広いときはカスタムCSSを書いたりするよ。

└

「俺、ユーザーはブラウザのサイズを変えることでコンテンツの幅を調整できるから、ありがとうね。」ほとんどのテクニカルな人もそうじゃない人も、常にたくさんのタブを開いてるよ。上位10個が全部シングルカラムのテキストになる可能性は0%だし、未最大化のウィンドウの端をつついてサイズを変えるくらいなら、ドットマトリックスプリンターから出たばかりのウェブページを読む方がマシだね。注：効果を狙ってちょっと誇張してるかも。

必須の言及として、https://motherfuckingwebsite.com/ と http://bettermotherfuckingwebsite.com/ を挙げておくね。

└

うん、これが俺のスタンダード。

└

...iMacやクソみたいなたまごっちで...（笑）。幅を設定するという話の中で面白い比較だね。@kmoserに賛成。元の方が実際に見た目が良いと思うし、自分で管理できるのが好きだな。

最小限はゼロでもいいよ。

それで、その後どうなったの？何年も音沙汰なしだね。

ちなみに、このウェブサイト自体は、記事で提案しているよりもずっと多くのCSSを使ってるよ。全部で300行以上はあると思う。でも、良いベースラインではあるね。

└

モバイルで友達のために調査してくれてありがとう。この事実は、このメディアのメッセージをかなり薄めちゃうよね。後で自分でも確認するけど、それまでの間は、説明されているテクニックが活用されていることを願ってる。