diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-10-04 11:26:51 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-10-16 23:50:58 +0900 |
commit | 578fdb88d8fa65327a59554db490a0706f61e98d (patch) | |
tree | 0d135ac011e58dfb2fc9fb392b3ac98522e99bbd /files | |
parent | 763ce5b0289c9abdcb2855cc1907d58fb5638eb7 (diff) | |
download | translated-content-578fdb88d8fa65327a59554db490a0706f61e98d.tar.gz translated-content-578fdb88d8fa65327a59554db490a0706f61e98d.tar.bz2 translated-content-578fdb88d8fa65327a59554db490a0706f61e98d.zip |
Web/CSS/text-size-adjust の変換準備
Diffstat (limited to 'files')
-rw-r--r-- | files/ja/web/css/text-size-adjust/index.html | 84 | ||||
-rw-r--r-- | files/ja/web/css/text-size-adjust/index.md | 84 |
2 files changed, 84 insertions, 84 deletions
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 ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p><strong><code>text-size-adjust</code></strong> プロパティは一部のモバイル端末で使われる、テキストの自動拡大アルゴリズムを制御します。他のブラウザーはこのプロパティを無視します。</p> - -<pre class="brush: css no-line-numbers">/* キーワード値 */ -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; -</pre> - -<p>モバイル端末のことを考慮していないウェブページは今でも多いため、モバイル端末のブラウザーはデスクトップブラウザーとは異なる表示をすることがあります。例えば端末の画面幅ではなく、800pxや1000pxなどのより広い幅の{{glossary("viewport", "ビューポート")}}でレイアウトを行います。この広いレイアウトを元の機器の大きさに対応させるため、ブラウザーはその一部を表示するか、縮小して表示することになります。</p> - -<p>こうして小さい画面に合わせて縮小したテキストはとても小さくなるため、モバイル端末のブラウザーの多くはテキストを拡大して読みやすくします。テキストを含む要素が画面幅の全体を占めている時、レイアウトを変更することなく、読みやすい大きさまで文字サイズが拡大されます。 <code>text-size-adjust</code> プロパティを使うことで、この挙動が不要なページで無効化したり、挙動を変更したりすることができます。</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code>text-size-adjust</code> プロパティは <code><a href="#none">none</a></code>, <code><a href="#auto">auto</a></code>, <code><a href="#<percentage>"><percentage></a></code> の何れかで指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt id="none"><code>none</code></dt> - <dd>ブラウザーのテキスト自動拡大アルゴリズムを無効化します。WebKit ベースの古いデスクトップブラウザー (Chrome≤26, Safari≤5) ではこの代わりに、ユーザーによるズーム操作を妨げます。</dd> - <dt id="auto"><code>auto</code></dt> - <dd>ブラウザーのテキスト自動拡大アルゴリズムを有効化します。この値は CSS で設定した <code>none</code> 値を取り消すのに使います。</dd> - <dt id="<percentage>"><code><percentage></code></dt> - <dd>ブラウザーのテキスト自動拡大アルゴリズムを有効化し、パーセント値で文字サイズの倍率を指定します。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Text Size Adjust", "#adjustment-control", "text-size-adjust")}}</td> - <td>{{Spec2("CSS Text Size Adjust")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.text-size-adjust")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a class="link-https" href="https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW16">Apple のドキュメント</a></li> - <li>L. David Baron による、 <a class="external" href="http://dbaron.org/log/20111126-font-inflation">Gecko の挙動の説明</a></li> - <li><a class="external" href="https://msdn.microsoft.com/library/windows/apps/ff462082(v=vs.105).aspx#BKMK_AdjustingTextSizewithCustomCSS">Microsoft のドキュメント</a></li> -</ul> 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; + +/* <percentage> 値 */ +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`, `<percentage>` の何れかで指定します。 + +### 値 + +- `none` + - : ブラウザーのテキスト自動拡大アルゴリズムを無効化します。 +- `auto` + - : ブラウザーのテキスト自動拡大アルゴリズムを有効化します。この値は CSS で設定した `none` 値を取り消すのに使います。</dd> +- `<percentage>` + - : ブラウザーのテキスト自動拡大アルゴリズムを有効化し、パーセント値で文字サイズの倍率を指定します。</dd> + +## 公式定義 + +{{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 のドキュメント](<https://msdn.microsoft.com/library/windows/apps/ff462082(v=vs.105).aspx#BKMK_AdjustingTextSizewithCustomCSS>) |