Result
極限まで少ないコードでどのデバイスでもある程度見栄えが良くなるように、みたいな記事が話題だったので備忘録。
上記は強化版でもともとは以下の58バイトのコードが挙げられていました。
main {
/*多くのブラウザのデフォルトのフォントサイズは16pxなので、38remは608pxになる。最低でも600pxのディスプレイをサポートすることは妥当*/
max-width: 38rem;
/*ディスプレイの幅が38rem以下になると、このパディングによって256pxあたりまで見栄えがよくなる。*/
padding: 2rem;
/*セマンティックHTML5では、mainはブロック要素であるため、ページの中央揃えに必要なのはこれだけ。*/
margin: auto;
}
解説はざっくり翻訳したものです。
個人的には強化版として補足されていた100バイトのコードが気になったので表題としました。
css
html {
/*「読みやすい範囲」は通常60〜80字幅 ※日本語圏だと事情が異なる*/
max-width: 70ch;
/*ディスプレイの幅が設定したmax-widthを下回る場合、このpaddingによってモバイルでのテキストの端の非表示化を防ぐ。3emを使用して、上下の空白を確保。*/
padding: 3em 1em;
/*ページの中央揃えに必要*/
margin: auto;
/*視覚的な明瞭さを高めるために、行間の間隔を空ける。行の高さは常に単位なしのままとする。*/
line-height: 1.75;
/*ユーザーに拡大縮小させたい場合は、pxよりもemやremを優先*/
font-size: 1.25em;
}
また、オプションで以下のコードも紹介されています。
h1,h2,h3,h4,h5,h6 {
margin: 3em 0 1em;
}
p,ul,ol {
margin-bottom: 2em;
color: #1d1d1d;
font-family: sans-serif;
}
雑感
テキスト主体ならある程度見やすく表示できるかなと感じました。ただ、先ほどの58バイトのコードもですが、これは完璧なコードではありません。
参照先のGistやHNでもより良いコードはこうだ、200バイトでいいなら更に確実なコードがある等々、白熱した議論が展開されているので、上記のコードはおかしいと思われた方や興味を持たれた方は参照されてみては如何でしょうか。
