PICO CSS / 読書室

落ち着いて読める環境

ローカルの読書プロフィールを調整します。ほとんどの処理はセマンティックな HTML に任せています。

読書設定

2文字以上で入力してください。このプレビューを開いている間だけ保存されます。
プロフィールはまだ適用されていません。

短いサンプル

集中できる余白をつくる。

余白は、ただ残った空間ではありません。段落の始まりを明確にし、目が無理なく次の行へ戻れるようにします。

読書インターフェースは、空虚にならずに落ち着いた印象にできます。内容を主役に保つのは、わかりやすい見出し、適切なコントラスト、予測しやすいリズムです。

このプレビューでは何が変わりますか?

幅を変えると行の最大文字数が変わり、文字サイズはこのサンプルだけに適用されます。外観の切り替えでは Pico のテーマが変わります。いずれもローカルの設定であり、ブラウザーのアクセシビリティ設定ではありません。

公式の Pico CSS 2.1.1。ネイティブのフォーム、details、dialog 要素を使用し、元のアプリケーション動作を維持しています。

読書プロフィールを確認