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 版の記事は古いため削除 --- .../css/styling_text/styling_lists/index.html | 144 ++++++++++----------- 1 file changed, 72 insertions(+), 72 deletions(-) (limited to 'files/ja/learn/css/styling_text') 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>

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

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

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

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

 
-
リストを装飾するときは、（段落や画像などの）周囲の要素と同じ垂直方向の間隔（バーティカルリズム（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;
-}

+

 
 
 
-
リスト固有の装飾

+
リスト固有の装飾

 
 
リストの一般的な間隔調整テクニックを見てきました。 次に、リスト固有のプロパティを調べてみましょう。 最初に知っておくべき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 {