From 17a945d301538d381470cf0fff8b835506a3cbfe Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 18 Jul 2021 16:49:49 +0900 Subject: conflicting/Learn/CSS 以下を削除 (#1474) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 各記事を 2021/07/10 時点の英語版に同期 - conflicting 版の記事は古いため削除 --- files/ja/_redirects.txt | 24 +- files/ja/_wikihistory.json | 22 -- .../learn/css/building_blocks/index.html | 332 --------------------- .../ja/conflicting/learn/css/css_layout/index.html | 286 ------------------ .../css/styling_text/styling_lists/index.html | 247 --------------- files/ja/learn/css/building_blocks/index.html | 45 +-- files/ja/learn/css/css_layout/index.html | 48 +-- .../css/styling_text/styling_lists/index.html | 144 ++++----- 8 files changed, 140 insertions(+), 1008 deletions(-) delete mode 100644 files/ja/conflicting/learn/css/building_blocks/index.html delete mode 100644 files/ja/conflicting/learn/css/css_layout/index.html delete mode 100644 files/ja/conflicting/learn/css/styling_text/styling_lists/index.html diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 2722dec78f..29deb06c2f 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -335,15 +335,15 @@ /ja/docs/CSS/Descendant_selectors /ja/docs/Web/CSS/Descendant_combinator /ja/docs/CSS/General_sibling_selectors /ja/docs/Web/CSS/General_sibling_combinator /ja/docs/CSS/Getting_Started /ja/docs/Learn/CSS -/ja/docs/CSS/Getting_Started/Boxes /ja/docs/conflicting/Learn/CSS/Building_blocks +/ja/docs/CSS/Getting_Started/Boxes /ja/docs/Learn/CSS/Building_blocks/The_box_model /ja/docs/CSS/Getting_Started/Cascading_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance /ja/docs/CSS/Getting_Started/Challenge_solutions /ja/docs/Web/Guide/CSS/Getting_started/Challenge_solutions /ja/docs/CSS/Getting_Started/Color /ja/docs/Learn/CSS/Building_blocks/Values_and_units#color /ja/docs/CSS/Getting_Started/Content /ja/docs/Learn/CSS/Howto/Generated_content /ja/docs/CSS/Getting_Started/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ja/docs/CSS/Getting_Started/JavaScript /ja/docs/conflicting/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -/ja/docs/CSS/Getting_Started/Layout /ja/docs/conflicting/Learn/CSS/CSS_layout -/ja/docs/CSS/Getting_Started/Lists /ja/docs/conflicting/Learn/CSS/Styling_text/Styling_lists +/ja/docs/CSS/Getting_Started/Layout /ja/docs/Learn/CSS/CSS_layout +/ja/docs/CSS/Getting_Started/Lists /ja/docs/Learn/CSS/Styling_text/Styling_lists /ja/docs/CSS/Getting_Started/Media /ja/docs/Web/Progressive_web_apps/Responsive/Media_types /ja/docs/CSS/Getting_Started/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors /ja/docs/CSS/Getting_Started/Tables /ja/docs/Learn/CSS/Building_blocks/Styling_tables @@ -3448,15 +3448,15 @@ /ja/docs/WOFF /ja/docs/Web/Guide/WOFF /ja/docs/Web-based_protocol_handlers /ja/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers /ja/docs/Web-d/Guide/CSS/Getting_started /ja/docs/Learn/CSS -/ja/docs/Web-d/Guide/CSS/Getting_started/Boxes /ja/docs/conflicting/Learn/CSS/Building_blocks +/ja/docs/Web-d/Guide/CSS/Getting_started/Boxes /ja/docs/Learn/CSS/Building_blocks/The_box_model /ja/docs/Web-d/Guide/CSS/Getting_started/Cascading_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance /ja/docs/Web-d/Guide/CSS/Getting_started/Challenge_solutions /ja/docs/Web/Guide/CSS/Getting_started/Challenge_solutions /ja/docs/Web-d/Guide/CSS/Getting_started/Color /ja/docs/Learn/CSS/Building_blocks/Values_and_units#color /ja/docs/Web-d/Guide/CSS/Getting_started/Content /ja/docs/Learn/CSS/Howto/Generated_content /ja/docs/Web-d/Guide/CSS/Getting_started/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ja/docs/Web-d/Guide/CSS/Getting_started/JavaScript /ja/docs/conflicting/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -/ja/docs/Web-d/Guide/CSS/Getting_started/Layout /ja/docs/conflicting/Learn/CSS/CSS_layout -/ja/docs/Web-d/Guide/CSS/Getting_started/Lists /ja/docs/conflicting/Learn/CSS/Styling_text/Styling_lists +/ja/docs/Web-d/Guide/CSS/Getting_started/Layout /ja/docs/Learn/CSS/CSS_layout +/ja/docs/Web-d/Guide/CSS/Getting_started/Lists /ja/docs/Learn/CSS/Styling_text/Styling_lists /ja/docs/Web-d/Guide/CSS/Getting_started/Media /ja/docs/Web/Progressive_web_apps/Responsive/Media_types /ja/docs/Web-d/Guide/CSS/Getting_started/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors /ja/docs/Web-d/Guide/CSS/Getting_started/Tables /ja/docs/Learn/CSS/Building_blocks/Styling_tables @@ -4155,15 +4155,15 @@ /ja/docs/Web/CSS/Flexible_boxes /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox /ja/docs/Web/CSS/General_sibling_selectors /ja/docs/Web/CSS/General_sibling_combinator /ja/docs/Web/CSS/Getting_started /ja/docs/Learn/CSS -/ja/docs/Web/CSS/Getting_started/Boxes /ja/docs/conflicting/Learn/CSS/Building_blocks +/ja/docs/Web/CSS/Getting_started/Boxes /ja/docs/Learn/CSS/Building_blocks/The_box_model /ja/docs/Web/CSS/Getting_started/Cascading_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance /ja/docs/Web/CSS/Getting_started/Challenge_solutions /ja/docs/Web/Guide/CSS/Getting_started/Challenge_solutions /ja/docs/Web/CSS/Getting_started/Color /ja/docs/Learn/CSS/Building_blocks/Values_and_units#color /ja/docs/Web/CSS/Getting_started/Content /ja/docs/Learn/CSS/Howto/Generated_content /ja/docs/Web/CSS/Getting_started/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ja/docs/Web/CSS/Getting_started/JavaScript /ja/docs/conflicting/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -/ja/docs/Web/CSS/Getting_started/Layout /ja/docs/conflicting/Learn/CSS/CSS_layout -/ja/docs/Web/CSS/Getting_started/Lists /ja/docs/conflicting/Learn/CSS/Styling_text/Styling_lists +/ja/docs/Web/CSS/Getting_started/Layout /ja/docs/Learn/CSS/CSS_layout +/ja/docs/Web/CSS/Getting_started/Lists /ja/docs/Learn/CSS/Styling_text/Styling_lists /ja/docs/Web/CSS/Getting_started/Media /ja/docs/Web/Progressive_web_apps/Responsive/Media_types /ja/docs/Web/CSS/Getting_started/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors /ja/docs/Web/CSS/Getting_started/Tables /ja/docs/Learn/CSS/Building_blocks/Styling_tables @@ -4355,14 +4355,14 @@ /ja/docs/Web/Guide/CSS/Counters /ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters /ja/docs/Web/Guide/CSS/Flexible_boxes /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox /ja/docs/Web/Guide/CSS/Getting_started /ja/docs/Learn/CSS -/ja/docs/Web/Guide/CSS/Getting_started/Boxes /ja/docs/conflicting/Learn/CSS/Building_blocks +/ja/docs/Web/Guide/CSS/Getting_started/Boxes /ja/docs/Learn/CSS/Building_blocks/The_box_model /ja/docs/Web/Guide/CSS/Getting_started/Cascading_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance /ja/docs/Web/Guide/CSS/Getting_started/Color /ja/docs/Learn/CSS/Building_blocks/Values_and_units#color /ja/docs/Web/Guide/CSS/Getting_started/Content /ja/docs/Learn/CSS/Howto/Generated_content /ja/docs/Web/Guide/CSS/Getting_started/How_CSS_works /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ja/docs/Web/Guide/CSS/Getting_started/JavaScript /ja/docs/conflicting/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -/ja/docs/Web/Guide/CSS/Getting_started/Layout /ja/docs/conflicting/Learn/CSS/CSS_layout -/ja/docs/Web/Guide/CSS/Getting_started/Lists /ja/docs/conflicting/Learn/CSS/Styling_text/Styling_lists +/ja/docs/Web/Guide/CSS/Getting_started/Layout /ja/docs/Learn/CSS/CSS_layout +/ja/docs/Web/Guide/CSS/Getting_started/Lists /ja/docs/Learn/CSS/Styling_text/Styling_lists /ja/docs/Web/Guide/CSS/Getting_started/Media /ja/docs/Web/Progressive_web_apps/Responsive/Media_types /ja/docs/Web/Guide/CSS/Getting_started/Selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors /ja/docs/Web/Guide/CSS/Getting_started/Tables /ja/docs/Learn/CSS/Building_blocks/Styling_tables diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index dd6adbe04c..1d3e84cd70 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -48159,28 +48159,6 @@ "silverskyvicto" ] }, - "conflicting/Learn/CSS/Building_blocks": { - "modified": "2019-03-23T23:30:41.701Z", - "contributors": [ - "tyahha", - "teoli", - "ethertank" - ] - }, - "conflicting/Learn/CSS/CSS_layout": { - "modified": "2019-03-23T23:30:42.231Z", - "contributors": [ - "teoli", - "ethertank" - ] - }, - "conflicting/Learn/CSS/Styling_text/Styling_lists": { - "modified": "2019-03-23T23:30:43.174Z", - "contributors": [ - "teoli", - "ethertank" - ] - }, "conflicting/Learn/Getting_started_with_the_web/JavaScript_basics": { "modified": "2019-03-23T23:21:46.830Z", "contributors": [ diff --git a/files/ja/conflicting/learn/css/building_blocks/index.html b/files/ja/conflicting/learn/css/building_blocks/index.html deleted file mode 100644 index bcf27043b9..0000000000 --- a/files/ja/conflicting/learn/css/building_blocks/index.html +++ /dev/null @@ -1,332 +0,0 @@ ---- -title: Boxes -slug: conflicting/Learn/CSS/Building_blocks -tags: - - CSS - - CSS:Getting_Started -translation_of: Learn/CSS/Building_blocks -translation_of_original: Web/Guide/CSS/Getting_started/Boxes -original_slug: Web/Guide/CSS/Getting_started/Boxes ---- -
{{CSSTutorialTOC}}
- -

{{previousPage("/ja/docs/CSS/Getting_Started/Lists", "Lists")}} これは CSS Getting Started チュートリアルの第11章です。ここでは、要素が表示されるとき、要素の占めるスペースを CSS で操作する方法について述べます。実際に文書を作り、間隔の調整や装飾ルールの追加を試してください。

- -

ボックスについて

- -

ブラウザに表示されると、要素は一定のスペースを占有します。このスペースは4つの部分で構成されています。

- -

中央に、要素（element）がその内容を表示するのに必要なスペースがあります。その周りに パディング（padding） があり、その周りに ボーダー（border） があります。その周りには マージン（margin） があって、他要素とその要素を隔てています。

- - - - - - - - -
-
-

マージン

- -

ボーダー

- -
-

パディング

- -
-

要素

-
-
-
- -

薄い灰色がレイアウトの部品を示します。

- 		-
-

 

- -

 

- -
-

 

- -
-

要素

-
-
-
- -

ブラウザではこう見えます。

-
- -

パディング、ボーダー、マージンは要素の上下左右で異なるサイズにできます。一部または全部をゼロにすることもできます。

- -

彩色

- -

パディングは常に要素の背景色と同じ色です。このため背景色を設定すると、その色は要素自身とそのパディングに適用されます。マージンは常に透明です。

- - - - - - - - -
-
-

マージン

- -

ボーダー

- -
-

パディング

- -
-

要素

-
-
-
- -

要素の背景色は緑です。

- 		-
-

 

- -

 

- -
-

 

- -
-

要素

-
-
-
- -

ブラウザではこう見えます。

-
- -

ボーダー

- -

ボーダーを使って、要素を線や枠囲みで装飾できます。

- -

要素の境界線をすべて同じにするには、{{cssxref("border")}} プロパティを使います。幅（画面表示されるときの単位は通常 pixel です）、スタイル、色を定義します。

- -

選べるスタイル:

- - - - - - - - - - - - - - - - -
-
solid
- 		-
dotted
- 		-
dashed
- 		-
double
-
-
inset
- 		-
outset
- 		-
ridge
- 		-
groove
-
- -

また、スタイルを none か hidden にして、明示的にボーダーを消したり、色を transparent にして、レイアウトを変えずにボーダーを透明にしたりできます。

- -

一辺ずつボーダーを定義するには、次のプロパティを使います: {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}}。これを使うと、一辺だけボーダーを定義したり、辺ごとに違うボーダーを定義したりできます。

