Skip to content

Commit

Permalink
Resolve MacroLiveSampleErrors in translated-content (mdn#12578) in ja
Browse files Browse the repository at this point in the history
  • Loading branch information
YujiSoftware committed Jan 17, 2024
1 parent 92baae1 commit d85fc9a
Show file tree
Hide file tree
Showing 13 changed files with 1,122 additions and 358 deletions.
40 changes: 9 additions & 31 deletions files/ja/web/css/text-combine-upright/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
---
title: text-combine-upright
slug: Web/CSS/text-combine-upright
l10n:
sourceCommit: 997a0ec66e1514b7269076195b2419db334e876e
---

{{CSSRef}}
Expand All @@ -9,6 +11,10 @@ slug: Web/CSS/text-combine-upright

これは、日本語の縦中横、中国語の <i lang="zh-CN">直書橫向</i> として知られる効果をもたらすために使用されます。

{{EmbedInteractiveExample("pages/css/text-combine-upright.html")}}

## 構文

```css
/* キーワード値 */
text-combine-upright: none;
Expand All @@ -22,13 +28,10 @@ text-combine-upright: digits 4; /* 4 桁までの数字を垂直テキスト内
text-combine-upright: inherit;
text-combine-upright: initial;
text-combine-upright: revert;
text-combine-upright: revert-layer;
text-combine-upright: unset;
```

{{EmbedInteractiveExample("pages/css/text-combine-upright.html")}}

## 構文

### 値

- `none`
Expand All @@ -48,31 +51,7 @@ text-combine-upright: unset;

## 例

### digits

digits 値は、数字の桁を組み合わせる際に all の値よりもマークアップが少なくてすみますが、対応しているブラウザーはあまり多くありません。

#### HTML

```html
<p lang="ja" class="exampleText">平成20年4月16日に</p>
```

#### CSS

```css
.exampleText {
writing-mode: vertical-lr;
text-combine-upright: digits 2;
font: 36px serif;
}
```

#### 結果

{{EmbedLiveSample("Digits", 100, 350, "tate-chu-yoko.png")}}

### all
### 横書きテキストでの 'all' の使用

all の値は、水平テキストにするすべての部分にマークアップする必要があります。現在、これは digits 値よりも多くのブラウザーが対応しています。

Expand Down Expand Up @@ -101,8 +80,7 @@ html {

#### 結果

{{EmbedLiveSample("All", 250, 300, "text-combine-upright-all.png")}}

{{EmbedLiveSample('横書きテキストでの "all" の使用', 250, 200)}}
## 仕様書

{{Specifications}}
Expand Down
55 changes: 29 additions & 26 deletions files/ja/web/css/text-transform/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
---
title: text-transform
slug: Web/CSS/text-transform
l10n:
sourceCommit: abf155210d826c2584d23433eb2eac45a6669d23
---

{{CSSRef}}
Expand All @@ -20,7 +22,7 @@ slug: Web/CSS/text-transform

言語は HTML の [`lang`](/ja/docs/Web/HTML/Global_attributes/lang) 属性や XML の [`xml:lang`](/ja/docs/Web/SVG/Attribute/xml:lang) 属性で定義します。

> **メモ:** これらの特定のケースはブラウザーにより異なりますので、[ブラウザーの互換性一覧表](#browser_compatibility)を確認してください。
> **メモ:** これらの特定のケースはブラウザーにより異なりますので、[ブラウザーの互換性](#ブラウザーの互換性)を確認してください。
## 構文

Expand All @@ -37,6 +39,7 @@ text-transform: full-size-kana;
text-transform: inherit;
text-transform: initial;
text-transform: revert;
text-transform: revert-layer;
text-transform: unset;
```

Expand Down Expand Up @@ -104,9 +107,9 @@ strong {

文字を変換しない例です。

{{ EmbedLiveSample('none', '100%', '100px') }}
{{ EmbedLiveSample('Example using "none"', '100%', '100px') }}

<h3 id="capitalize_General">capitalize (一般的)</h3>
### capitalize (一般的)

```html
<p>
Expand Down Expand Up @@ -134,9 +137,9 @@ strong {

頭文字を大文字にする例です。

{{ EmbedLiveSample('capitalize_General', '100%', '100px') }}
{{ EmbedLiveSample('Example using "capitalize" (general)', '100%', '100px') }}

<h3 id="capitalize_Punctuation">capitalize (句読点)</h3>
### capitalize (句読点)

```html
<p>
Expand Down Expand Up @@ -168,9 +171,9 @@ strong {

単語の前の区切り記号が無視される様子を示す例です。このキーワードは、文字または数字の一般カテゴリに含まれる Unicode 文字である、最初の文字が対象です。

{{ EmbedLiveSample('capitalize_Punctuation', '100%', '100px') }}
{{ EmbedLiveSample('Example using "capitalize" (punctuation)', '100%', '100px') }}

<h3 id="capitalize_Symbols">capitalize (記号)</h3>
### capitalize (記号)

```html
<p>
Expand All @@ -194,9 +197,9 @@ strong {

頭文字の記号が無視されるかを示す例です。このキーワードは、文字または数字の一般カテゴリーに含まれる Unicode 文字である、最初の文字が対象です。

{{ EmbedLiveSample('capitalize_Symbols', '100%', '100px') }}
{{ EmbedLiveSample('Example using "capitalize" (symbols)', '100%', '100px') }}

<h3 id="capitalize_Dutch_ij_digraph">capitalize (オランダ語の二重音字 ij)</h3>
### capitalize (オランダ語の二重音字 ij)

```html
<p>
Expand Down Expand Up @@ -224,9 +227,9 @@ strong {

オランダ語の二重音字 _ij_ を 1 文字として扱わなければならないことを示す例です。

{{ EmbedLiveSample('capitalize_Dutch_ij_digraph', '100%', '100px') }}
{{ EmbedLiveSample('Example using "capitalize" (Dutch ij digraph)', '100%', '100px') }}

<h3 id="uppercase_General">uppercase (一般的)</h3>
### ppercase (一般的)

```html
<p>
Expand Down Expand Up @@ -254,9 +257,9 @@ strong {

テキストを大文字に変換する例です。

{{ EmbedLiveSample('uppercase_General', '100%', '100px') }}
{{ EmbedLiveSample('Example using "uppercase" (general)', '100%', '100px') }}

<h3 id="uppercase_Greek_Vowels">uppercase (ギリシャ語の母音字)</h3>
### uppercase (ギリシャ語の母音字)

```html
<p>
Expand All @@ -282,9 +285,9 @@ strong {

離接的接続の _eta_ を除くギリシャ語の母音字はアクセント記号を持たないこと、および二重母音の最初の文字のアクセント記号が 2 文字目の母音字のトレマになることを示す例です。

{{ EmbedLiveSample('uppercase_Greek_Vowels', '100%', '100px') }}
{{ EmbedLiveSample('Example using "uppercase" (Greek vowels)', '100%', '100px') }}

<h3 id="lowercase_General">lowercase (一般的)</h3>
### lowercase (一般的)

```html
<p>
Expand Down Expand Up @@ -312,9 +315,9 @@ strong {

テキストを小文字に変換する例です。

{{ EmbedLiveSample('lowercase_General', '100%', '100px') }}
{{ EmbedLiveSample('Example using "lowercase" (general)', '100%', '100px') }}

<h3 id="lowercase_Greek_Σ">lowercase (ギリシャ文字 Σ)</h3>
### lowercase (ギリシャ文字 Σ)

```html
<p>
Expand Down Expand Up @@ -342,9 +345,9 @@ strong {

ギリシャ文字のシグマ (`Σ`) が、状況に応じて一般的な小文字のシグマ (`σ`) または単語の末尾での表記 (`ς`) に変換される例です。

{{ EmbedLiveSample('lowercase_Greek_Σ', '100%', '100px') }}
{{ EmbedLiveSample('Example using "lowercase" (Greek Σ)', '100%', '100px') }}

<h3 id="lowercase_Lithuanian">lowercase (リヒテンシュタイン語)</h3>
### lowercase (リヒテンシュタイン語)

```html
<p>
Expand All @@ -368,9 +371,9 @@ strong {

これはリヒテンシュタインの文字 `Ĩ` および `` が小文字に変換されるとドットを保持する様子を示します。

{{ EmbedLiveSample('lowercase_Lithuanian', '100%', '100px') }}
{{ EmbedLiveSample('Example using "lowercase" (Lithuanian)', '100%', '100px') }}

<h3 id="full-width_General">full-width (一般)</h3>
### full-width (一般)

```html
<p>
Expand Down Expand Up @@ -401,9 +404,9 @@ strong {

一部の文字は半角と全角の 2 種類の表現があり、それらは別々の Unicode コードポイントを持ちます。全角文字は、アジア圏の表意文字と自然な形で混在させるために使用します。

{{ EmbedLiveSample('full-width_General', '100%', '175px') }}
{{ EmbedLiveSample('Example using "full-width" (general)', '100%', '175px') }}

<h3 id="full-width_Japanese_half-width_katakana">full-width (日本語の半角カタカナ)</h3>
### full-width (日本語の半角カタカナ)

```html
<p>
Expand All @@ -428,9 +431,9 @@ strong {

日本語の半角カタカナは、8 ビットの文字コードでカタカナを表現するために使われていました。通常の (全角の) カタカナ文字とは異なり、濁点の付いた文字は、文字本体と濁点の 2 つのコードポイントで表現されます。 `full-width` は、これらの文字を全角に変換する際に、1 つのコードポイントにまとめます。

{{ EmbedLiveSample('full-width_Japanese_half-width_katakana', '100%', '175px') }}
{{ EmbedLiveSample('Example using "full-width" (Japanese half-width katakana)', '100%', '175px') }}

<h3 id="full-size-kana">full-size-kana</h3>
### full-size-kana

```html
<p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
Expand All @@ -444,7 +447,7 @@ p:nth-of-type(2) {
}
```

{{ EmbedLiveSample('full-size-kana', '100%', '175px') }}
{{ EmbedLiveSample('Example using "full-size-kana"', '100%', '175px') }}

## 仕様書

Expand Down
33 changes: 21 additions & 12 deletions files/ja/web/css/width/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
---
title: width
slug: Web/CSS/width
l10n:
sourceCommit: 925b2bd8beeae6ce8237863637bcd28ccbb8d47f
---

{{CSSRef}}
Expand All @@ -9,7 +11,10 @@ slug: Web/CSS/width

{{EmbedInteractiveExample("pages/css/width.html")}}

{{cssxref("min-width")}} および {{cssxref("max-width")}} プロパティは `width` を上書きします。
`width` に指定された値は、その値が {{cssxref("min-width")}} および {{cssxref("max-width")}} で定義された値内にある限り、コンテンツ領域に適用されます。

- `width` の値が `min-width` の値より小さい場合、`min-width``width` をオーバーライドします。
- `width` の値が `max-width` の値より大きい場合、`max-width``width` をオーバーライドします。

## 構文

Expand All @@ -24,13 +29,15 @@ width: 75%;
/* キーワード値 */
width: max-content;
width: min-content;
width: fit-content;
width: fit-content(20em);
width: auto;

/* グローバル値 */
width: inherit;
width: initial;
width: revert;
width: revert-layer;
width: unset;
```

Expand All @@ -39,14 +46,16 @@ width: unset;
- {{cssxref("&lt;length&gt;")}}
- : 絶対的な値で幅を定義します。
- {{cssxref("&lt;percentage&gt;")}}
- : 親となる包含ブロックの幅に対するパーセント値で定義します
- : 親となる[包含ブロック](/ja/docs/Web/CSS/Containing_block)の幅に対するパーセント値で定義します
- `auto`
- : 指定された要素の幅をブラウザーが計算して決めます。
- `max-content`
- : 望ましい固有の幅です。
- `min-content`
- : 最小の固有の幅です。
- `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
- `fit-content`
- : 利用可能なスペースを使用しますが、[max-content](/ja/docs/Web/CSS/max-content)、つまり `min(max-content, max(min-content, stretch))` を超えません。
- `fit-content({{cssxref("&lt;length-percentage&gt;")}})` {{Experimental_Inline}}
- : 利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち `min(max-content, max(min-content, <length-percentage>))` です。

## アクセシビリティの考慮
Expand All @@ -66,7 +75,7 @@ width: unset;

## 例

<h3 id="Default_width">既定の幅</h3>
### 既定の幅

```css
p.goldie {
Expand All @@ -80,7 +89,7 @@ p.goldie {

{{EmbedLiveSample('Default_width', '500px', '64px')}}

<h3 id="Pixels_and_ems">ピクセル数と em 単位</h3>
### ピクセル数と em 単位

```css
.px_length {
Expand All @@ -103,9 +112,9 @@ p.goldie {
<div class="em_length">Width measured in em</div>
```

{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}
{{EmbedLiveSample('Example using pixels and ems', '500px', '64px')}}

<h3 id="Percentage">パーセント値</h3>
### Percentage の例

```css
.percent {
Expand All @@ -119,9 +128,9 @@ p.goldie {
<div class="percent">Width in percentage</div>
```

{{EmbedLiveSample('Percentage', '500px', '64px')}}
{{EmbedLiveSample('Example using percentage', '500px', '64px')}}

### max-content
### max-content の例

```css
p.maxgreen {
Expand All @@ -137,9 +146,9 @@ p.maxgreen {
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>
```

{{EmbedLiveSample('max-content', '500px', '64px')}}
{{EmbedLiveSample('Example using "max-content"', '500px', '64px')}}

### min-content
### min-content の例

```css
p.minblue {
Expand All @@ -154,7 +163,7 @@ p.minblue {
<p class="minblue">The Mozilla community produces a lot of great software.</p>
```

{{EmbedLiveSample('min-content', '500px', '155px')}}
{{EmbedLiveSample('Example using "min-content"', '500px', '155px')}}

## 仕様書

Expand Down
Loading

0 comments on commit d85fc9a

Please sign in to comment.