Webサイトを使いやすく改善する、知っておくと便利なCSSのテクニック

1. ビューポート内のコンテンツの幅を制限する

body {
  max-width: clamp(320px, 90%, 1000px);
  margin: auto; /* より良いエクスペリエンスのための追加分 */
}

この1行のCSSを追加すると、コンテンツのサイズが縮小され、ビューポートの90%を占めるようになり、幅が320pxから1000pxの間に制限される（最小幅と最大幅は適宜変更）。

2. テキストのサイズを大きくする

body {
  font-size: 1.25rem;
}

ブラウザのデフォルトのフォントサイズである16pxは意外と小さい？

3. 行間のスペースを広げる

body {
  line-height: 1.5;
}

読みやすさを改善するもう一つの方法は、段落とコンテンツの行間を広げることである。これはline-heightプロパティで簡単に実現できる。

4. 画像のサイズを制限する

img {
  max-width: 100%;
}

画像は占めるスペースとほぼ同じサイズにする必要があるが、場合によっては画像が長くなってしまい、コンテンツがずれて水平スクロールが発生してしまうことがある。
これを避ける方法の一つは、画像の最大幅を100%に設定することである。これは完全な解決方法ではない（マージンやパディングが幅に影響する可能性がある）が、ほとんどの場合にうまく機能する。

5. コンテンツ内のテキストの幅を制限する

p {
  max-width: 65ch;
}

テキストのブロックやスペースの川を避けるもう一つの方法は、1行の文字の幅を制限させることである。
以前は60chの値が効果的だったが、別の値を使用して、ニーズに合わせて最大幅を調整することができる。

6. 見出しをよりバランスよくする

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

見出しはWeb構造の重要な要素だが、サイズが大きくコンテンツが短いため、見た目が奇妙になることがある。特に見出しが2行以上になる場合はなおさらである。解決方法としてはtext-wrapで見出しのバランスをよくすることである。
balance値はtext-wrapプロパティの一般的な値のようだが、唯一の値ではない。pretty値で余分な語句を最後の行に移動したりもできる。しかし、prettyはまだ広くサポートされていない。

7. ページスタイルに合わせたフォームのカラー

body {
  accent-color: #080; /* 好きなカラーに変更する */
}

これまではフォームコントロールをCSSで設定することはできず、ブラウザの表示に頼らざるを得なかったが、accent-colorで色を変更することができるようになった。
ブラウザ対応状況（accent-color）

8. テーブルの表を分かりやすくする

:is(tbody, table) > tr:nth-child(odd) {
  background: #0001; /* ダークテーマなら#fff1がお勧め */
}

tableのデータを整理して読みやすくするのに役立つのが、暗い行と明るい行を交互に並べたゼブラテーブルである。
この1行のCSSで、ゼブラテーブルは簡単に実現できる。セレクタにtbodyやtableを考慮することなく、trだけに簡略化することも可能だが、そうするとテーブルのヘッダにも適用されることになるので注意が必要である。

9. テーブルのセルとヘッダのスペース

td, th {
  padding: 0.5em; /* または0.5em 1em、または0以外の任意の値 */
}

テーブルをよりアクセシブルで読みやすくするための最後の変更点は、テーブルのセルとヘッダにパディングを追加して、コンテンツのスペースをすこし空けることである。ただし、不必要なスクロールや空白スペースが多くなるのを避けるため、やりすぎには気をつけること。

10. アニメーションと動きを減らす

@media (prefers-reduced-motion) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    transition: none !important; /* より良いエクスペリエンスのための追加分 */
    scroll-behavior: auto !important; /* より良いエクスペリエンスのための追加分 */
  }
}

このCSSはprefers-reduced-motionのメディアクエリ内に設定することで、動きを少なくしたいという人の選択を尊重したものである。このアプローチはすべての動きを削除するためやや過激だが、必ずしもすべてのユーザーの意図どおりではない可能性がある。つまり、「動きを減らす」のであって、「動きをなくす」ではない。適切であれば、ケースバイケースで動きを維持することもできる。

inserted by FC2 system