- -
-
例
- -

次のルールは、見出し要素の背景色と上辺のボーダーを定義します:

- -
h3 {
-  border-top: 4px solid #7c7; /* mid green */
-  background-color: #efe;     /* pale green */
-  color: #050;                /* dark green */
-}
- -

結果は次のようになります:

- - - - - - - -
-

スタイルつきの見出し

-
- -

次のルールは、画像をミッドグレーの枠で取り囲んで見やすくします:

- -
img {border: 2px solid #ccc;}
-
-
- -

結果は次のようになります:

- - - - - - - - -
画像:Image:Blue-rule.png
- -

マージンとパディング

- -

マージンとパディングで要素の位置を調整し、周りに余白を作ります。

- -

{{cssxref("margin")}} プロパティと {{cssxref("padding")}} プロパティでそれぞれ、マージンの幅、パディングの幅を設定します。

- -

幅を一つだけ記述すると、要素の全ての枠（top（上辺）、right（右辺）、bottom（下辺）、left（左辺））に適用されます。

- -

幅を2つ記述すると、1番目が top と bottom に、2番めが right と left に適用されます。

- -

4つすべての幅を定義するには、次の順番で記述します: top、 right、bottom、left

- -
-
例
- -

次のルールは、remark クラスを持つ段落に、四辺すべてを囲むような赤い枠を与えます。

- -

パディングで囲むことで、テキストから枠が少し離れます。

- -

左マージンは段落を他のテキストからインデントします:

- -
p.remark {
-  border: 2px solid red;
-  padding: 4px;
-  margin-left: 24px;
-  }
-
- -

結果は次のようになります:

- - - - - - - -
-

ここは通常の段落です。

- -

ここは remark 用の段落です。

-
-
- -
-
さらに詳しく
- -

マージンとパディングで要素の配置方法を調整すると、そのスタイルのルールとブラウザのデフォルトが、複雑な方法で相互作用します。

- -

ブラウザによって、要素の配置方法が異なります。スタイルシートで変えなければ、結果は同じに見えるかもしれません。このため、時折スタイルシートのもたらす結果に驚くことがあります。

- -

望む結果を得るには、文書のマークアップを変更する必要があるかもしれません。このチュートリアルの次のページで、このことについてもっと触れています。

- -

パディング、マージン、ボーダーについての詳しい情報は、リファレンスの ボックスモデル をご覧ください。

-
- -

実習: ボーダーの追加

- -

CSS ファイル style2.css を編集します。次のルールを追加して、見出しのそれぞれで、ページを横切る線を描くようにしてください:

- -
h3 {border-top: 1px solid gray;}
-
- -

前のページのチャレンジを終えていれば、そこで作ったルールを編集するか、次の新しいルールを追加して、各リスト項目の真下にスペースを置くようにしてください:

- -
li {
-  list-style: lower-roman;
-  margin-bottom: 8px;
-  }
-
- -

ブラウザを更新すると次の結果になります:

- - - - - - - -
-

(A) The oceans

- -
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
- -

(B) Numbered paragraphs

- -

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
- -
-
チャレンジ
- -

スタイルシートに一つルールを追加して、リスト項目全体を囲むような広い枠を作り、海を連想するような色にしてください — 次のような感じです:

- - - - - - - -
-

(A) The oceans

- -
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

(B) Numbered paragraphs

- -

. . .

-
- -

（幅や色を正確に同じにする必要はありません。）

-
- -

このチャレンジの解答を見る。

- -

さて次は？

- -

{{nextPage("/ja/docs/CSS/Getting_Started/Layout", "Layout")}}マージンやパディングを指定して、文書のレイアウトを変えることができました。次のページでは、他の方法で文書の レイアウト を変えます。

diff --git a/files/ja/conflicting/learn/css/css_layout/index.html b/files/ja/conflicting/learn/css/css_layout/index.html deleted file mode 100644 index 12c74ae6e2..0000000000 --- a/files/ja/conflicting/learn/css/css_layout/index.html +++ /dev/null @@ -1,286 +0,0 @@ ---- -title: Layout -slug: conflicting/Learn/CSS/CSS_layout -tags: - - CSS - - CSS:Getting_Started -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout -original_slug: Web/Guide/CSS/Getting_started/Layout ---- -
- {{CSSTutorialTOC}} {{previousPage("/ja/docs/CSS/Getting_Started/Boxes", "Boxes")}}
-

これは CSS Getting Started チュートリアルの第 12 章です。ここでは、文書のレイアウトを調整する方法をいくつか述べます。サンプル文書のレイアウトを変えてみましょう。

-

レイアウトについて

-

CSS を使うと、文書のレイアウトを変えるような様々な視覚効果を定義できます。レイアウト定義の手法には、上級者向けで、この基本チュートリアルの範疇を超えるようなものもあります。

-

多くのブラウザで同じ見た目になるようレイアウトを設計すると、スタイルシートはブラウザのデフォルトのスタイルシートやレイアウトエンジンと、入り組んだ方法で相互作用します。これもまた基本チュートリアルの範疇を超えた、上級者向けの話題です。

-

このページでは、あなたが試せるような簡単な技法をいくつか述べます。

-

文書の構造

-

文書のレイアウトを操作するなら、その構造を変える必要があるかもしれません。

-

お使いのマークアップ言語には、構造化のための汎用タグがあるかもしれません。たとえば、HTML では構造化に {{HTMLElement("div")}} 要素を使うことができます。

-
-
- 例
-

サンプル文書では、2 番目の見出しの下にある、番号づけされた段落はどれも、入れ物に入っていません。

-

セレクタで指定する要素がないため、スタイルシートでこれらの段落の周囲に枠を描くことができません。

-

この構造的な問題を直すために、段落の周りに {{HTMLElement("div")}} タグを一つ追加します。このタグは一意で、id 属性で見分けられます。

- 
<h3>Numbered paragraphs</h3>
-<div id="numbered">
-  <p>Lorem ipsum</p>
-  <p>Dolor sit</p>
-  <p>Amet consectetuer</p>
-  <p>Magna aliquam</p>
-  <p>Autem veleum</p>
-</div>
-
-

これで、両方のリストの周りに枠を定義するルールをスタイルシートに追加できます。

- 
ul, #numbered {
-  border: 1em solid #69b;
-  padding-right:1em;
-}
-
-

