リストの装飾

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

前提知識: 基本的なコンピューターリテラシー、HTML の基本(HTML 入門を学ぶ)、CSS の基本(CSS 入門を学ぶ)、CSS のテキストとフォントの基礎
学習目標: リストの装飾に関連するベストプラクティスとプロパティに慣れること。

簡単なリストの例

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

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

<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>

<ul>
  <li>Hummus</li>
  <li>Pita</li>
  <li>Green salad</li>
  <li>Halloumi</li>
</ul>

<h2>Recipe (ordered) list</h2>

<p>Paragraph for reference, paragraph for reference, paragraph for reference, 
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<ol>
  <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>

<h2>Ingredient description list</h2>

<p>Paragraph for reference, paragraph for reference, paragraph for reference, 
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<dl>
  <dt>Hummus</dt>
  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
  <dt>Pita</dt>
  <dd>A soft, slightly leavened flatbread.</dd>
  <dt>Halloumi</dt>
  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
  <dt>Green salad</dt>
  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
</dl>

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

  • <ul> 要素と <ol> 要素の上下の margin16px1em)、padding-left40px2.5em)です。
  • リスト項目(<li> 要素)には、間隔の設定に関するデフォルトはありません。
  • <dl> 要素の上下の margin16px1em)ですが、パディングの設定はありません。
  • <dd> 要素の margin-left40px2.5em)です。
  • 参照用に含めた <p> 要素には、さまざまな種類のリストと同じ 16px1em)の上下の margin があります。

リストの間隔の取り扱い

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

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

/* General styles */

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,ol,dl,p {
  font-size: 1.5rem;
}

li, p {
  line-height: 1.5;
}

/* Description list styles */


dd, dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}

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

リスト固有の装飾

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

  • list-style-type: リストに使用する行頭記号の種類を設定します。 例えば、順序なしリストの場合は正方形や丸の行頭記号、順序付きリストの場合は数字、文字、ローマ数字などです。
  • list-style-position: 行頭記号をリスト項目の内側に表示するか、その外側の各項目の先頭より前に表示するかを設定します。
  • list-style-image: 行頭記号に簡単な正方形や円ではなく、カスタム画像を使うことができます。

行頭記号の装飾

前述のように、list-style-type プロパティを使用して、行頭記号(bullet point)に使用する行頭記号(bullet)の種類を設定できます。 この例では、順序付きリストで大文字のローマ数字を使用するように設定しています。

ol {
  list-style-type: upper-roman;
}

これにより、次のようになります。

行頭記号がリスト項目テキストの外側に表示されるように設定された順序付きリスト。

list-style-type のリファレンスページをチェックすることで、もっとたくさんのオプションを見つけることができます。

行頭記号の位置

list-style-position プロパティは、行頭記号をリスト項目の内側に表示するか、その外側の各項目の先頭より前に表示するかを設定します。 デフォルト値は outside です。 これは、上で見たように、行頭記号をリスト項目の外側に配置します。

値を inside に設定すると、行頭記号をラインの内側に配置します。

ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}

行頭記号がリスト項目のテキストの内側に表示されるように設定された順序付きリスト。

カスタム行頭記号画像の使用

list-style-image プロパティを使用すると、行頭記号にカスタム画像を使用できます。 構文は次のようにとても簡単です。

ul {
  list-style-image: url(star.svg);
}

ただし、このプロパティは、行頭記号の位置、サイズなどを制御するという点では少し制限があります。 background プロパティファミリーを使用するほうが得策です。 これについては、ボックスの装飾モジュールで詳しく説明します。 今のところ、これは味見です!

完成した例では、(既に上で見たものの上に)次のように順序なしリストを装飾しました。

ul {
  padding-left: 2rem;
  list-style-type: none;
}

ul li {
  padding-left: 2rem;
  background-image: url(star.svg);
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}

