2022年09月27日(火)
どのデバイスでもある程度はレイアウトが綺麗に見える100バイトのCSS
Result
See the Pen
Untitled by kachibito (@kachibito)
on CodePen.
極限まで少ないコードでどのデバイスでもある程度見栄えが良くなるように、みたいな記事が話題だったので備忘録。
上記は強化版でもともとは以下の58バイトのコードが挙げられていました。
main { /*多くのブラウザのデフォルトのフォントサイズは16pxなので、38remは608pxになる。最低でも600pxのディスプレイをサポートすることは妥当*/ max-width: 38rem; /*ディスプレイの幅が38rem以下になると、このパディングによって256pxあたりまで見栄えがよくなる。*/ padding: 2rem; /*セマンティックHTML5では、mainはブロック要素であるため、ページの中央揃えに必要なのはこれだけ。*/ margin: auto; }解説はざっくり翻訳したものです。
個人的には強化版として補足されていた100バイトのコードが気になったので表題としました。
css
html { /*「読みやすい範囲」は通常60〜80字幅 ※日本...
0
0
0
6author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
‹ PREV
これは便利すぎる！ Webサイトやスマホアプリのターゲットブラウザを決める時に役立つツール -Browserslist
NEXT ›
サイテーションとは？SEO効果と被リンクとの違いを解説
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『どのデバイスでもある程度はレイアウトが綺麗に見える100バイトのCSS』についてまとめています。
この記事は特にフォント・HTML5・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