結果は次のようになります:

- - - - - - -
-

(A) The oceans

-
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
-

(B) Numbered paragraphs

-
-

1: Lorem ipsum

-

2: Dolor sit

-

3: Amet consectetuer

-

4: Magna aliquam

-

5: Autem veleum

-
-
-
-

サイズの単位（Size units）

-

このチュートリアルではこれまで、サイズを pixels (px) で定義してきました。これはコンピューターの画面のようなディスプレイデバイスでの用途にはふさわしいものです。しかし、ユーザがフォントサイズを変えると、レイアウトがおかしくなる可能性があります。

-

多くの用途で、サイズをパーセンテージか ems (em) で定義するのがよいでしょう。em は通常、現在のフォントサイズを指します（文字 m の幅）。ユーザがフォントサイズを変えると、レイアウトが自動的に調整されます。

-
-
- 例
-

次のテキストの左辺のボーダーは pixel 単位のサイズで定義されています。

-

右辺のボーダーは ems 単位のサイズで定義されています。

-

ブラウザの表示フォントサイズを変えて、右辺のボーダーが調整されることと、左辺のボーダーはされないことを確認してください:

- - - - - - -
-
- 僕の大きさを変えてお願い
-
-
-
-
- さらに詳しく
-

その他のデバイスには、これ以外の長さの単位が適しています。

-

これについては、このチュートリアルの後半のページにもっと情報があります。

-

すべての利用可能な値と単位の詳細は、CSS 仕様書の Values をご覧ください。

-
-

テキストのレイアウト

-

2 つのプロパティで、要素の内容がどのように文字寄せされるか定義します。これは、単純なレイアウトの調整にも使えます。

-
-
- {{cssxref("text-align")}}
-
- 文字寄せを行います。次のうちいずれかの値を使います: left, right, center, justify
-
- {{cssxref("text-indent")}}
-
- 指定した幅でインデントを行います。
-
-

これらのプロパティは要素内のテキストだけではなく、テキストに似たコンテンツにも適用されます。これらのルールが要素の子に継承されることを忘れないでください。結果を見て驚かないように、子要素で明示的にこれらをオフにする必要があるかもしれません。

-
-
- 例: 見出しを中央寄せする
- 
h3 {
-  border-top: 1px solid gray;
-  text-align: center;
-}
-
-

表示結果:

- - - - - - -
-

(A) The oceans

-
-

HTML 文書では、見出しの下に見える内容は構造的には見出しに含まれていません。したがって見出しを文字寄せしても、見出しの下にあるタグにそのスタイルは継承されません。

-
-

フロート（Floats、浮動体）

-

{{cssxref("float")}} プロパティは、要素を左または右に押しつけます。これは要素の位置やサイズを操作する簡単な方法です（以降、float 指定された要素のことをフローティング要素と呼びます）。

-

文書の残りのコンテンツは通常、フローティング要素の周囲に流れ込み（flow）ます。{{cssxref("clear")}} プロパティを使うと、残りの要素をフローティング要素から離して、この流れを制御できます。

-
-
- 例
-

サンプル文書では、リストはウィンドウいっぱいに広がります。これは、左側に浮動させると回避できます。

-

見出しを定位置に留めるには、その左側にあるフローティング要素から、見出しを離れさせるような定義も必要です。

- 
ul,
-#numbered { float: left; }
-h3 { clear: left; }
-
-
-

結果は次のようになります:

- - - - - - -
-

(A) The oceans

-
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
-

(B) Numbered paragraphs

-
-

1: Lorem ipsum

-

2: Dolor sit

-

3: Amet consectetuer

-

4: Magna aliquam

-

5: Autem veleum

-
-
-

（ボックスの右側でボーダーがテキストに近すぎるので、少しパディングが必要です）

-

位置取り

-

{{cssxref("position")}} プロパティと次の値のうちの 1 つを指定すると、要素の位置を 4 つの方法で定義できます。

-

これは高度なプロパティです。基本チュートリアルで取り上げるのは、これが簡単に使えるためです。しかし、複雑なレイアウトに使うなら難しくなります。

-
-
- relative
-
- 相対的。要素の位置は通常位置に比べて相対的に移動します。指定量だけ要素を動かす場合にこれを使ってください。場合によっては、要素のマージンを使って同じ効果が得られることがあります。
-
- fixed
-
- 固定。要素の位置は固定されます。文書のウィンドウに対する相対値で指定してください。文書の他の部分がスクロールしても、要素は固定されたままです。
-
- absolute
-
- 絶対的。要素は祖先要素の内、直近のポジショニング要素 (position プロパティの値が relative、fixed 、absolute の何れかの要素 ) に対する絶対位置に、もしくはポジショニング要素が無い場合はルート要素に対する絶対位置に配置されます。親要素自身に位置指定が必要無い場合には position:relative を用いる事により親要素自身への影響を回避できます。
-
- static
-
- 静止。デフォルトです。明示的に位置づけをオフにしたいときにこの値を使ってください。
-
-

position プロパティ（static を除く）の値といっしょに、次のプロパティから一つかそれ以上を指定します: top 、 right 、 bottom 、 left 、 width 、 height これにより、要素の現れる場所やおそらくはそのサイズも指定します。

-
-
- 例: 複数の要素を重ねる
-

2 つの要素を重なり合うように位置づけるには、文書に入れ物になる親要素を作り、その中に 2 つの要素を入れます:

- 
<div id="parent-div">
-  <p id="forward">/</p>
-  <p id="back">\</p>
-</div>
-
-

スタイルシートで、親要素の position を relative にします。移動量を指定する必要はありません。子要素の position を absolute にします。

- 
#parent-div {
-  position: relative;
-  font: bold 200% sans-serif;
-}
-
-#forward, #back {
-  position: absolute;
-  margin: 0; /* 要素の周囲のマージンを 0 に */
-  top: 0; /* 上部からの距離 */
-  left: 0; /*  左部からの距離 */
-}
-
-#forward {
-  color: blue;
-}
-
-#back {
-  color: red;
-}
-
-

結果は、スラッシュの上にバックスラッシュが乗り、次のようになります。

-
-

/

-

\

-
- - - - - - -
 
-
-
-
- さらに詳しく
-

位置決めに関する完全な記事は、 CSS 仕様書の複雑な 2 つの章: Visual formatting model と Visual formatting model details にあります。

-

多くのブラウザで機能するようにスタイルシートをデザインするつもりなら、ブラウザごとの標準の解釈の仕方や、おそらくは特定ブラウザの特定バージョンのバグについても考慮する必要があります。

-
-

実習: レイアウトの定義

-
    -
  1. サンプル文書 doc2.html と スタイルシート style2.css を、上の『文書の構造』と『フロート』の各章にある例を使って変更してください。
    2. -
  2. フロート の例にパディングを追加し、右のボーダーからテキストを 0.5em 離してください。
    3. -
-
-
- チャレンジ
-

サンプル文書 doc2.html を変更して、文書の末尾近く、</body> の直前に次のタグを追加します。

- 
<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
-
-

もし初めの方のチュートリアルで画像ファイルをダウンロードしていなければ、いま行なって、他のサンプルファイルと同じディレクトリに置いてください。

-

-

画像が文書内のどこに現れるか予測してみてください。ブラウザを更新して、予測が正しかったかどうかを見ます。

-

スタイルシートにルールを追加して、文書の右上に画像が置かれるようにしてください。

-

ブラウザを更新し、ウィンドウを小さくします。文書をスクロールしても、画像が右上に留まることを確認しましょう。

-
-
-

(A) The oceans

-
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
-

(B) Numbered paragraphs

-
-

1: Lorem ipsum

-

2: Dolor sit

-

3: Amet consectetuer

-

4: Magna aliquam

-

5: Autem veleum

-
-

 

-
- Yellow map pin
-
-
-
-

このチャレンジの解答を見る

-

さて次は？

-

{{nextPage("/ja/docs/CSS/Getting_Started/Tables", "Tables")}} あなたは、この基本チュートリアルのほとんどすべてのトピックスを踏破しました。次のページでは CSS ルールのもっと高度なセレクタと、テーブル のスタイルづけに特有のやり方をいくつか述べます。

