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

Post on:2024年7月25日

はじめに

この記事で紹介するCSSのほとんどは、1行のCSSです。場合によっては、セレクタがすこし複雑なものもあります。また、より良いエクスペリエンスを提供するために、CSSを追加して1行以上になったものもあることをあらかじめお詫びしておきます。

これらのCSSは、すべてのWebサイトに当てはまるものではないと思います。すべての人がテーブルやフォームを使用するわけではありません。

それぞれのCSSについて簡単に説明し、どのようになるのか画像を使用して機能を説明しています。そして、なぜそれを使用するかの理由も説明しています。画像は他の例に基づいて構築されたものもあることにご注意ください。

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

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

body {

max-width: clamp(320px, 90%, 1000px);

margin: auto; /* より良いエクスペリエンスのための追加分 */

}

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

このCSSを追加することで、コンテンツは自動的に見栄えが良くなります。テキストの巨大なブロックで占めるのではなく、より構造化されて整理されたように見えるでしょう。また、margin: auto;を追加することで、コンテンツは中央に配置されます。たった2行のCSSで、コンテンツの見栄えが大幅に向上します。

左:CSSの適用前、右:CSSの適用後

整列されたテキストは、巨大なテキストのブロックよりも見栄えが良くなります。

margin: auto;の使い方について詳しくは、下記をご覧ください。

CSSのmargin: auto;の仕組みをおさらい、最近の実装で使用される中央配置やナビゲーションのテクニック

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

body {
  font-size: 1.25rem;
}

body {

font-size: 1.25rem;

}

現実を直視しましょう。ブラウザのデフォルトのフォントサイズである16pxは、小さいです。これは私が年をとったことによる個人的な意見かもしれませんが、、、

この問題の簡単な解決方法は、テキストのサイズを大きくすることです。ブラウザが使用するカスケードとrem単位のおかげで、Webページ上のすべてのテキストが大きくなります。

左:CSSの適用前、右:CSSの適用後

テキストのサイズを大きくすると読みやすくなります。

remなどの相対単位について詳しくは、下記をご覧ください。

フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説

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

body {
  line-height: 1.5;
}

body {

line-height: 1.5;

}

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

左:CSSの適用前、右:CSSの適用後

行間のスペースは、テキストのブロックとスペースの川を壊します。

このCSSは（上記の2つとともに）ページの縦のサイズを長くしますが、ユーザーにとってテキストがより読みやすくなり、より親しみやすいものになることを保証します。

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

img {
  max-width: 100%;
}

img {

max-width: 100%;

}

画像は占めるスペースとほぼ同じサイズにする必要がありますが、場合によっては画像が長くなってしまい、コンテンツがずれて水平スクロールが発生してしまうことがあります。

これを避ける方法の一つは、画像の最大幅を100%に設定することです。これは完全な解決方法ではありません（マージンやパディングが幅に影響する可能性があります）が、ほとんどの場合にうまく機能します。

左:CSSの適用前、右:CSSの適用後

水平スクロールを防ぎ、画像とテキストのフローを良くします。

テキストのコンテンツ幅はそのままで、画像を幅いっぱいにしたい場合は、下記をご覧ください。

シンプルなCSSで実装できる！記事は中央に固定幅、画像は幅いっぱいに、フルブリードレイアウトを実装するテクニック

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

p {
  max-width: 65ch;
}

p {

max-width: 65ch;

}

テキストのブロックやスペースの川を避けるもう一つの方法は、このCSSを本文の最大幅と組み合わせて適用することです。段落の幅が他の要素よりも狭くなるので、不必要に見えるかもしれませんが、私はこのコントラストと短い行が気に入っています。

以前は60chの値が効果的でしたが、別の値を使用して、ニーズに合わせて最大幅を調整することができます。Webページでどのように見えるか試してからご使用ください。

左:CSSの適用前、右:CSSの適用後

読みやすくするために、大きなテキストを小さなブロックに分割します。

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

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

h1, h2, h3, h4, h5, h6 {

text-wrap: balance;

}

見出しはWeb構造の重要な要素ですが、サイズが大きくコンテンツが短いため、見た目が奇妙になることがあります。特に見出しが2行以上になる場合はなおさらです。解決方法としてはtext-wrapで見出しのバランスをよくすることです。

balance値はtext-wrapプロパティの一般的な値のようですが、唯一の値ではありません。pretty値で余分な語句を最後の行に移動されたりもできます。しかし、prettyはまだ広くサポートされていません。

左:CSSの適用前、右:CSSの適用後

バランスのとれた見出しは視認性と読みやすさを向上させます。

text-wrap: balance;について詳しくは、下記をご覧ください。

テキストの行のバランスを自動調整する「text-wrap: balance;」の基礎知識と使い方

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

body {
  accent-color: #080; /* 好きなカラーに変更してください */
}

body {

accent-color: #080; /* 好きなカラーに変更してください */

}

この小さなCSSも見た目をよくするCSSです。これまではフォームコントロールをCSSで設定することはできず、ブラウザの表示に頼らざるを得ませんでしたが、accent-colorで状況は変わりました。

コンポーネント全体を開発するのは面倒ですが、この1行のCSSを使用すると、サイトの他の部分やデザインシステムに近いカラーを設定することが可能で、簡単です。

左:CSSの適用前、右:CSSの適用後

ページ全体に統一感を与えるのは、小さなディテール（とカラー）です。

accent-colorについて詳しくは、下記をご覧ください。

CSSの新しいプロパティ「accent-color」が便利！今までできなかったフォーム要素のカラーを簡単に変更できる

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

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

:is(tbody, table) > tr:nth-child(odd) {

background: #0001; /* ダークテーマなら#fff1がお勧め */

}

tableはレイアウトのためではなく、データを表示するために使用する必要があります。しかし、デフォルトのテーブルは酷い見栄えで、データを見苦しくするかもしれません。データを整理して読みやすくするのに役立つのが、暗い行と明るい行を交互に並べたゼブラテーブルです。

この1行のCSSで、ゼブラテーブルは簡単に実現できます。セレクタにtbodyやtableを考慮することなく、trだけに簡略化することもできますが、そうするとテーブルのヘッダにも適用されることになるので注意が必要です。

左:CSSの適用前、右:CSSの適用後

ゼブラにすると、データを行ごとに追跡するのが簡単になります。

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

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

td, th {

padding: 0.5em; /* または0.5em 1em、または0以外の任意の値 */

}

テーブルをよりアクセシブルで読みやすくするための最後の変更点は、テーブルのセルとヘッダにパディングを追加して、コンテンツのスペースをすこし空けることです。デフォルトではほとんどのブラウザでパディングがないため、テキストが接触してどこからが始まりでどこからが終わりなのか判別できないことがあります。

paddingの値を変更することで、好みのサイズに調整することができます。ただし、不必要なスクロールや空白スペースが多くなるのを避けるため、やりすぎには気をつけてください。

左:CSSの適用前、右:CSSの適用後

水平方向と垂直方向のデータの追跡が簡単になります。

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

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

@media (prefers-reduced-motion) {

*, *::before, *::after {

animation-duration: 0s !important;

transition: none !important; /* より良いエクスペリエンスのための追加分 */

scroll-behavior: auto !important; /* より良いエクスペリエンスのための追加分 */

}

このCSSは1行ではありませんが、1行版（継続時間を0秒に設定することでアニメーションを削除）もありますが、Webページ上の他の要素を動かします。

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