Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【CSS Modules】text-size-adjustプロパティの使い方

text-size-adjustプロパティの使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

text-size-adjustプロパティは、モバイルブラウザにおけるテキストサイズの自動調整機能を制御するためのプロパティです。 スマートフォンやタブレットなどの小さな画面を持つデバイスでは、ユーザーがコンテンツをズームしなくてもテキストが読めるように、ブラウザが自動的にテキストのサイズを拡大して表示する機能が備わっています。このプロパティは、ウェブサイト開発者がそうしたブラウザの自動的なテキストサイズ調整の挙動をコントロールするために使用されます。

このプロパティに設定できる主な値は以下の通りです。 auto は、ブラウザが標準的にテキストサイズの自動調整を行うことを許可します。これにより、ユーザーは追加の操作なしに、読みにくい小さなテキストをブラウザが自動で拡大してくれます。 none は、ブラウザによるテキストサイズの自動調整を無効にします。この値を使用すると、ウェブサイトで指定されたフォントサイズがそのまま適用され、ブラウザが勝手にテキストを拡大することはありません。これは、意図しないレイアウトの崩れを防ぎたい場合や、特定のリデザイン要件がある場合に役立つことがあります。 また、特定のパーセンテージ(例: 100%200%)を指定することで、テキストのサイズ調整の割合を細かく制御することも可能です。

ただし、noneなどの値を用いてテキストサイズの自動調整を完全に無効にすることは、アクセシビリティの観点から注意が必要です。視覚に障がいのある方や高齢者など、テキストの拡大を必要とするユーザーがコンテンツを読みにくくなる可能性があるため、使用には慎重な検討が求められます。 現在、このプロパティは主要なブラウザにおいて、-webkit-text-size-adjust-ms-text-size-adjust のようなベンダープレフィックスを付けて実装されていることが多く、標準的なCSSプロパティとしてのサポート状況はブラウザによって異なります。

公式リファレンス: text-size-adjust

構文(syntax)

1text-size-adjust: none;

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ

関連プログラミング言語