diff --git a/files/ja/conflicting/learn/css/styling_text/styling_lists/index.html b/files/ja/conflicting/learn/css/styling_text/styling_lists/index.html deleted file mode 100644 index 96e52770b5..0000000000 --- a/files/ja/conflicting/learn/css/styling_text/styling_lists/index.html +++ /dev/null @@ -1,247 +0,0 @@ ---- -title: Lists -slug: conflicting/Learn/CSS/Styling_text/Styling_lists -tags: - - CSS - - CSS:Getting_Started -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/Lists -original_slug: Web/Guide/CSS/Getting_started/Lists ---- -

{{ CSSTutorialTOC() }}

-

{{ previousPage("/ja/docs/CSS/Getting_Started/Content", "Content") }} これは CSS Getting Started チュートリアルの第10章です。CSS を使ってリストの外見を決める方法について述べます。リストを含む新しいサンプル文書と、リストの体裁を決めるスタイルシートを作ってください。

-

リストについて

-

前章 のチャレンジでは、どの要素の直前にでも、コンテンツを追加してリスト項目のように表示する方法がわかりました。

-

CSS にはリスト用に作られた特別なプロパティがあります。使えるときには使ったほうがたいてい便利です。

-

リストにスタイルを定義するには、{{ cssxref("list-style") }} プロパティを使ってマーカーの種類を指定します。

-

CSS ルールでは、セレクタにリスト項目要素を選ぶこともできますし（例：{{ HTMLElement("li") }}）、親のリスト要素を選んで、リスト要素がスタイルを継承するようにもできます（例：{{ HTMLElement ("ul") }}））。

-

箇条書きリスト（unordered list）

-

箇条書きリストでは、すべてのリスト項目に同じ方法でマーカーがつきます。

-

CSS には3種類のマーカーがあり、ブラウザは次のように表示します:

- -

もしくは、画像の URL を指定できます。

-
-
- 例
-

次のルールはリスト項目のクラス別に異なったマーカーを定義します:

- 
li.open {list-style: circle;}
-li.closed {list-style: disc;}
-
-

リスト内でこれらのクラスを使うと、open と closed の項目の区別がはっきりします（例：to-doリスト):

- 
<ul>
-  <li class="open">Lorem ipsum</li>
-  <li class="closed">Dolor sit</li>
-  <li class="closed">Amet consectetuer</li>
-  <li class="open">Magna aliquam</li>
-  <li class="closed">Autem veleum</li>
-</ul>
-
-

結果は次のようになるでしょう:

- - - - - - -
-
    -
  • Lorem ipsum
    • -
  • Dolor sit
    • -
  • Amet consectetuer
    • -
  • Magna aliquam
    • -
  • Autem veleum
    • -
-
-
-

番号順リスト（ordered lists）

-

番号順リストでは、リスト項目は各々違ったマーカーをつけられ、順番を表します。

-

マーカーの種類を定義するには {{ cssxref("list-style") }} プロパティを使ってください:

- -
-
- 例
-

これは info クラスの {{ HTMLElement("ol") }} 要素についてのルールで、項目が大文字のアルファベットで識別されます。

- 
ol.info {list-style: upper-latin;}
-
-

リスト内の {{ HTMLElement("li") }} 要素はこのスタイルを継承します:

- - - - - - -
-
    -
  • Lorem ipsum
    • -
  • Dolor sit
    • -
  • Amet consectetuer
    • -
  • Magna aliquam
    • -
  • Autem veleum
    • -
-
-
-
-
- さらに詳しく
-

{{ cssxref("list-style") }} は略記用のプロパティです。複雑なスタイルシートでは、値ごとに個別のプロパティを使いたくなるかもしれません。これら個別のプロパティや、CSS がリストを定義する方法については、リファレンス {{ cssxref("list-style") }} をご覧ください。

-

箇条書きリスト ({{ HTMLElement("ul") }}) や番号リスト ({{ HTMLElement("ol") }}) の慣例的なタグを定めている HTML のようなマークアップ言語を使うなら、その意図通りにタグを使うのはよい練習になります。しかしながら、CSSでは お望みであれば {{ HTMLElement("ul") }} に番号リストを表示させたり、{{ HTMLElement("ol") }} に箇条書きリストを表示させたりもできます。

-

リストのスタイルづけはブラウザによって実装方法が異なります。どのブラウザでも同じ結果が出るとは思わないでください。

-
-

カウンター

-
-

注:  一部のブラウザーはカウンターをサポートしていません。Quirks Mode site の CSS contents and browser compatibility ページに、カウンターや他の CSS 機能についてのブラウザの実装状況の詳しい表があります。このサイトの CSS Reference の各ページにもブラウザ実装状況の表があります。

-
-

カウンターはリスト項目だけでなく、どの要素にも番号をつけられます。例えば、ある文書では見出しや章を数えたいかもしれません。

-

通し番号を定義するには、独自に名前をつけた counter が必要です。

-

カウントが開始されるより前の要素のいずれかで、{{ cssxref("counter-reset") }} プロパティとカウンター名を使ってカウンターをリセットしてください。これは数える要素の親で行うのが適していますが、リスト項目より前に現れる要素ならどれでも使えます。

-

番号が増える要素の各々に {{ cssxref("counter-increment") }} プロパティとカウンター名を使ってください。

-

カウンターを表示するには、セレクタに {{ cssxref(":before") }} または {{ cssxref(":after") }} を追加し、content プロパティを使います（前のページ コンテンツ で行った要領です）。

-

content プロパティの値として、counter() とカウンター名を記述します。オプションとして種類を記述します。種類は上の 番号順リスト の欄にあるものと同じです。

-

通常、カウンターを表示する要素もまたカウンターを増やします。

-
-
- 例
-

次のルールは numbered クラスを持つ {{ HTMLElement("h3") }} 要素が現れるたびにカウンターを初期化します:

- 
h3.numbered {counter-reset: mynum;}
-
-

 

-

次のルールは numbered クラスを持つ {{ HTMLELement("p") }} 要素が現れるたびにカウンターを表示し、番号を増やします:

- 
p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;}
-
-

結果は次のようになります:

- - - - - - -
Heading
-

1: Lorem ipsum

-

2: Dolor sit

-

3: Amet consectetuer

-

4: Magna aliquam

-

5: Autem veleum

-
-
-
-
- さらに詳しく
-

読者がみな、カウンターをサポートするブラウザを使っているとわからなければ、カウンターは使えません。

-

カウンターを使えると、リストの項目と切り離してカウンターにスタイルをつけられる利点があります。上の例では、カウンターは太字ですがリスト項目は違います。

-

もっと複雑な方法でカウンターを使えます — 例えば、様式に沿う文書の章、見出し、サブ見出し、段落を数えます。詳しくは、CSS 仕様書の Automatic counters and numbering をご覧ください。

-
-

実習: スタイルづけされたリスト

-

新しいHTML文書、doc2.html を作成してください。次の内容をコピー＆ペーストします:

-
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title>Sample document 2</title>
-    <link rel="stylesheet" href="style2.css">
-  </head>
-  <body>
-
-    <h3 id="oceans">The oceans</h3>
-    <ul>
-      <li>Arctic</li>
-      <li>Atlantic</li>
-      <li>Pacific</li>
-      <li>Indian</li>
-      <li>Southern</li>
-    </ul>
-
-    <h3 class="numbered">Numbered paragraphs</h3>
-    <p class="numbered">Lorem ipsum</p>
-    <p class="numbered">Dolor sit</p>
-    <p class="numbered">Amet consectetuer</p>
-    <p class="numbered">Magna aliquam</p>
-    <p class="numbered">Autem veleum</p>
-
-  </body>
-</html>
-
-

新しいスタイルシート、style2.css を作成してください。次の内容をコピー＆ペーストします:

-
/* numbered paragraphs */
-h3.numbered {counter-reset: mynum;}
-
-p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;
-}
-
-

レイアウトやコメントが気に入らなければ変えてください。

-

ブラウザで文書を開きます。カウンター対応のブラウザなら下の例に似たものが見えるでしょう。非対応のブラウザなら、数字が見えません（おそらくコロンも）:

- - - - - - -
-

The oceans

-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-

Numbered paragraphs

-

1: Lorem ipsum

-

2: Dolor sit

-

3: Amet consectetuer

-

4: Magna aliquam

-

5: Autem veleum

-
-
-
- チャレンジ
-

スタイルシートに一つルールを追加して、リスト項目に i から v のローマ数字で番号をつけてください:

- - - - - - -
-

The oceans

-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
-

 

-

次のように、見出しを括弧内の大文字のアルファベットで識別するように、スタイルシートを変更してください:

- - - - - - -
-

(A) The oceans

-

. . .

-

(B) Numbered paragraphs

-

. . .

-
-
-

チャレンジの解答を見る。

-

さて次は？

-

{{ nextPage("/ja/docs/CSS/Getting_Started/Boxes", "ボックス") }} 文書を表示するとき、ブラウザは要素をページ上に並べる際に、要素を囲むようにスペースを作ります。次のページでは、要素の基礎となる形である ボックス（boxes）を CSS で扱う方法について述べます。

