概要

text-size-adjustプロパティは、モバイルデバイスにおいてテキストサイズの自動調整を制御するためのCSSプロパティです。スマートフォンやタブレットなどのモバイルブラウザでは、ユーザーの読みやすさを確保するために、テキストのサイズが自動的に拡大されることがあります。text-size-adjustを使用することで、この自動調整の動作を抑制したり、制御することが可能です。

text-size-adjustの基本

構文

text-size-adjust: auto | none | <percentage>;

値の説明

• auto
  ブラウザのデフォルト設定に従ってテキストサイズを自動的に調整します。通常、これはモバイルデバイスで読みやすさを向上させるために使用されます。

• none
  テキストサイズの自動調整を無効にします。これにより、指定したフォントサイズがそのまま適用されます。

• percentage
  テキストサイズを指定されたパーセンテージで調整します。例えば、100%はサイズの調整を行わないことを意味し、120%は20%の拡大を示します。

使用例

基本的な使用例 - テキストサイズの自動調整を無効にする

モバイルブラウザでテキストサイズの自動調整を無効にするには、text-size-adjustにnoneを設定します。

body {
    text-size-adjust: none;
}

この設定により、デバイスが自動的にテキストのサイズを調整することを防ぎます。これが有効なケースとしては、デザインが崩れるのを防ぐ場合や、特定のフォントサイズで表示したい場合などです。

パーセンテージ指定での調整

自動調整を完全に無効にするのではなく、一定の調整を加えたい場合はパーセンテージ指定が可能です。

body {
    text-size-adjust: 120%;
}

この設定では、通常のテキストサイズが20%拡大され、ユーザーにとって読みやすくなります。

注意点

• アクセシビリティへの影響
  text-size-adjustを無効にすると、ユーザーの読みやすさが損なわれる場合があります。特に視覚に問題のあるユーザーがページを閲覧する際に困難を感じることがあるため、このプロパティの使用は慎重に検討する必要があります。
• ブラウザの互換性
  すべてのブラウザがこのプロパティをサポートしているわけではありません。特に古いブラウザでは動作しない場合があるため、必要に応じてブラウザの互換性を確認することが重要です。
• デザインとのバランス
  デザインの意図とユーザーの利便性のバランスを考慮し、必要に応じて設定を調整しましょう。多くのケースでは、デフォルトのauto設定が適しています。

text-size-adjustの対応ブラウザ

text-size-adjustプロパティは主要なモバイルブラウザでサポートされていますが、詳細な対応状況は以下の通りです：

• Safari（iOS）: サポート
• Chrome（Android/iOS）: サポート
• Firefox（Android/iOS）: サポート
• Edge（Android/iOS）: サポート
• 一部のデスクトップブラウザでは無視されることがあるため、基本的にモバイル用プロパティとして使用されます。

まとめ

text-size-adjustは、モバイルブラウザでのテキスト表示を制御するための強力なツールですが、使用に際してはアクセシビリティやユーザー体験を考慮することが重要です。適切な設定で、デザインとユーザーの利便性の両方をバランス良く保つことが可能です。