--- title: ビルドなしのモバイルファースト description: pico.css と小さな site.css だけで、ビルドなしにスマートフォンでも読みやすくする方法。 --- 見た目のほとんどは pico.css v2 に任せている。 CDN から読み込むだけなので、CSS のビルドは要らない。 pico は狭い画面を前提に作られていて、広い画面でだけ余白や幅を足していく。 ## pico.css に任せていること - `` と `color-scheme: dark` で、ダークテーマに固定する。 - viewport の meta タグで、端末の幅に合わせて表示する。 - `header` / `main` / `footer` を素直に並べれば、pico がコンテナの幅と余白を決める。 - 投稿一覧の各投稿は `
` で、pico がカードとして表示する。 - 本文の文字サイズ、リンクやボタンの色は pico の既定のまま。 ## site.css で足していること pico で表現できないものと、日本語向けの文字組みの調整だけを、埋め込みの `site.css` に書いている。 値は pico の CSS 変数から取るので、テーマを変えてもそのまま追従する。 - サイトのナビゲーションを `position: sticky` で画面上部に固定する。下をスクロールする本文が透けないよう、背景色を付けている。 - `header` と `main` の上下の余白を半分にする。pico はどちらにも同じ余白を付けるので、そのままだと間が空きすぎる。 - ナビゲーション項目の上下の余白を詰める。 日本語向けの調整は次のとおり。pico の既定は英文向けなので、スマートフォンだと日本語は詰まって見える。 `` にしておくと、漢字が日本語の字形になり、文節で折り返す指定も効く。 - 本文の行間を 1.6 に広げる。`--pico-line-height` を変えるとフォーム部品の高さまで変わるので、`article` に直接指定する。 - 見出しを一回り小さくし、`word-break: auto-phrase` と `text-wrap: balance` で文節単位に、行の長さを揃えて折り返す。最後の行に 1 文字だけ残ることがなくなる。 - 見出しの上に余白を戻す。pico は見出しの直前に段落などの兄弟要素があるときだけ余白を付けるが、ここでは見出しが `section` の先頭にあるので付かない。 - リストのインデントを、ブラウザ既定の 40px から 1.25rem に詰める。項目の行間は 1.4 と本文より狭くして、項目同士が離れすぎず一つのリストとしてまとまって見えるようにする。 - 一覧のカードでは、タイトルを小さくして下線を消す。色でリンクと分かるし、下線は漢字の画数と重なって読みにくい。`hgroup` の下の余白も消して、カードの上下の余白を揃える。 `site.css` は `/site.css?v=<ハッシュ>` で配信している。 内容が変わるとハッシュも変わるので、長期間キャッシュさせても問題ない。