diff --git a/files/ja/learn/css/building_blocks/index.html b/files/ja/learn/css/building_blocks/index.html index 3094d16d9c..0a6c343bdd 100644 --- a/files/ja/learn/css/building_blocks/index.html +++ b/files/ja/learn/css/building_blocks/index.html @@ -14,30 +14,39 @@ translation_of: Learn/CSS/Building_blocks

ここでの目的は、テキストの装飾や CSS レイアウトなどのより具体的な分野に進む前に、適切な CSS を書くための手法を知り、すべての重要な理論を理解できるようになることです。

-

前提知識

+
+

フロントエンドのウェブ開発者を目指している方へ

-

このモジュールを始めるまえに、つぎの状態になっておくべきです。

+

目標に向かって努力するために必要なすべての必須情報を含むコースをまとめました。

+ +

始めましょう

+ +
+ +

前提知識

+ +

このモジュールを始める前に、次のものを身につけておいてください。

    -
  1. コンピューターの使い方と（ウェブを見たりコンテンツを消費したりといった）ウェブの受動的な使い方に関する基本的な知識に慣れ親しんでいること。
    2. -
  2. 基本的なソフトウェアのインストールで説明されている基本的な作業環境と、ファイルの扱い方で説明されているファイルの作り方や管理の仕方について理解していること。
    3. +
  3. コンピューターの使い方と (ウェブを見たりコンテンツを消費したりといった) ウェブの受動的な使い方に関する基本的な知識に慣れ親しんでいること。
    4. +
  4. 基本的なソフトウェアのインストールで説明されている基本的な作業環境と、ファイルの扱い方で説明されているファイルの作り方や管理の仕方について理解していること。
  5. HTML 入門で説明されている HTML についての基礎知識に慣れ親しんでいること。
  6. CSS の第一歩で説明されている CSS の基本について理解していること。
-

注: 自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは JSBin や Glitch といったオンラインコーディングプログラムで試すことが可能です

+

注: 自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは JSBin や Glitch といったオンラインコーディングプログラムで試すことが可能です

-

ガイド

+

ガイド

-

このモジュールは CSS 言語のもっとも重要な部分をカバーする以下の記事で構成されます。各記事には理解度を試すエクササイズも含まれます。

+

このモジュールは、 CSS 言語のもっとも重要な部分をカバーする以下の記事で構成されています。各記事には理解度を試す練習問題も含まれています。

カスケードと継承
-
このレッスンでの目的は、CSS を HTML に適用する方法と競合した場合の解決方法について、もっとも基本的な概念（カスケード・詳細度・継承）の理解を深めていくことです。
+
このレッスンでの目的は、CSS を HTML に適用する方法と競合した場合の解決方法について、もっとも基本的な概念 (カスケード・詳細度・継承) の理解を深めていくことです。
CSS セレクター
-
CSS セレクターにはさまざまな種類があり、スタイルを設定する要素を厳密に指定することができます。この記事と以下のサブ記事では、それらがどのように機能するかを詳しく見ていきます。サブ記事は以下の通りです: +
CSS セレクターにはさまざまな種類があり、スタイルを設定する要素を厳密に指定することができます。この記事と以下のサブ記事では、それらがどのように機能するかを詳しく見ていきます。サブ記事は以下の通りです。
  • 要素・クラス・ID によるセレクター
  • 属性によるセレクター
    • @@ -51,10 +60,10 @@ translation_of: Learn/CSS/Building_blocks
    このレッスンでは、CSS の背景と枠線を使ってできるクリエイティブなことをいくつか見ていきます。グラデーションや背景画像や角丸について、背景と枠線は CSS のスタイリングに関する多くの疑問の解決策です。
    テキスト方向の操作
    近年では、右から左へだけでなく上から下へのコンテンツ（日本語など）を含むコンテンツのさまざまな向きをより適切にサポートするために CSS サポートが進化しています。これらのさまざまな向きの考え方については "writing modes" と呼ばれます。レイアウトの学習を進めて進めていくと "writing modes" の理解がとても役に立っていきますので、この記事ではそれらを紹介していきます。
    -
    要素のはみ出し（オーバーフロー）
    -
    このレッスンでは、CSS のもう 1 つの重要な概念である オーバーフロー（overflow）を見ていきます。オーバーフローは、ボックス内にコンテンツが収まりきらないときに発生します。このガイドでは、その詳細とそれらについてどのように対処するかを学びます。
    +
    コンテンツのはみ出し (オーバーフロー)
    +
    このレッスンでは、CSS のもう 1 つの重要な概念である オーバーフロー (overflow) を見ていきます。オーバーフローは、ボックス内にコンテンツが収まりきらないときに発生します。このガイドでは、その詳細とそれらについてどのように対処するかを学びます。
    CSS の値と単位
    -
    CSS で使用されるすべてのプロパティには、特定の値または値の組み合わせのみが許可されます。このレッスンでは、もっともよく使用される値と単位について見ていきます。
    +
    CSS で使用されるすべてのプロパティには、特定の値または値の組み合わせのみが許可されます。このレッスンでは、もっともよく使用される値と単位について見ていきます。
    CSS によるサイズ設定
    これまでのさまざまなレッスンで、CSS を使用してウェブページ上の項目のサイズを調整するいくつかの方法に出会いました。デザイン作業をしていくうえで、それぞれの手法がどれほど大きく異なっているのかを理解することが重要です。このレッスンでは、CSS によって要素のサイズを設定する方法をまとめ、サイジングに役立ついくつかの用語を定義します。
    画像・メディア・フォーム要素
    @@ -67,22 +76,22 @@ translation_of: Learn/CSS/Building_blocks
    スタイルシートやプロジェクトが大きい状態で作業しはじめると、巨大な CSS ファイルを維持するのが難しいことがわかります。この記事では、保守しやすい CSS を書くためのベストプラクティスと、他の人が保守性を向上させるための解決策の一部を紹介します。
-

評価

+

評価テスト

CSS スキルをテストしたいですか？以下の各評価では上記のガイドで説明されている CSS の理解度をテストできます。

-
基本的な CSS の理解
+
基本的な CSS の理解
この評価では基本的な構文・セレクター・詳細度・ボックスモデル・その他の理解度をテストします。
-
装飾的なレターヘッド付きの便箋の作成
+
装飾的なレターヘッド付きの便箋の作成
好印象を与えたいのなら、素敵なレターヘッドの便箋に手紙を書くのはとても良い考えです。この評価では、そのような見た目のオンラインテンプレートの作成に挑戦します。
-
かっこいいボックス
+
かっこいいボックス
ここでは背景と枠線のスタイリングを使った人目を引くボックスの作り方を実践します。
-

関連情報

+

関連情報

-
ボックスの高度なエフェクト
+
ボックスの高度な効果
この記事はトリックの箱として機能し、ボックスの影・ブレンドモード・フィルターのような、ボックスの装飾に使用できる高度な機能のいくつかを紹介します。
diff --git a/files/ja/learn/css/css_layout/index.html b/files/ja/learn/css/css_layout/index.html index 419de7d135..13f2cae2a8 100644 --- a/files/ja/learn/css/css_layout/index.html +++ b/files/ja/learn/css/css_layout/index.html @@ -21,23 +21,33 @@ translation_of: Learn/CSS/CSS_layout ---
{{LearnSidebar}}
-

現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。 今度は、ビューポートや互いを基準にしてボックスを適切な場所に配置する方法を検討します。 必要な前提知識をカバーしているので、さまざまな display の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、CSS レイアウトについて深く掘り下げることができます。

+

現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。 今度は、ビューポートや互いを基準にしてボックスを適切な場所に配置する方法を検討します。 必要な前提知識をカバーしているので、さまざまな display の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、 CSS レイアウトについて深く掘り下げることができます。

-

前提知識

+
+

フロントエンドのウェブ開発者を目指している方へ

+ +

目標に向かって努力するために必要なすべての必須情報を含むコースをまとめました。

+ +

始めましょう +

+ +
+ +

前提知識

このモジュールを始める前に、次のことを理解しているべきです。

  1. HTML 入門で説明したように、HTML についての基本的な知識があること。
    2. -
  2. CSS 入門で説明したように、CSS の基本を容易にこなせること。
    3. -
  3. ボックスを装飾する方法を理解していること。
    4. +
  4. CSS 入門で説明したように、CSS の基本を容易にこなせること。
    5. +
  5. ボックスの装飾の方法を理解していること。
-

注: 使用しているコンピューター/タブレット/その他のデバイスで自分のファイルを作成できない場合は、JSBin や Thimble などのオンラインコーディングプログラムで（ほとんどの）コードサンプルを試すことができます。

+

注: 使用しているコンピューター/タブレット/その他のデバイスで自分のファイルを作成できない場合は、JSBin や Glitch などのオンラインコーディングプログラムで (ほとんどの) コードサンプルを試すことができます。

-

ガイド

+

ガイド

これらの記事では、CSS で利用可能な基本的なレイアウトのツールとテクニックについての教育を提供します。 レッスンの最後には、ウェブページをレイアウトすることによって、レイアウト方法の理解を確認するのに役立つ評価試験があります。

