From 77a985579b4f595d0e39287e332ec942c73a226d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 27 Aug 2021 21:03:16 +0900 Subject: 緊急対応: Web/CSS/list-style-type の拡張子を .md に変更 (#2249) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/list-style-type/index.html | 581 ---------------------------- files/ja/web/css/list-style-type/index.md | 581 ++++++++++++++++++++++++++++ 2 files changed, 581 insertions(+), 581 deletions(-) delete mode 100644 files/ja/web/css/list-style-type/index.html create mode 100644 files/ja/web/css/list-style-type/index.md diff --git a/files/ja/web/css/list-style-type/index.html b/files/ja/web/css/list-style-type/index.html deleted file mode 100644 index 518ab2a49c..0000000000 --- a/files/ja/web/css/list-style-type/index.html +++ /dev/null @@ -1,581 +0,0 @@ ---- -title: list-style-type -slug: Web/CSS/list-style-type -tags: - - CSS - - CSS プロパティ - - CSS リスト - - Reference - - recipe:css-property -browser-compat: css.properties.list-style-type -translation_of: Web/CSS/list-style-type ---- -{{CSSRef}} - -**`list-style-type`** は [CSS](/ja/docs/Web/CSS) のプロパティで、リスト項目要素のマーカーを設定します (円、文字、独自のカウンタースタイルなど)。

- -{{EmbedInteractiveExample("pages/css/list-style-type.html")}} - -マーカーの[色](/ja/docs/Web/CSS/color_value)は、適用先の要素における色の計算値と同じになります。 - -わずかな要素 ({{HTMLElement("li")}} と {{HTMLElement("summary")}}) だけが既定で `display: list-item` の値を持っています。しかし、 `list-style-type` プロパティは {{cssxref("display")}} の値が `list-item` に設定されているあらゆる要素に適用することができます。さらに、このプロパティは継承されるので、親要素 (普通は {{HTMLElement("ol")}} または {{HTMLElement("ul")}}) に設定することですべてのリスト項目に適用することができます。

- -## 構文 - -```css -/* マーカーの種類の一例 */ -list-style-type: disc; -list-style-type: circle; -list-style-type: square; -list-style-type: decimal; -list-style-type: georgian; -list-style-type: trad-chinese-informal; -list-style-type: kannada; - -/* の値 */ -list-style-type: '-'; - -/* @counter-style 規則に一致する識別子 */ -list-style-type: custom-counter-style; - -/* キーワード値 */ -list-style-type: none; - -/* グローバル値 */ -list-style-type: inherit; -list-style-type: initial; -list-style-type: revert; -list-style-type: unset; -``` - -`list-style-type` プロパティは、以下のいずれかで定義することができます。 - -- 単一の `` 値 -- 単一の `symbols()` 値 -- 単一の `` 値 -- キーワード `none` - -注意事項: - -- 種類によっては期待通りに表示するために適切なフォントのインストールが必要です。 -- `cjk-ideographic` は `trad-chinese-informal` と同じです。歴史的な理由で存在しています。 - -### 値 - -- {{cssxref("custom-ident", "<custom-ident>")}} - - : {{cssxref("@counter-style")}} の値、または以下の定義済みスタイルのうちの一つに一致する識別子です。 -- {{cssxref("symbols()")}} - - : 無名のリストスタイルを定義します。 -- {{cssxref("<string>")}} - - : 特定の文字列を、リストのマーカーとして使用します。 -- `none` - - : マーカーは表示されません。 -- `disc` - - : 塗りつぶされた円形です (既定値)。 -- `circle` - - : 中空円です。 -- `square` - - : 塗りつぶされた四角形です。 -- `decimal` - - : 数値です。 1 から始まります。 -- `cjk-decimal` {{experimental_inline}} - - : 漢数字です。 -- `decimal-leading-zero` - - : 数値で、先頭がゼロ埋めされます。 -- `lower-roman` - - : 小文字のローマ数字です。 -- `upper-roman` - - : 大文字のローマ数字です。 -- `lower-greek` - - : 小文字の古代ギリシャ文字です。 -- `lower-alpha`, `lower-latin` - - : 小文字の ASCII 文字です。 -- `upper-alpha`, `upper-latin` - - : 大文字の ASCII 文字です。 -- `arabic-indic`, `-moz-arabic-indic` - - : アラビア－インド数字です。 -- `armenian` - - : 伝統的なアルメニア語の数値表記です。 -- `bengali`, `-moz-bengali` - - : ベンガル語の数値表記です。 -- `cambodian`/`khmer` - - : カンボジア／クメール語の数値表記です。 -- `cjk-earthly-branch`, `-moz-cjk-earthly-branch` - - : 漢字の「十二支」順です。 -- `cjk-heavenly-stem`, `-moz-cjk-heavenly-stem` - - : 漢字の「十干」順です。 -- `cjk-ideographic`{{experimental_inline}} - - : `trad-chinese-informal` と同じです。 -- `devanagari`, `-moz-devanagari` - - : デーヴァナーガリーの数値表記です。 -- `ethiopic-numeric` {{experimental_inline}} - - : エチオピア語の数値表記です。 -- `georgian` - - : 伝統的なジョージア語の数値表記です。 -- `gujarati`, `-moz-gujarati` - - : グジャラート語の数値表記です。 -- `gurmukhi`, `-moz-gurmukhi` - - : グルムキー語の数値表記です。 -- `hebrew` {{experimental_inline}} - - : 伝統的なヘブライ語の数値表記です。 -- `hiragana` {{experimental_inline}} - - : ひらがなの辞書順の文字です。 -- `hiragana-iroha` {{experimental_inline}} - - : ひらがなの{{interwiki('wikipedia', 'いろは歌', 'いろは順')}}の文字です。 -- `japanese-formal` {{experimental_inline}} - - : 法律や金融関係の書類に使用される日本の公的な数値表記です。漢字は、他の正しい文字に似せて修正することができないように設計されています。 -- `japanese-informal` {{experimental_inline}} - - : 日本語の日常的な数値表記です。 -- `kannada`, `-moz-kannada` - - : カンナダ語の数値表記です。 -- `katakana` {{experimental_inline}} - - : カタカナの辞書順の文字です。 -- `katakana-iroha` {{experimental_inline}} - - : カタカナの{{interwiki('wikipedia', 'いろは歌', 'いろは順')}}の文字です。 -- `korean-hangul-formal` {{experimental_inline}} - - : 韓国語のハングルの数値表記です。 -- `korean-hanja-formal` {{experimental_inline}} - - : 韓国語の公的な漢数字です。 -- `korean-hanja-informal` {{experimental_inline}} - - : 韓国語の漢数字です。 -- `lao`, `-moz-lao` - - : ラオス語の数値表記です。 -- `lower-armenian` {{experimental_inline}} - - : アルメニア語の小文字の数値表記です。 -- `malayalam`, `-moz-malayalam` - - : マラヤーラム語の数値表記です。 -- `mongolian` {{experimental_inline}} - - : モンゴル語の数値表記です。 -- `myanmar`, `-moz-myanmar` - - : ミャンマー語 (ビルマ語) の数値表記です。 -- `oriya`, `-moz-oriya` - - : オリヤー語の数値表記です。 -- `persian` {{experimental_inline}}, `-moz-persian` - - : ペルシャ語の数値表記です。 -- `simp-chinese-formal` {{experimental_inline}} - - : 公的な簡体字中国語の数値表記です。 -- `simp-chinese-informal` {{experimental_inline}} - - : 日常的な簡体字中国語の数値表記です。 -- `tamil` {{experimental_inline}}, `-moz-tamil` - - : タミル語の数値表記です。 -- `telugu`, `-moz-telugu` - - : テルグ語の数値表記です。 -- `thai`, `-moz-thai` - - : タイ語の数値表記です。 -- `tibetan` {{experimental_inline}}\* - - : チベット語の数値表記です。 -- `trad-chinese-formal` {{experimental_inline}} - - : 公的な繁体字中国語の数値表記です。 -- `trad-chinese-informal` {{experimental_inline}} - - : 日常的な繁体字中国語の数値表記です。 -- `upper-armenian` {{experimental_inline}}` - - : 伝統的なアルメニア語の大文字の数値表記です。 -- `disclosure-open` {{experimental_inline}} - - : {{HTMLElement("details")}} などの展開ウィジェットを開いていることを示す記号 -- `disclosure-closed` {{experimental_inline}} - - : {{HTMLElement("details")}} などの展開ウィジェットを閉じていることを示す記号 - -### 標準外の拡張 - -Mozilla (Firefox)、Blink (Chrome、Opera)、WebKit (Safari) では、他の言語のリストの種類に対応するために、さらにいくつかの定義済みの種類が提供されています。どのブラウザーがどの拡張に対応しているかを確認するには、互換性一覧表を参照してください。 - -- `-moz-ethiopic-halehame` -- `-moz-ethiopic-halehame-am` -- `ethiopic-halehame-ti-er`, `-moz-ethiopic-halehame-ti-er` -- `ethiopic-halehame-ti-et`, `-moz-ethiopic-halehame-ti-et` -- `hangul`, `-moz-hangul` -- `hangul-consonant`, `-moz-hangul-consonant` -- `urdu`, `-moz-urdu` - -## アクセシビリティの考慮 - -画面リーダーの [VoiceOver](https://help.apple.com/voiceover/info/guide/) には、 `list-style-type` の値に `none` が適用された順序なしリストをリストとして読み上げないという問題があります。リストが正しく読み上げられるようにするには、それぞれのリスト項目の前に[幅ゼロの空白](https://en.wikipedia.org/wiki/Zero-width_space)を[擬似コンテンツ](/ja/docs/Web/CSS/content)として追加する必要があります。これはデザインがバグ修正に影響されないことを保証し、リスト項目の表記が正しくなくなるわけではありません。 - -```css -ul { - list-style: none; -} - -ul li::before { - content: "\200B"; -} -``` - -- [VoiceOver and list-style-type: none – Unfettered Thoughts](https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/) -- [MDN WCAG の理解、ガイドライン 1.3 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways) -- [Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) - -## 公式定義 - -{{cssinfo}} - -## 形式文法 - -{{csssyntax}} - -## 例 - -

リスト項目マーカーの設定

- -#### HTML - -```html -List 1 -
    -
  1. Hello
    2. -
  2. World
    3. -
  3. What's up?
    4. -
- -List 2 -
    -
  1. Looks
    2. -
  2. Like
    3. -
  3. The
    4. -
  4. Same
    5. -
-``` - -#### CSS - -```css -ol.normal { - list-style-type: upper-alpha; -} - -/* or use the shortcut "list-style": */ -ol.shortcut { - list-style: upper-alpha; -} -``` - -#### 結果 - -{{EmbedLiveSample("Setting_list_item_markers","200","300")}} - -

リストスタイルのすべての種類

- -#### HTML - -```html -
    -
  1. Apollo
    2. -
  2. Hubble
    3. -
  3. Chandra
    4. -
  4. Cassini-Huygens
    5. -
  5. Spitzer
    6. -
- -

Choose a list style type:

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-``` - -#### CSS - -```css - -ol { - font-size: 1.2rem; -} - -.container { - column-count: 3; -} - -label { - display: block; -} - -input { - margin: .4rem; -} -``` - -#### JavaScript - -```js -const container = document.querySelector(".container"); -container.addEventListener("change", event => { - const list = document.querySelector("ol"); - list.setAttribute("style", `list-style-type: ${event.target.value}`); -}); -``` - -#### 結果 - -{{EmbedLiveSample("All_list_style_types", "600", "800")}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}} diff --git a/files/ja/web/css/list-style-type/index.md b/files/ja/web/css/list-style-type/index.md new file mode 100644 index 0000000000..518ab2a49c --- /dev/null +++ b/files/ja/web/css/list-style-type/index.md @@ -0,0 +1,581 @@ +--- +title: list-style-type +slug: Web/CSS/list-style-type +tags: + - CSS + - CSS プロパティ + - CSS リスト + - Reference + - recipe:css-property +browser-compat: css.properties.list-style-type +translation_of: Web/CSS/list-style-type +--- +{{CSSRef}} + +**`list-style-type`** は [CSS](/ja/docs/Web/CSS) のプロパティで、リスト項目要素のマーカーを設定します (円、文字、独自のカウンタースタイルなど)。

+ +{{EmbedInteractiveExample("pages/css/list-style-type.html")}} + +マーカーの[色](/ja/docs/Web/CSS/color_value)は、適用先の要素における色の計算値と同じになります。 + +わずかな要素 ({{HTMLElement("li")}} と {{HTMLElement("summary")}}) だけが既定で `display: list-item` の値を持っています。しかし、 `list-style-type` プロパティは {{cssxref("display")}} の値が `list-item` に設定されているあらゆる要素に適用することができます。さらに、このプロパティは継承されるので、親要素 (普通は {{HTMLElement("ol")}} または {{HTMLElement("ul")}}) に設定することですべてのリスト項目に適用することができます。

+ +## 構文 + +```css +/* マーカーの種類の一例 */ +list-style-type: disc; +list-style-type: circle; +list-style-type: square; +list-style-type: decimal; +list-style-type: georgian; +list-style-type: trad-chinese-informal; +list-style-type: kannada; + +/* の値 */ +list-style-type: '-'; + +/* @counter-style 規則に一致する識別子 */ +list-style-type: custom-counter-style; + +/* キーワード値 */ +list-style-type: none; + +/* グローバル値 */ +list-style-type: inherit; +list-style-type: initial; +list-style-type: revert; +list-style-type: unset; +``` + +`list-style-type` プロパティは、以下のいずれかで定義することができます。 + +- 単一の `` 値 +- 単一の `symbols()` 値 +- 単一の `` 値 +- キーワード `none` + +注意事項: + +- 種類によっては期待通りに表示するために適切なフォントのインストールが必要です。 +- `cjk-ideographic` は `trad-chinese-informal` と同じです。歴史的な理由で存在しています。 + +### 値 + +- {{cssxref("custom-ident", "<custom-ident>")}} + - : {{cssxref("@counter-style")}} の値、または以下の定義済みスタイルのうちの一つに一致する識別子です。 +- {{cssxref("symbols()")}} + - : 無名のリストスタイルを定義します。 +- {{cssxref("<string>")}} + - : 特定の文字列を、リストのマーカーとして使用します。 +- `none` + - : マーカーは表示されません。 +- `disc` + - : 塗りつぶされた円形です (既定値)。 +- `circle` + - : 中空円です。 +- `square` + - : 塗りつぶされた四角形です。 +- `decimal` + - : 数値です。 1 から始まります。 +- `cjk-decimal` {{experimental_inline}} + - : 漢数字です。 +- `decimal-leading-zero` + - : 数値で、先頭がゼロ埋めされます。 +- `lower-roman` + - : 小文字のローマ数字です。 +- `upper-roman` + - : 大文字のローマ数字です。 +- `lower-greek` + - : 小文字の古代ギリシャ文字です。 +- `lower-alpha`, `lower-latin` + - : 小文字の ASCII 文字です。 +- `upper-alpha`, `upper-latin` + - : 大文字の ASCII 文字です。 +- `arabic-indic`, `-moz-arabic-indic` + - : アラビア－インド数字です。 +- `armenian` + - : 伝統的なアルメニア語の数値表記です。 +- `bengali`, `-moz-bengali` + - : ベンガル語の数値表記です。 +- `cambodian`/`khmer` + - : カンボジア／クメール語の数値表記です。 +- `cjk-earthly-branch`, `-moz-cjk-earthly-branch` + - : 漢字の「十二支」順です。 +- `cjk-heavenly-stem`, `-moz-cjk-heavenly-stem` + - : 漢字の「十干」順です。 +- `cjk-ideographic`{{experimental_inline}} + - : `trad-chinese-informal` と同じです。 +- `devanagari`, `-moz-devanagari` + - : デーヴァナーガリーの数値表記です。 +- `ethiopic-numeric` {{experimental_inline}} + - : エチオピア語の数値表記です。 +- `georgian` + - : 伝統的なジョージア語の数値表記です。 +- `gujarati`, `-moz-gujarati` + - : グジャラート語の数値表記です。 +- `gurmukhi`, `-moz-gurmukhi` + - : グルムキー語の数値表記です。 +- `hebrew` {{experimental_inline}} + - : 伝統的なヘブライ語の数値表記です。 +- `hiragana` {{experimental_inline}} + - : ひらがなの辞書順の文字です。 +- `hiragana-iroha` {{experimental_inline}} + - : ひらがなの{{interwiki('wikipedia', 'いろは歌', 'いろは順')}}の文字です。 +- `japanese-formal` {{experimental_inline}} + - : 法律や金融関係の書類に使用される日本の公的な数値表記です。漢字は、他の正しい文字に似せて修正することができないように設計されています。 +- `japanese-informal` {{experimental_inline}} + - : 日本語の日常的な数値表記です。 +- `kannada`, `-moz-kannada` + - : カンナダ語の数値表記です。 +- `katakana` {{experimental_inline}} + - : カタカナの辞書順の文字です。 +- `katakana-iroha` {{experimental_inline}} + - : カタカナの{{interwiki('wikipedia', 'いろは歌', 'いろは順')}}の文字です。 +- `korean-hangul-formal` {{experimental_inline}} + - : 韓国語のハングルの数値表記です。 +- `korean-hanja-formal` {{experimental_inline}} + - : 韓国語の公的な漢数字です。 +- `korean-hanja-informal` {{experimental_inline}} + - : 韓国語の漢数字です。 +- `lao`, `-moz-lao` + - : ラオス語の数値表記です。 +- `lower-armenian` {{experimental_inline}} + - : アルメニア語の小文字の数値表記です。 +- `malayalam`, `-moz-malayalam` + - : マラヤーラム語の数値表記です。 +- `mongolian` {{experimental_inline}} + - : モンゴル語の数値表記です。 +- `myanmar`, `-moz-myanmar` + - : ミャンマー語 (ビルマ語) の数値表記です。 +- `oriya`, `-moz-oriya` + - : オリヤー語の数値表記です。 +- `persian` {{experimental_inline}}, `-moz-persian` + - : ペルシャ語の数値表記です。 +- `simp-chinese-formal` {{experimental_inline}} + - : 公的な簡体字中国語の数値表記です。 +- `simp-chinese-informal` {{experimental_inline}} + - : 日常的な簡体字中国語の数値表記です。 +- `tamil` {{experimental_inline}}, `-moz-tamil` + - : タミル語の数値表記です。 +- `telugu`, `-moz-telugu` + - : テルグ語の数値表記です。 +- `thai`, `-moz-thai` + - : タイ語の数値表記です。 +- `tibetan` {{experimental_inline}}\* + - : チベット語の数値表記です。 +- `trad-chinese-formal` {{experimental_inline}} + - : 公的な繁体字中国語の数値表記です。 +- `trad-chinese-informal` {{experimental_inline}} + - : 日常的な繁体字中国語の数値表記です。 +- `upper-armenian` {{experimental_inline}}` + - : 伝統的なアルメニア語の大文字の数値表記です。 +- `disclosure-open` {{experimental_inline}} + - : {{HTMLElement("details")}} などの展開ウィジェットを開いていることを示す記号 +- `disclosure-closed` {{experimental_inline}} + - : {{HTMLElement("details")}} などの展開ウィジェットを閉じていることを示す記号 + +### 標準外の拡張 + +Mozilla (Firefox)、Blink (Chrome、Opera)、WebKit (Safari) では、他の言語のリストの種類に対応するために、さらにいくつかの定義済みの種類が提供されています。どのブラウザーがどの拡張に対応しているかを確認するには、互換性一覧表を参照してください。 + +- `-moz-ethiopic-halehame` +- `-moz-ethiopic-halehame-am` +- `ethiopic-halehame-ti-er`, `-moz-ethiopic-halehame-ti-er` +- `ethiopic-halehame-ti-et`, `-moz-ethiopic-halehame-ti-et` +- `hangul`, `-moz-hangul` +- `hangul-consonant`, `-moz-hangul-consonant` +- `urdu`, `-moz-urdu` + +## アクセシビリティの考慮 + +画面リーダーの [VoiceOver](https://help.apple.com/voiceover/info/guide/) には、 `list-style-type` の値に `none` が適用された順序なしリストをリストとして読み上げないという問題があります。リストが正しく読み上げられるようにするには、それぞれのリスト項目の前に[幅ゼロの空白](https://en.wikipedia.org/wiki/Zero-width_space)を[擬似コンテンツ](/ja/docs/Web/CSS/content)として追加する必要があります。これはデザインがバグ修正に影響されないことを保証し、リスト項目の表記が正しくなくなるわけではありません。 + +```css +ul { + list-style: none; +} + +ul li::before { + content: "\200B"; +} +``` + +- [VoiceOver and list-style-type: none – Unfettered Thoughts](https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/) +- [MDN WCAG の理解、ガイドライン 1.3 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways) +- [Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +

リスト項目マーカーの設定

+ +#### HTML + +```html +List 1 +
    +
  1. Hello
    2. +
  2. World
    3. +
  3. What's up?
    4. +
+ +List 2 +
    +
  1. Looks
    2. +
  2. Like
    3. +
  3. The
    4. +
  4. Same
    5. +
+``` + +#### CSS + +```css +ol.normal { + list-style-type: upper-alpha; +} + +/* or use the shortcut "list-style": */ +ol.shortcut { + list-style: upper-alpha; +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_list_item_markers","200","300")}} + +

リストスタイルのすべての種類

+ +#### HTML + +```html +
    +
  1. Apollo
    2. +
  2. Hubble
    3. +
  3. Chandra
    4. +
  4. Cassini-Huygens
    5. +
  5. Spitzer
    6. +
+ +

Choose a list style type:

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+``` + +#### CSS + +```css + +ol { + font-size: 1.2rem; +} + +.container { + column-count: 3; +} + +label { + display: block; +} + +input { + margin: .4rem; +} +``` + +#### JavaScript + +```js +const container = document.querySelector(".container"); +container.addEventListener("change", event => { + const list = document.querySelector("ol"); + list.setAttribute("style", `list-style-type: ${event.target.value}`); +}); +``` + +#### 結果 + +{{EmbedLiveSample("All_list_style_types", "600", "800")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}} -- cgit v1.2.3-54-g00ecf