CSSでフォントサイズを調整する方法

CSS フォントサイズ フォントサイズは、ウェブサイト上のテキストの表示サイズを決定します。フォントサイズを正しく設定することは、見た目だけでなく、読みやすさ、アクセシビリティ、そして最終的にはストアのコンバージョン率にも影響するため、非常に重要です。

CSS の font-size とは何ですか?

その フォントサイズ プロパティは要素のテキストコンテンツのサイズを制御します。デフォルトでは、ほとんどのブラウザはテキストを 16pxただし、これをグローバルに、または要素ごとに調整できます。

例：

p {

  font-size: 16px;

}

サイズは次のように定義できます。 絶対単位 （ピクセルのように）または 相対単位 （ em or レム) 適切なものを選択することで、テキストの応答性とアクセシビリティが変わります。

フォントサイズのCSS単位

CSSでテキストサイズを設定する方法はいくつかあります。最も一般的な方法と、それぞれの使い方を見ていきましょう。

1. px（ピクセル）

絶対単位。

• 画面サイズやユーザー設定に関係なく、常に固定されます。
• 一貫性を保つ必要があるロゴや UI 要素に最適です。

制限： ユーザーのブラウザのズームや基本フォント サイズの設定に合わせて拡大縮小されません。

h1 {

  font-size: 32px;

}

2. em（親に対する相対的）

相対単位。

• 1em は親要素のフォント サイズと同じです。
• コンポーネント内のテキストを比例的に拡大縮小するのに便利です。

注意： ネストされている場合は「複合」できます。1.2em の親の中に 1.2em が含まれる場合、基本サイズは 1.44 倍になります。

p {

  font-size: 1.2em;

}

3. rem（ルートからの相対位置）

ルートを基準に（HTML） 要素。

• 1rem = ルート要素のフォント サイズ (通常 16 ピクセル)。
• におすすめ サイト全体の一貫性.
• アクセシビリティとレスポンシブなデザインを維持しやすくなります。

h1 {

  font-size: 2.5rem; /* equals 40px if base font-size = 16px */

}

4. ％（親会社と比較）

類似行為 emは、フォント サイズを親要素のパーセンテージとして定義します。

p {

  font-size: 100%; /* equals parent’s font size */

}

5. vw / clamp() (流動的なタイポグラフィ)

現代のレスポンシブタイポグラフィでは、 ビューポートユニット または クランプ() 画面サイズに合わせてテキストを拡大縮小する機能。

h1 {

  font-size: clamp(1.5rem, 2.5vw + 1rem, 3rem);

}

これの意味は：

• 最小フォントサイズ = 1.5rem
• ビューポートの幅に基づいてスケールします（2.5vw + 1rem)
• 最大フォントサイズ = 3rem

デスクトップとモバイルでバランスよく表示される見出しに最適です。

アクセシビリティと読みやすさのベストプラクティス

優れたタイポグラフィは、デザインだけでなく、ユーザー エクスペリエンスとアクセシビリティも向上させます。

• 基本サイズ： 本文には少なくとも 16 ピクセル (1rem) を使用してください。
• スケーラブルなユニット: 　 レム or em ユーザーは簡単にズームできます。
• 行の高さ： 作成セッションプロセスで 行の高さ: 1.4～1.6 快適な読書のために。
• コントラスト： 色のコントラストが合っているか確認する WCAG 標準（通常のテキストの場合は少なくとも 4.5:1）。
• 非常に小さなテキストを避ける モバイル デバイスでは、14 ピクセル未満だと読みにくくなる可能性があります。

ベストプラクティスの例:

body {

  font-size: 1rem; /* 16px base */

  line-height: 1.5;

}

アクセシビリティは SEO にも直接影響することをご留意ください。Google は、モバイルフレンドリーで読みやすいページを評価します。

ShopifyとGemPagesのレスポンシブフォントサイズ

Shopifyのテーマ設定を使用する

Shopifyテーマを使用している場合は、多くの場合、フォントサイズを直接調整できます。 オンラインストア > カスタマイズ > テーマ設定 > タイポグラフィ.

多くのテーマには、テキスト サイズ (本文、見出し、ボタンのテキストなど) を全体的に制御するためのスライダーまたはドロップダウンが含まれています。

GemPagesエディタの使用

GemPagesで構築されたページのみフォントサイズを変更するなど、より細かい制御が必要な場合は、 設定パネル > 詳細設定タブ > CSSセクション.

例: メディアクエリを使用してルートフォントサイズを調整する

:root {

  font-size: 100%; /* base 16px */

}

@media (max-width: 600px) {

  :root {

    font-size: 93.75%; /* ~15px for smaller screens */

  }

}

これにより、モバイル上でフォントがわずかに縮小され、レイアウトを崩すことなく視覚的なバランスが維持されます。

よくある間違いと簡単な修正方法

CSSフォントサイズに関するよくある質問

1. CSS で使用するのに最適なフォント サイズの単位は何ですか?

　 レム ほとんどの場合、ルート要素からスケールするため、レスポンシブでアクセスしやすいものになります。

2. ウェブサイトの理想的な本文フォントサイズは何ですか?

約 16ピクセル（1レム） 本文用。特にモバイル端末では、読みやすさを向上させるために文字数を増やすことができます。

3. Shopifyでフォントサイズを変更するにはどうすればよいですか?

に行く テーマカスタマイザー > タイポグラフィ設定テーマでそれが提供されていない場合は、カスタム CSS または GemPages の Typography 要素を使用します。

4. テキストが小さいと SEO に悪影響がありますか?

間接的には、そうです。読みにくさは直帰率を高め、SEOに影響を与えるエンゲージメント指標に影響を及ぼす可能性があります。