@@ -48,31 +58,31 @@ translation_of: Learn/CSS/CSS_layout
ウェブページ上の要素は、通常フローを変えるために何かをするまで、通常フローに従ってレイアウトされます。 この記事では、通常フローを変える方法を学ぶための基礎として、通常フローの基本について説明します。
フレックスボックス
-

フレックスボックスは、項目を行または列にレイアウトするための1次元のレイアウト方法です。 項目は追加のスペースを埋めるためにたわみ、小さいスペースに収まるように縮小します。 この記事では、すべての基本事項について説明します。

+

フレックスボックスは、項目を行または列にレイアウトするための1次元のレイアウト方法です。 項目は追加のスペースを埋めるためにたわみ、小さいスペースに収まるように縮小します。 この記事では、すべての基本事項について説明します。このガイドを学習した後は、フレックスボックスのスキルをテストして、理解度を確認してから次のステップに進むことができます。

グリッド
-
CSS グリッドレイアウトは、ウェブ用の2次元レイアウトシステムです。 これにより、コンテンツを行と列にレイアウトすることができ、複雑なレイアウトを簡単に構築できるようにする多くの機能があります。 この記事では、ページレイアウトを始めるために知っておくべきことをすべて説明します。
-
フロート
-
{{cssxref("float")}} プロパティは、もともとはテキストブロック内の浮動画像のためのものでしたが、ウェブページ上に複数列レイアウトを作成するために最も一般的に使われるツールの1つになりました。 この記事で説明しているように、フレックスボックスとグリッドの出現により、今は当初の目的に戻っています。
+
CSS グリッドレイアウトは、ウェブ用の2次元レイアウトシステムです。 これにより、コンテンツを行と列にレイアウトすることができ、複雑なレイアウトを簡単に構築できる多くの機能を備えています。 この記事では、ページレイアウトを始めるために必要な情報を提供し、次に進む前にグリッドのスキルをテストしましょう。
+
浮動レイアウト
+
{{cssxref("float")}} プロパティは、もともとはテキストブロック内の浮動画像のためのものでしたが、ウェブページ上に複数列レイアウトを作成するために最も一般的に使われるツールの 1 つになりました。 この記事で説明しているように、フレックスボックスとグリッドの出現により、今は当初の目的に戻っています。
位置指定
-
位置指定を使用すると、通常のドキュメントレイアウトフローから要素を取り出して異なるふるまいをさせることができます。 例えば、互いの上に重なったり、常にブラウザーのビューポート内の同じ場所に留まったりします。 この記事では、さまざまな {{cssxref("position")}} の値とその使い方について説明します。
+
位置指定を使用すると、通常の文書のｐレイアウトフローから要素を取り出して異なるふるまいをさせることができます。 例えば、互いの上に重なったり、常にブラウザーのビューポート内の同じ場所に留まったりします。 この記事では、さまざまな {{cssxref("position")}} の値とその使い方について説明します。
段組みレイアウト
-
段組みレイアウトの仕様では、新聞に見られるような、コンテンツを段にレイアウトする方法が提供されています。 この記事では、この機能の使い方について説明します。
+
段組みレイアウトの仕様では、新聞に見られるような、コンテンツを複数の段にレイアウトする方法が提供されています。 この記事では、この機能の使い方について説明します。
レスポンシブデザイン
-
Web 対応デバイスでより多様な画面サイズが登場するにつれて、レスポンシブ Web デザイン（RWD）の概念が登場しました。 これは、さまざまな画面幅、解像度などに合わせて Web ページがレイアウトと外観を変更できるようにする一連の実践です。 これは、マルチデバイス Web 向けのデザイン方法を変更したアイデアであり、この記事では、それをマスターするために知っておくべき主なテクニックを理解するのに役立ちます。
+
ウェブ対応端末の画面サイズが多様化するにつれ、レスポンシブウェブデザイン (RWD) という概念が登場しました。これは、異なる画面幅や解像度などに合わせて、ウェブページのレイアウトや外観を変更できるようにする一連の手法です。この記事では、レスポンシブウェブデザインを使いこなすために必要な主なテクニックをご紹介します。
メディアクエリーの初心者向けガイド
-
CSS メディアクエリーを使用すると、例えば、「ビューポートは 480 ピクセルよりも広い」というような、ブラウザーとデバイスの環境が指定した規則に一致する場合にのみ CSS を適用できます。 メディアクエリーは、ビューポートのサイズに応じて異なるレイアウトを作成できるため、レスポンシブ Web デザイン（responsive web design、RWD）の重要な部分ですが、例えば、ユーザーはマウスではなくタッチスクリーンを使用しているというような、サイトが実行されている環境に関する他のものを検出するためにも使用できます。 このレッスンでは、最初にメディアクエリーで使用される構文について学習し、次に単純なデザインでどのようにレスポンシブにするかを示す実際の例で使用してみます。
-
過去のレイアウト方法
-
グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前はフロートや他のレイアウト機能を使用して実装される傾向がありました。 あなたはレイアウトをいくつかの列（例えば 4、6、または 12）として想像し、そしてコンテンツの列をこれらの想像上の列の内側に合わせます。 この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。
-
古いブラウザのサポート
+
CSS メディアクエリーは、ブラウザーや端末の環境が、「ビューポートの幅が 480 ピクセル以上」などの指定したルールに合致した場合にのみ、 CSS を適用する方法です。メディアクエリーは、ビューポートの大きさに応じて異なるレイアウトを作成することができるため、レスポンシブウェブデザインの重要な要素となっていますが、ユーザーがマウスではなくタッチパネルを使用しているかどうかなど、サイトが実行されている環境に関する他の事柄を検出するためにも使用できます。このレッスンでは、まずメディアクエリーで使用される構文について学び、次にメディアクエリーを使用して、シンプルなデザインをどのようにレスポンシブにするかを示す実例を見ていきます。
+
古いレイアウト方法
+
グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前は浮動レイアウトや他のレイアウト機能を使用して実装される傾向がありました。 レイアウトをいくつかの列（例えば 4、6、または 12）として想像し、そしてコンテンツの列をこれらの想像上の列の内側に合わせます。 この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。
+
古いブラウザーの対応
-

このモジュールでは、フレックスボックスとグリッドをデザインの主なレイアウト方法として使用することをお勧めしています。 しかしながら、サイトへの訪問者には、古いブラウザーや、使用している方法をサポートしていないブラウザーを使用している人がいます。 これはウェブ上で常に当てはまります — 新しい機能が開発されると、ブラウザーによって異なるものが優先されます。 この記事では、古い技術のユーザーを締め出すことなく最新のウェブテクニックを使用する方法について説明します。

+

このモジュールでは、フレックスボックスとグリッドをデザインの主なレイアウト方法として使用することをお勧めしています。 しかしながら、サイトへの訪問者には、古いブラウザーや、使用している方法に対応していないブラウザーを使用している人がいます。 これはウェブ上で常に当てはまります — 新しい機能が開発されると、ブラウザーによって異なるものが優先されます。 この記事では、古い技術のユーザーを締め出すことなく最新のウェブ技術を使用する方法について説明します。

評価試験: 基礎的なレイアウトの理解
ウェブページをレイアウトすることによって、さまざまなレイアウト方法に関する知識をテストするための評価試験です。
-

関連情報

+

関連情報

実用的な位置指定の例
diff --git a/files/ja/learn/css/styling_text/styling_lists/index.html b/files/ja/learn/css/styling_text/styling_lists/index.html index 3d4617b15b..3a0ea57b6f 100644 --- a/files/ja/learn/css/styling_text/styling_lists/index.html +++ b/files/ja/learn/css/styling_text/styling_lists/index.html @@ -16,13 +16,13 @@ translation_of: Learn/CSS/Styling_text/Styling_lists
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
-

リストは他のテキストとほとんど同じようにふるまいますが、知っておくべきリスト固有の CSS プロパティと、考慮すべきベストプラクティスがいくつかあります。 この記事はすべてを説明しています。

+

リストは他のテキストとほとんど同じようにふるまいますが、知っておくべきリスト固有の CSS プロパティと、考慮すべきベストプラクティスがいくつかあります。 この記事はすべてを説明しています。

- + @@ -31,13 +31,13 @@ translation_of: Learn/CSS/Styling_text/Styling_lists
前提知識:基本的なコンピューターリテラシー、HTML の基本（HTML 入門を学ぶ）、CSS の基本（CSS 入門を学ぶ）、CSS のテキストとフォントの基礎。基本的なコンピューターリテラシー、HTML の基本 (HTML 入門を学ぶ)、 CSS の基本 (CSS 入門を学ぶ)、CSS のテキストとフォントの基礎。
学習目標:
-

簡単なリストの例

+

簡単なリストの例

-

はじめに、簡単なリストの例を見てみましょう。 この記事を通して、順序なしリスト、順序付きリスト、そして説明リストを見ていきます。これらはどれも似たような装飾機能持っていますが、リストの種類に特有のものもあります。 装飾していない例は Github にあります（ソースコードもチェックしてください）。

+

はじめに、簡単なリストの例を見てみましょう。 この記事を通して、順序なしリスト、順序付きリスト、そして説明リストを見ていきます。これらはどれも似たような装飾機能持っていますが、リストの種類に特有のものもあります。 装飾していない例は Github にあります (ソースコードもチェックしてください) 。

