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 版の記事は古いため削除 --- .../learn/css/building_blocks/index.html | 332 --------------------- .../ja/conflicting/learn/css/css_layout/index.html | 286 ------------------ .../css/styling_text/styling_lists/index.html | 247 --------------- 3 files changed, 865 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 (limited to 'files/ja/conflicting') 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 で扱う方法について述べます。

-- cgit v1.2.3-54-g00ecf