ここでは次のことを行いました。

  •  <ul>padding-left をデフォルトの 40px から 20px に減らしてから、リスト項目に同じ量を設定します。 これは、全体的なリスト項目がまだ順序リスト項目と説明リストの説明とがラインが並んでいるようにするためですが、リスト項目には背景画像を内部に配置するためのパディングがあります。 これをしないと、背景画像がリスト項目のテキストと重なってしまい、見た目が乱れてしまいます。
  • デフォルトで行頭記号が表示されないように、list-style-typenone に設定します。 代わりに、行頭記号を処理するために background プロパティを使用します。
  • 各順序なしリスト項目に行頭記号を挿入しました。 関連するプロパティは次のとおりです。
    • background-image: 行頭記号として使用する画像ファイルへのパスを参照します。
    • background-position: これは選択した要素の背景のどこに画像を表示するかを定義します。 この場合は 0 0 としています。 つまり、各リスト項目の左上に行頭記号が表示されます。
    • background-size: 背景画像のサイズを設定します。 行頭記号のサイズをリスト項目と同じサイズ(または、ごくわずかに大きいか小さい)にすることをお勧めします。 サイズは 1.6rem16px)を使用しています。 これは、行頭記号を内部に配置できる 20px のパディングに非常によく合っています — 行頭記号とリスト項目のテキストの間に 16px + 4px のスペースがあるとうまくいきます。
    • background-repeat: デフォルトでは、背景画像は利用可能な背景スペースを埋めつくすまで繰り返します。 それぞれの場合に画像のコピーを1つだけ挿入したいので、これを no-repeat の値に設定します。

これにより、次のような結果が得られます。

行頭記号が小さな星の画像として設定された順序なしリスト

list-style 一括指定

上記の3つのプロパティはすべて、単一の一括指定プロパティ list-style を使用して設定できます。 例えば、次の CSS を、

ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}

これに置き換えることができます。

ul {
  list-style: square url(example.png) inside;
}

値は任意の順序でリストすることができ、1つ、2つ、または3つすべてを使用できます(含まれていないプロパティーに使用されるデフォルト値は discnoneoutside です)。 typeimage の両方が指定されている場合、画像が何らかの理由でロードできない場合に、type を代替として使用します。

リストの数え方の制御

場合によっては、順序付きリストで異なる方法で数えたいことがあります — 例えば 1 以外の数から始めたり、逆方向に数えたり、1 以上のステップで数えたりです。 HTML と CSS には、ここで役立つツールがいくつかあります。

start

start 属性を使用すると、1 以外の数からリストを数え始めます。 次の例では、

<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>

この出力を与えます。

reversed

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>

この出力を与えます。

: 逆方向のリストに start 属性の値より多くのリスト項目がある場合、カウントは引き続きゼロになり、その後負の値になります。

value

value 属性を使用すると、リスト項目を特定の数値に設定できます。 次の例では、

<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>

この出力を与えます。

注: 非数値の list-style-type を使用している場合でも、value 属性に同等の数値を使用する必要があります。

能動的学習: ネストしたリストの装飾

この能動的学習セッションでは、上で学んだことを取り入れて、ネストしたリストを装飾してください。 HTML を提供してあるので、次のことを行います。

  1. 順序なしリストに正方形の行頭記号を付けます。
  2. 順序なしリスト項目と順序付きリスト項目のフォントサイズの 1.5 のラインの高さを指定します。
  3. 順序付きリストに小文字のアルファベットの行頭記号を付けます。
  4. 行頭記号の種類、間隔、その他見つけられるものは何でも試して、好きなだけリストの例を試してみてください。

間違えた場合は、Reset ボタンを使用していつでもリセットできます。 本当に立ち往生したら、答えを見るために Show solution ボタンを押してください。

関連情報

CSS カウンターは、リストの数え方と装飾をカスタマイズするための高度なツールを提供しますが、非常に複雑です。 あなたが自身を伸ばしたいと思うならば、これらを調べることを勧めます。 次を見てください。

まとめ

関連するいくつかの基本的な原則と特定のプロパティを知っていれば、リストの装飾のこつは比較的簡単です。 次の記事では、リンクの装飾テクニックについて説明します。

 

このモジュール内の文書