そのリストの例の HTML はこんな感じです。

-
<h2>Shopping (unordered) list</h2>
+
<h2>Shopping (unordered) list</h2>
 
 <p>Paragraph for reference, paragraph for reference, paragraph for reference,
 paragraph for reference, paragraph for reference, paragraph for reference.</p>
@@ -77,23 +77,23 @@ paragraph for reference, paragraph for reference, paragraph for reference.</p
   <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
 </dl>

 
-
ここで実際の例に行き、ブラウザー開発者ツールを使用してリスト要素を調べると、次のようないくつかの装飾のデフォルト設定に気付くでしょう。

+
ここで実際の例に行き、ブラウザー開発者ツールを使用してリスト要素を調べると、次のようないくつかの装飾の既定設定に気付くでしょう。

 
 
    
- 
  • {{htmlelement("ul")}} 要素と {{htmlelement("ol")}} 要素の上下の {{cssxref("margin")}} は 16px（1em）、{{cssxref("padding-left")}} は 40px（2.5em）です。
    • 
- 
  • リスト項目（{{htmlelement("li")}} 要素）には、間隔の設定に関するデフォルトはありません。
    • 
- 
  • {{htmlelement("dl")}} 要素の上下の {{cssxref("margin")}} は 16px（1em）ですが、パディングの設定はありません。
    • 
- 
  • {{htmlelement("dd")}} 要素の {{cssxref("margin-left")}} は 40px（2.5em）です。
    • 
- 
  • 参照用に含めた {{htmlelement("p")}} 要素には、さまざまな種類のリストと同じ 16px（1em）の上下の {{cssxref("margin")}} があります。
    • 
+ 
  • {{htmlelement("ul")}} 要素と {{htmlelement("ol")}} 要素の上下の {{cssxref("margin")}} は 16px (1em)、{{cssxref("padding-left")}} は 40px (2.5em) です。
    • 
+ 
  • リスト項目 ({{htmlelement("li")}} 要素) には、間隔の設定に関する既定はありません。
    • 
+ 
  • {{htmlelement("dl")}} 要素の上下の {{cssxref("margin")}} は 16px (1em) ですが、パディングの設定はありません。
    • 
+ 
  • {{htmlelement("dd")}} 要素の {{cssxref("margin-left")}} は 40px (2.5em) です。
    • 
+ 
  • 参照用に含めた {{htmlelement("p")}} 要素には、さまざまな種類のリストと同じ 16px (1em) の上下の {{cssxref("margin")}} があります。
    • 
 

 
-
リストの間隔の取り扱い

+
リストの間隔の取り扱い

 
-
リストを装飾するときは、（段落や画像などの）周囲の要素と同じ垂直方向の間隔（バーティカルリズム（vertical rhythm）とも呼ばれる）と、互いに同じ水平方向の間隔を維持するように装飾を調整する必要があります（Github で完成した装飾した例を見ることができ、ソースコードも見つけることができます）。

+
リストを装飾するときは、 (段落や画像などの) 周囲の要素と同じ垂直方向の間隔 (バーティカルリズム (vertical rhythm) とも呼ばれる) と、互いに同じ水平方向の間隔を維持するように装飾を調整する必要があります (Github で完成した装飾した例を見ることができ、ソースコードも見つけることができます) 。

 
 
