From 578fdb88d8fa65327a59554db490a0706f61e98d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 4 Oct 2021 11:26:51 +0900 Subject: Web/CSS/text-size-adjust の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/text-size-adjust/index.html | 84 ---------------------------- files/ja/web/css/text-size-adjust/index.md | 84 ++++++++++++++++++++++++++++ 2 files changed, 84 insertions(+), 84 deletions(-) delete mode 100644 files/ja/web/css/text-size-adjust/index.html create mode 100644 files/ja/web/css/text-size-adjust/index.md (limited to 'files/ja') diff --git a/files/ja/web/css/text-size-adjust/index.html b/files/ja/web/css/text-size-adjust/index.html deleted file mode 100644 index cf53f80c9d..0000000000 --- a/files/ja/web/css/text-size-adjust/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: text-size-adjust -slug: Web/CSS/text-size-adjust -tags: - - CSS - - CSS プロパティ - - CSS モバイル文字サイズ調整 - - Experimental - - NeedsExample - - リファレンス -translation_of: Web/CSS/text-size-adjust ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

text-size-adjust プロパティは一部のモバイル端末で使われる、テキストの自動拡大アルゴリズムを制御します。他のブラウザーはこのプロパティを無視します。

- -
/* キーワード値 */
-text-size-adjust: none;
-text-size-adjust: auto;
-
-/* <percentage> 値 */
-text-size-adjust: 80%;
-
-/* グローバル値 */
-text-size-adjust: inherit;
-text-size-adjust: initial;
-text-size-adjust: unset;
-
- -

モバイル端末のことを考慮していないウェブページは今でも多いため、モバイル端末のブラウザーはデスクトップブラウザーとは異なる表示をすることがあります。例えば端末の画面幅ではなく、800pxや1000pxなどのより広い幅の{{glossary("viewport", "ビューポート")}}でレイアウトを行います。この広いレイアウトを元の機器の大きさに対応させるため、ブラウザーはその一部を表示するか、縮小して表示することになります。

- -

こうして小さい画面に合わせて縮小したテキストはとても小さくなるため、モバイル端末のブラウザーの多くはテキストを拡大して読みやすくします。テキストを含む要素が画面幅の全体を占めている時、レイアウトを変更することなく、読みやすい大きさまで文字サイズが拡大されます。 text-size-adjust プロパティを使うことで、この挙動が不要なページで無効化したり、挙動を変更したりすることができます。

- -

{{cssinfo}}

- -

構文

- -

text-size-adjust プロパティは none, auto, <percentage> の何れかで指定します。

- -

値

- -
-
none
-
ブラウザーのテキスト自動拡大アルゴリズムを無効化します。WebKit ベースの古いデスクトップブラウザー (Chrome≤26, Safari≤5) ではこの代わりに、ユーザーによるズーム操作を妨げます。
-
auto
-
ブラウザーのテキスト自動拡大アルゴリズムを有効化します。この値は CSS で設定した none 値を取り消すのに使います。
-
<percentage>
-
ブラウザーのテキスト自動拡大アルゴリズムを有効化し、パーセント値で文字サイズの倍率を指定します。
-
- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName("CSS Text Size Adjust", "#adjustment-control", "text-size-adjust")}}{{Spec2("CSS Text Size Adjust")}}初回定義
- -

ブラウザーの対応

- -

{{Compat("css.properties.text-size-adjust")}}

- -

関連情報

- - diff --git a/files/ja/web/css/text-size-adjust/index.md b/files/ja/web/css/text-size-adjust/index.md new file mode 100644 index 0000000000..d788ef5008 --- /dev/null +++ b/files/ja/web/css/text-size-adjust/index.md @@ -0,0 +1,84 @@ +--- +title: text-size-adjust +slug: Web/CSS/text-size-adjust +tags: + - CSS + - CSS Mobile Text Size Adjustment + - CSS プロパティ + - Experimental + - NeedsExample + - Reference + - recipe:css-property +browser-compat: css.properties.text-size-adjust +translation_of: Web/CSS/text-size-adjust +--- +{{CSSRef}}{{SeeCompatTable}} + +**`text-size-adjust`** は [CSS](/ja/docs/Web/API/CSS) のプロパティで、一部のモバイル端末で使われる、テキストの自動拡大アルゴリズムを制御します。他のブラウザーはこのプロパティを無視します。 + +```css +/* キーワード値 */ +text-size-adjust: none; +text-size-adjust: auto; + +/* 値 */ +text-size-adjust: 80%; + +/* グローバル値 */ +text-size-adjust: inherit; +text-size-adjust: initial; +text-size-adjust: revert; +text-size-adjust: unset; +``` + +モバイル端末のことを考慮していないウェブページは今でも多いため、モバイル端末のブラウザーはデスクトップブラウザーとは異なる表示をすることがあります。例えば端末の画面幅ではなく、800px や 1000px などのより広い幅の{{glossary("viewport", "ビューポート")}}でレイアウトを行います。この広いレイアウトを元の機器の大きさに対応させるため、ブラウザーはその一部を表示するか、縮小して表示することになります。 + +こうして小さい画面に合わせて縮小したテキストはとても小さくなるため、モバイル端末のブラウザーの多くはテキストを拡大して読みやすくします。テキストを含む要素が画面幅の全体を占めている時、レイアウトを変更することなく、読みやすい大きさまで文字サイズが拡大されます。 `text-size-adjust` プロパティを使うことで、この挙動が不要なページで無効化したり、挙動を変更したりすることができます。 + +## 構文 + +`text-size-adjust` プロパティは `none`, `auto`, `` の何れかで指定します。 + +### 値 + +- `none` + - : ブラウザーのテキスト自動拡大アルゴリズムを無効化します。 +- `auto` + - : ブラウザーのテキスト自動拡大アルゴリズムを有効化します。この値は CSS で設定した `none` 値を取り消すのに使います。 +- `` + - : ブラウザーのテキスト自動拡大アルゴリズムを有効化し、パーセント値で文字サイズの倍率を指定します。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 基本的な無効化の使用方法 + +上記に示すとおり、適切に設計されたレスポンシブサイトでは、`text-size-adjust` の動作は必要ありませんので、開発者は none の値を指定してこれをオフにすることができます。 + +```css +p { + -webkit-text-size-adjust: none; + text-size-adjust: none; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Apple のドキュメント](https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW16) +- [Gecko's behavior description](https://dbaron.org/log/20111126-font-inflation), by L. David Baron +- [Microsoft のドキュメント]() -- cgit v1.2.3-54-g00ecf