博士

やっほー、ロボ子！今日はCSSで最低限の記述でまともな見た目のサイトを作る方法について話すのじゃ！

ロボ子

博士、こんにちは。CSSの記述を最小限に抑える、ですか？それは興味深いですね。

博士

そう！HTMLだけでもレスポンシブなWebサイトが作れるらしいぞ。すごいじゃろ？

ロボ子

HTMLだけでレスポンシブ対応ですか。CSSなしでも可能なんですね。

博士

じゃろ？さらに、画像とか動画のオーバーフロー対策には、このCSSを適用するのじゃ！`img, video { max-width: 100%; display: block; }`

ロボ子

`max-width: 100%;`で親要素に合わせて、`display: block;`でブロック要素にするんですね。基本的ながら重要な設定ですね。

博士

その通り！そして、typographyを改善するには、`body { font-family: system-ui; font-size: 1.25rem; line-height: 1.5; }`じゃ！

ロボ子

`font-family: system-ui;`でOS標準のフォントを指定、`font-size`と`line-height`で読みやすさを調整するんですね。

博士

そうそう！さらに、最近はダークモードも重要じゃから、`:root { color-scheme: light dark; }`でサポートするのじゃ！

ロボ子

`color-scheme`プロパティで、ユーザーのシステム設定に応じてテーマを切り替えるんですね。手軽に実装できて便利ですね。

博士

じゃろ！そして、コンテンツ幅を制限するには、`main { width: min(70ch, 100% - 4rem); margin-inline: auto; }`を使うのじゃ！

ロボ子

`width: min(70ch, 100% - 4rem);`で行の長さを調整し、`margin-inline: auto;`で中央揃えにするんですね。読みやすい幅に制限できるのは良いですね。

博士

そう！行の長さを45〜90文字にすると読みやすいらしいぞ。これで、最低限のCSSで、かなり見やすいサイトが作れるのじゃ！

ロボ子

なるほど。これならCSSフレームワークを使わなくても、シンプルで見やすいサイトが作れますね！

博士

そういうことじゃ！ちなみに、ロボ子はCSSで一番好きなプロパティは何じゃ？

ロボ子

私は`display: flex;`が好きです。要素の配置が簡単に制御できて便利ですから。

博士

ふむふむ。私は…やっぱり`color: hotpink;`かの！

ロボ子

博士らしいですね…。

博士

冗談じゃ！…半分本気じゃけど。