テキストの装飾と間隔調整に使用する CSS は次のとおりです。

 
-
/* General styles */
+
/* General styles */
 
 html {
   font-family: Helvetica, Arial, sans-serif;
@@ -114,7 +114,6 @@ li, p {
 
 /* Description list styles */
 
-
 dd, dt {
   line-height: 1.5;
 }
@@ -122,19 +121,16 @@ dd, dt {
 dt {
   font-weight: bold;
 }
-
-dd {
-  margin-bottom: 1.5rem;
-}

+

 
 
    
- 
  • 規則1はサイト全体のフォントと 10px の基準フォントサイズを設定します。 これらはページ上のすべてのものに継承されます。
    • 
- 
  • 規則2と3では、見出し、さまざまなリストの種類（リスト要素の子はこれらを継承）、および段落に相対フォントサイズを設定します。 つまり、各段落とリストのフォントサイズ、上下の間隔は同じになり、バーティカルリズムを一定に保つのに役立ちます。
    • 
- 
  • 規則4では、段落とリスト項目に同じ {{cssxref("line-height")}} を設定しているため、段落と各個々のリスト項目のラインの間隔は同じになります。 これは、バーティカルリズムを一定に保つのにも役立ちます。
    • 
- 
  • 説明リストには規則5と6が適用されます。 説明リストの用語と説明には、段落とリスト項目の場合と同じ line-height を設定します。 繰り返しますが、一貫性があることは良いことです！ また、説明する用語は太字にして、視覚的に目立つようにしています。
    • 
+ 
  • 1 番目の規則はサイト全体のフォントと 10px の基準フォントサイズを設定します。 これらはページ上のすべてのものに継承されます。
    • 
+ 
  • 2 番目と 3 番目の規則では、見出し、さまざまなリストの種類 (リスト要素の子はこれらを継承) 、および段落に相対フォントサイズを設定します。 つまり、各段落とリストのフォントサイズ、上下の間隔は同じになり、バーティカルリズムを一定に保つのに役立ちます。
    • 
+ 
  • 4 番目では、段落とリスト項目に同じ {{cssxref("line-height")}} を設定しているため、段落と各個々のリスト項目のラインの間隔は同じになります。 これは、バーティカルリズムを一定に保つのにも役立ちます。
    • 
+ 
  • 説明リストには 5 番目と 6 番目の規則が適用されます。 説明リストの用語と説明には、段落とリスト項目の場合と同じ line-height を設定します。 繰り返しますが、一貫性があることは良いことです！ また、説明する用語は太字にして、視覚的に目立つようにしています。>
    • 
 

 
-
リスト固有の装飾

+
リスト固有の装飾

 
 
リストの一般的な間隔調整テクニックを見てきました。 次に、リスト固有のプロパティを調べてみましょう。 最初に知っておくべき3つのプロパティがあり、それらは {{htmlelement("ul")}} や {{htmlelement("ol")}} 要素に設定できます。

 
@@ -144,46 +140,46 @@ dd {
  
  • {{cssxref("list-style-image")}}: 行頭記号に簡単な正方形や円ではなく、カスタム画像を使うことができます。
    • 
 
 
-
    行頭記号の装飾
    
+
    行頭記号の装飾
    
 
-
    前述のように、{{cssxref("list-style-type")}} プロパティを使用して、行頭記号（bullet point）に使用する行頭記号（bullet）の種類を設定できます。 この例では、順序付きリストで大文字のローマ数字を使用するように設定しています。
    
+
    前述のように、{{cssxref("list-style-type")}} プロパティを使用して、行頭記号 (bullet point) に使用する行頭記号 (bullet) の種類を設定できます。 この例では、順序付きリストで大文字のローマ数字を使用するように設定しています。
    
 
-
    ol {
+
    ol {
   list-style-type: upper-roman;
 }
    
 
 
    これにより、次のようになります。
    
 
-
    行頭記号がリスト項目テキストの外側に表示されるように設定された順序付きリスト。
    
+
    行頭記号がリスト項目テキストの外側に表示されるように設定された順序付きリスト。
    
 
-
    {{cssxref("list-style-type")}} のリファレンスページをチェックすることで、もっとたくさんのオプションを見つけることができます。
    
+
    それ以外のオプションを見るには、 {{cssxref("list-style-type")}} のリファレンスページを参照してください。
    
 
-
    行頭記号の位置
    
+
    行頭記号の位置
    
 
-
    {{cssxref("list-style-position")}} プロパティは、行頭記号をリスト項目の内側に表示するか、その外側の各項目の先頭より前に表示するかを設定します。 デフォルト値は outside です。 これは、上で見たように、行頭記号をリスト項目の外側に配置します。
    
+
    {{cssxref("list-style-position")}} プロパティは、行頭記号をリスト項目の内側に表示するか、その外側の各項目の先頭より前に表示するかを設定します。 既定値は outside です。 これは、上で見たように、行頭記号をリスト項目の外側に配置します。
    
 
-
    値を inside に設定すると、行頭記号をラインの内側に配置します。
    
+
    値を inside に設定すると、行頭記号を行の内側に配置します。
    
 
-
    ol {
+
    ol {
   list-style-type: upper-roman;
   list-style-position: inside;
 }
    
 
-
    行頭記号がリスト項目のテキストの内側に表示されるように設定された順序付きリスト。
    
+
    行頭記号がリスト項目のテキストの内側に表示されるように設定された順序付きリスト。
    
 
-
    カスタム行頭記号画像の使用
    
+
    独自の行頭記号画像の使用
    
 
-
    {{cssxref("list-style-image")}} プロパティを使用すると、行頭記号にカスタム画像を使用できます。 構文は次のようにとても簡単です。
    
+
    {{cssxref("list-style-image")}} プロパティを使用すると、行頭記号に独自の画像を使用することができます。構文は次のようにとても簡単です。
    
 
-
    ul {
+
    ul {
   list-style-image: url(star.svg);
 }
    
 
-
    ただし、このプロパティは、行頭記号の位置、サイズなどを制御するという点では少し制限があります。 {{cssxref("background")}} プロパティファミリーを使用するほうが得策です。 これについては、ボックスの装飾モジュールで詳しく説明します。 今のところ、これは味見です！
    
+
    ただし、このプロパティは、行頭記号の位置、サイズなどを制御するという点では少し制限があります。 {{cssxref("background")}} プロパティファミリーを使用するほうが得策です。 これについては、ボックスの装飾モジュールで詳しく説明します。とりあえず、その例をご紹介しましょう。
    
 
-
    完成した例では、（既に上で見たものの上に）次のように順序なしリストを装飾しました。
    
+
    完成した例では、 (既に上で見たものの上に) 次のように順序なしリストを装飾しました。
    
 
-
    ul {
+
    ul {
   padding-left: 2rem;
   list-style-type: none;
 }
@@ -199,27 +195,27 @@ ul li {
 
    ここでは次のことを行いました。
    
 
 
      
- 
    •  {{htmlelement("ul")}} の {{cssxref("padding-left")}} をデフォルトの 40px から 20px に減らし、リスト項目にも同じ量を設定します。 これにより、リスト項目は全体的にはまだ順序リスト項目や説明リストの説明文が並んでいますが、リスト項目には背景画像が入るように多少のパディングが入っています。これをしないと、背景画像がリスト項目のテキストと重なってしまい、見た目がごちゃごちゃしてしまいます。
      • 
- 
    • デフォルトで行頭記号が表示されないように、{{cssxref("list-style-type")}} を none に設定します。 代わりに、行頭記号を処理するために {{cssxref("background")}} プロパティを使用します。
      • 
+ 
    • {{htmlelement("ul")}} の {{cssxref("padding-left")}} を既定の 40px から 20px に減らし、リスト項目にも同じ量を設定します。 これにより、リスト項目は全体的にはまだ順序リスト項目や説明リストの説明文が並んでいますが、リスト項目には背景画像が入るように多少のパディングが入っています。これをしないと、背景画像がリスト項目のテキストと重なってしまい、見た目がごちゃごちゃしてしまいます。
      • 
+ 
    • 既定で行頭記号が表示されないように、{{cssxref("list-style-type")}} を none に設定します。 代わりに、行頭記号を処理するために {{cssxref("background")}} プロパティを使用します。
      • 
  
    • 各順序なしリスト項目に行頭記号を挿入しました。 関連するプロパティは次のとおりです。
   
        
    
      • {{cssxref("background-image")}}: 行頭記号として使用する画像ファイルへのパスを参照します。
        • 
    
      • {{cssxref("background-position")}}: これは選択した要素の背景のどこに画像を表示するかを定義します。 この場合は 0 0 としています。 つまり、各リスト項目の左上に行頭記号が表示されます。
        • 
-   
      • {{cssxref("background-size")}}: 背景画像のサイズを設定します。 行頭記号のサイズをリスト項目と同じサイズ（または、ごくわずかに大きいか小さい）にすることをお勧めします。 サイズは 1.6rem（16px）を使用しています。 これは、行頭記号を内部に配置できる 20px のパディングに非常によく合っています — 行頭記号とリスト項目のテキストの間に 16px + 4px のスペースがあるとうまくいきます。
        • 
-   
      • {{cssxref("background-repeat")}}: デフォルトでは、背景画像は利用可能な背景スペースを埋めつくすまで繰り返します。 それぞれの場合に画像のコピーを1つだけ挿入したいので、これを no-repeat の値に設定します。
        • 
+   
      • {{cssxref("background-size")}}: 背景画像のサイズを設定します。 行頭記号のサイズをリスト項目と同じサイズ (または、ごくわずかに大きいか小さい) にすることをお勧めします。 サイズは 1.6rem (16px) を使用しています。 これは、行頭記号を内部に配置できる 20px のパディングに非常によく合っています — 行頭記号とリスト項目のテキストの間に 16px + 4px のスペースがあるとうまくいきます。
        • 
+   
      • {{cssxref("background-repeat")}}: 既定では、背景画像は利用可能な背景スペースを埋めつくすまで繰り返します。 それぞれの場合に画像のコピーを1つだけ挿入したいので、これを no-repeat の値に設定します。
        • 
   
      
  
      • 
 
    
 
 
    これにより、次のような結果が得られます。
    
 
-
    行頭記号が小さな星の画像として設定された順序なしリスト
    
+
    行頭記号が小さな星の画像として設定された順序なしリスト
    
 
-
    list-style 一括指定
    
+
    list-style 一括指定
    
 
-
    上記の3つのプロパティはすべて、単一の一括指定プロパティ {{cssxref("list-style")}} を使用して設定できます。 例えば、次の CSS を、
    
+
    上記の 3 つのプロパティはすべて、単一の一括指定プロパティ {{cssxref("list-style")}} を使用して設定できます。 例えば、次の CSS を、
    
 
-
    ul {
+
    ul {
   list-style-type: square;
   list-style-image: url(example.png);
   list-style-position: inside;
@@ -227,43 +223,43 @@ ul li {
 
 
    これに置き換えることができます。
    
 
-
    ul {
+
    ul {
   list-style: square url(example.png) inside;
 }
    
 
-
    値は任意の順序でリストすることができ、1つ、2つ、または3つすべてを使用できます（含まれていないプロパティーに使用されるデフォルト値は disc、none、outside です）。 type と image の両方が指定されている場合、画像が何らかの理由でロードできない場合に、type を代替として使用します。
    
+
    値は任意の順序でリストすることができ、1つ、2つ、または3つすべてを使用できます (含まれていないプロパティーに使用される既定値は disc、none、outside です) 。 type と image の両方が指定されている場合、画像が何らかの理由でロードできない場合に、type を代替として使用します。
    
 
-
    リストの数え方の制御
    
+
    リストの数え方の制御
    
 
 
    場合によっては、順序付きリストで異なる方法で数えたいことがあります — 例えば 1 以外の数から始めたり、逆方向に数えたり、1 以上のステップで数えたりです。 HTML と CSS には、ここで役立つツールがいくつかあります。
    
 
-
    start
    
+
    start
    
 
 
    {{htmlattrxref("start","ol")}} 属性を使用すると、1 以外の数からリストを数え始めます。 次の例では、
    
 
-
    <ol start="4">
+
    <ol start="4">
   <li>Toast pita, leave to cool, then slice down the edge.</li>
   <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
   <li>Wash and chop the salad.</li>
   <li>Fill pita with salad, hummus, and fried halloumi.</li>
 </ol>
    
 
-
    この出力を与えます。
    
+
    この出力が得られます。
    
 
 
    {{ EmbedLiveSample('start', '100%', 150) }}
    
 
-
    reversed
    
+
    reversed
    
 
 
    {{htmlattrxref("reversed","ol")}} 属性はリストのカウントアップではなくカウントダウンを開始します。 次の例では、
    
 
-
    <ol start="4" reversed>
+
    <ol start="4" reversed>
   <li>Toast pita, leave to cool, then slice down the edge.</li>
   <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
   <li>Wash and chop the salad.</li>
   <li>Fill pita with salad, hummus, and fried halloumi.</li>
 </ol>
    
 
-
    この出力を与えます。
    
+
    この出力が得られます。
    
 
 
    {{ EmbedLiveSample('reversed', '100%', 150) }}
    
 
@@ -271,28 +267,28 @@ ul li {
 
    注: 逆方向のリストに start 属性の値より多くのリスト項目がある場合、カウントは引き続きゼロになり、その後負の値になります。
    
 
 
-
    value
    
+
    value
    
 
-
    {{htmlattrxref("value","li")}} 属性を使用すると、リスト項目を特定の数値に設定できます。 次の例では、
    
+
    {{htmlattrxref("value","ol")}} 属性を使用すると、リスト項目を特定の数値に設定できます。 次の例では、
    
 
-
    <ol>
+
    <ol>
   <li value="2">Toast pita, leave to cool, then slice down the edge.</li>
   <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
   <li value="6">Wash and chop the salad.</li>
   <li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
 </ol>
    
 
-
    この出力を与えます。
    
+
    この出力が得られます。
    
 
 
    {{ EmbedLiveSample('value', '100%', 150) }}
    
 
 
    
-
    注: 非数値の {{cssxref("list-style-type")}} を使用している場合でも、value 属性に同等の数値を使用する必要があります。
    
+
    注: 数値以外の {{cssxref("list-style-type")}} を使用している場合でも、value 属性に同等の数値を使用する必要があります。
    
 
    
 
-
    能動的学習: ネストしたリストの装飾
    
+
    アクティブラーニング: ネストしたリストの装飾
    
 
-
    この能動的学習セッションでは、上で学んだことを取り入れて、ネストしたリストを装飾してください。 HTML を提供してあるので、次のことを行います。
    
+
    このアクティブラーニングセッションでは、上で学んだことを取り入れて、ネストしたリストを装飾してください。 HTML を提供してあるので、次のことを行います。
    
 
 
      
  
    1. 順序なしリストに正方形の行頭記号を付けます。
      2. 
@@ -306,7 +302,7 @@ ul li {