Webページの見栄えをよくするたった58バイトのCSS

ほとんどのWebページの見栄えをよくするたった58バイトのCSSを紹介します。
3つのプロパティだけですが、Webページを実装する時の最初のスタイルとして用意しておくとよいかもしれません。

また、ボーナスの100バイト版とオプションのさらに100バイト版も合わせて紹介します。

58 bytes of CSS to look great nearly everywhere
by @JoeyBurzynski

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• Webページの見栄えをよくする58バイトのCSS
• 58バイトのCSSの解説
• Webページの見栄えをよくする100バイトのCSS
• 100バイトのCSSの解説
• オプションでさらに100バイト

Webページの見栄えをよくする58バイトのCSS

58 bytes of CSS -CodePen

Webページを作るとき、ほとんどのディスプレイできれいに見えるようにするために、シンプルで合理的な方法を考えました。ミニファイはなし、以下の58バイトのCSSでうまくいきました。
※CodePenではhtmlですが、GitHubの最新版ではmainになっています。

実際の動作は、下記でご覧ください。

See the Pen
58 bytes of CSS to look great nearly everywhere by Joey Burzynski (@JoeyBurzynski)
on CodePen.

58バイトのCSSの解説

58バイトのCSSを解説します。

max-width: 38rem;

多くのブラウザのデフォルのフォントサイズは16pxなので、38remは608pxになります。600pxのディスプレイをサポートすることは、合理的だと思います。

padding: 2rem;

ディスプレイの幅が38remを下回る場合、このpaddingによって256pxあたりまで見栄えがよくなります。オプションに思えるかもしれませんが、実際には一石二鳥の効果があります。paddingはショートハンドなので、左右だけでなく上下の余白も提供します。

margin: auto;

HTML Living Standardでは、mainはブロック要素であるため、Webページの中央に配置するために必要なのはautoだけです。

重要な洞察

ここに到達するまでに、驚くほど多くの工程が必要でした。おそらく、私が「モダン」Web開発について何も知らないという事実を物語っているか、あるいは複雑化した世界でシンプルに保つことがいかに難しいかを物語っています。

アップデート 1

いくつかの議論を経て、スマホとデスクトップのディスプレイでよりよい妥協ができるように、paddingを1.5remに変更します。

アップデート 2

ch単位について指摘を受け、非常に気に入ったので、70ch/2chに変更します。paddingがすこし小さくなることを除けば、2バイト少なくなり、見た目はほぼ同じです（スマホにとっては良いことです）。

また、コメントには、これらを1行にまとめたバージョンもありました。

max()関数について詳しくは下記をご覧ください。

• CSSの比較関数が便利すぎる！min(), max(), clamp()の使い方を詳しく解説
• CSSの数学関数min()、max()、clamp()の基本的な使い方

Webページの見栄えをよくする100バイトのCSS

100 Bytes of CSS to Look Great Everywhere (enhanced version) -CodePen

ほとんどのディスプレイで見栄えを良くするため100バイトのCSS（拡張版）です。

100バイトのCSSの解説

100バイトのCSSを解説します。

max-width: 70ch;

読みやすい文章の幅は、通常60-80文字幅（訳者注: 半角英数文字なので、日本語にすると30-40文字幅）で、CSSでは文字幅に基づくchという単位を使用できます。70chは、70文字幅になります。

padding: 3em 1em;

ディスプレイの幅が上記で設定したmax-widthを下回る場合、このpaddingによってスマホでテキストを両端いっぱいになるのを防ぐことができます。そして、3emを使用して、上下の余白を確保します。

margin: auto;

ページを中央に配置するために必要なのはこれだけです。

セマンティックなタグがないため、htmlに設定しています。これはほとんどのサイトに存在する可能性が高いからです。一番上位のタグが何もないのに対して中央にというのは直感的ではありませんが、これがブラウザの仕様なのです。

line-height: 1.75;

視覚的な明瞭さを増すために、行間を空けます。理由があるため、値は常に単位なしのままにします。

font-size: 1.25em;

最近のデザイントレンドやスクリーンサイズは、文字サイズが大きくなる傾向にあります。それとも私が年をとったせいでしょうか。ユーザーに拡大縮小できるように、pxよりもemやremを使用してください。

htmlの代わりに:rootを使用すれば、セレクタが存在することを保証できますが、私にはちょっと派手すぎるし、バイト数が多くなってしまいます。

オプションでさらに100バイト

見出し、パラグラフやリストの見栄えをよくするオプションです。