CSS でリストスタイル属性を設定する方法 (この記事を読むだけ)

リストスタイルのプロパティ `HTML`には、順序なしリストと順序ありリストの`2`種類のリストがあります。仕事では順序なしリストの方がよく使用されます。順序なしリストは`ul`タグと`li`タグの組み合わせです。では、順序ありリストとは何でしょうか。 `ol`タグと`li`タグの組み合わせは順序付きリストと呼ばれます。リストの基礎知識を簡単に説明します。この章では、主にリストのスタイルを設定する方法について説明します。リストが何であるかを知らない友人がいる場合は、W3schoolの公式サイトにアクセスして学習することをお勧めします。よく使われるリストスタイル属性は、 `list-style-type` 、 `list-style-position` 、 `list-style-image` 、 `list-style` 4つです。ここでは、リストのよく使われる属性名について簡単に説明します。各属性値の具体的な使い方や導入については、以下で詳しく説明します。学習好きな友達は心配する必要はありません。リストスタイルタイプ属性 list-style-type 属性の機能は、リストの前の箇条書きの種類を設定することです。リストスタイルタイプの属性値の説明表。

リストスタイルのプロパティ

HTMLには、順序なしリストと順序ありリストの2種類のリストがあります。仕事では順序なしリストの方がよく使用されます。順序なしリストはulタグとliタグの組み合わせです。では、順序ありリストとは何でしょうか。 olタグとliタグの組み合わせは順序付きリストと呼ばれます。リストの基礎知識を簡単に説明します。この章では、主にリストのスタイルを設定する方法について説明します。リストが何であるかを知らない友人がいる場合は、W3schoolの公式サイトにアクセスして学習することをお勧めします。
よく使われるリストスタイル属性は、 list-style-type 、 list-style-position 、 list-style-image 、 list-style 4つです。ここでは、リストのよく使われる属性名について簡単に説明します。各属性値の具体的な使い方や導入については、以下で詳しく説明します。学習好きな友達は心配する必要はありません。

リストスタイルタイプ属性

list-style-type 属性の機能は、リストの前の箇条書きの種類を設定することです。
リストスタイルタイプの属性値の説明表。

プロパティ値	説明する
なし	リストの先頭から箇条書きを削除します。
ディスク	リストの先頭の箇条書きを実線の円に設定します。
丸	リストヘッダーの箇条書きを白抜きの円に設定します。
四角	リストの先頭の箇条書きを実線の四角形に設定します。

属性値はなしです。

次にlist-style-type属性値をnoneにしてみましょう。練習内容は以下のとおりです。class class値を.boxにして、リストの先頭の箇条書きを削除します。
list-style-type属性値をnoneに設定する練習をする前に、初心者が直感的に理解できるように、リストの前の箇条書きが何であるかを見てみましょう。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>リスト list-style-type 属性の値は none です。</title>
</head>
  
<本文>
    <ul>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
    </ul>
</本文>
</html>

結果プロット

箇条書きが何であるかがわかったので、まずはlist-style-type属性の値をnone設定してみましょう。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>リスト list-style-type 属性の値は none です。</title>
    <スタイル>
        。箱{
            リストスタイルタイプ: なし;
        }
    </スタイル>
</head>
  
<本文>
    <ul class="box">
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
    </ul>
</本文>
</html>

結果プロット

これがわかるということは、マスターできたということですね。リストのlist-style-type属性値はnoneです。おめでとうございます。

属性値はディスク使用量です

ここでは、リストのlist-style-type属性値がdiscであることを説明します。リストのlist-style-type属性のデフォルト値はdiscです。注意深い庭師であれば、すでに発見しているでしょう。上には既成の例があるので、ここでは詳しく紹介しません。この属性値はdiscなので、スキップします。

属性値円の使用法

リストのlist-style-type属性値をcircle practice」として入力してみましょう。練習内容は次のとおりです。リストの先頭の箇条書きを白抜きの円に設定します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>リストの list-style-type 属性値は円の練習です</title>
    <スタイル>
        。箱{
            リストスタイルのタイプ: 円;
        }
    </スタイル>
</head>
  
<本文>
    <ul class="box">
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
    </ul>
</本文>
</html>

結果プロット

属性値は正方形です。

リストの先頭の箇条書きを実線の四角に設定するなど、 square練習のlist-style-type属性値を入力してみましょう。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>リストの list-style-type 属性値は正方形のプラクティスです</title>
    <スタイル>
        。箱{
            リストスタイルタイプ: 正方形;
        }
    </スタイル>
</head>
  
<本文>
    <ul class="box">
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
    </ul>
</本文>
</html>

結果プロット

list-style-position プロパティ

list-style-position属性は、リストの前の箇条書きの位置を設定するために使用されます。list list-style-position属性には、 outsideとinside 2 つの属性値があります。具体的な説明については、以下の属性値の説明表を参照してください。

list-style-position プロパティ値の説明表

プロパティ値	説明する
外	リストの先頭の箇条書きを外側に設定します。
内部	リストの先頭の箇条書きを内側に設定します。

属性値が範囲外です。

list-style-positionプロパティのoutside値を練習する前に、リストの前の箇条書きのデフォルトの位置を見てみましょう。初心者に直感的な印象を与えるために、作者はHTMLページ内のulタグとliタグにいくつかのスタイルを設定しています。
ulタグのスタイルは次のとおりです: widthは300pxピクセルに設定され、 heightさは150pxピクセル、 borderは ( 1pxピクセル、実線で表示、境界線の色は青) スタイルです。
ulタグ内のliタグは、次のようにスタイルを設定します: widthは280pxピクセル、 heightは30pxピクセル、 line-height高さは30pxピクセル、 borderは ( 1pxピクセル、実線で表示、境界線の色は赤)、スタイルは 1 に設定されています。
borderについての知識がなくても、学ぶのが好きなら、将来borderについての記事を書くことを心配する必要はありません。 borderについて学びたい場合は、W3school の公式 Web サイトにアクセスして勉強することができます。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>属性値の使用範囲外です</title>
    <スタイル>
        ul {
            幅: 300ピクセル;
            高さ: 150px;
            境界線: 1px実線 #00F;
        }
         ul li {
          
            幅: 280ピクセル;
            高さ: 30px;
            行の高さ: 30px;
            境界線: 1px 実線の赤;
        }
 
    </スタイル>
</head>
  
<本文>
    <ul>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
    </ul>
   
</本文>
</html>

結果プロット

これで、リストの前の箇条書きがデフォルトでulタグとliタグの間に配置されていることがはっきりとわかるはずです。リストの前の箇条書きのデフォルトの位置がわかったので、 list-style-position属性値をoutsideに設定する練習をしてみましょう。練習内容: HTMLページのリストの前の箇条書きを outside に設定します。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>属性値の使用範囲外です</title>
    <スタイル>
        ul {
            幅: 300ピクセル;
            高さ: 150px;
            境界線: 1px実線 #00F;
        }
         ul li {
          
            幅: 280ピクセル;
            高さ: 30px;
            行の高さ: 30px;
            境界線: 1px 実線の赤;
            リストスタイルの位置: 外側;
        }
 
    </スタイル>
</head>
  
<本文>
    <ul>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
    </ul>
   
</本文>
</html>

結果プロット

注: list-style-positionプロパティ値をoutsideに設定しても実行結果が変わらないのはなぜでしょうか? リストの前の箇条書きはデフォルトで外側にあり、リストの前の箇条書きの外側の位置はulタグとliタグの間にあるためです。

属性値は内部にあります。

list-style-positionプロパティの値をoutsideに設定することで、リストの前の箇条書きの外側の位置が誰でもわかるようになります。次に、リストの前の箇条書きを inside に設定します。
実際に、 list-style-positionプロパティの値をinsideに入力して、リストの先頭の箇条書きの位置を inside に設定してみましょう。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>属性値は使用範囲内です</title>
    <スタイル>
        ul {
            幅: 300ピクセル;
            高さ: 150px;
            境界線: 1px実線 #00F;
        }
         ul li {
          
            幅: 280ピクセル;
            高さ: 30px;
            行の高さ: 30px;
            境界線: 1px 実線の赤;
            リストスタイルの位置: 内側;
        }
 
    </スタイル>
</head>
  
<本文>
    <ul>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
    </ul>
   
</本文>
</html>

結果プロット

注: list-style-position属性の値はinsideあり、リストの前の箇条書きの位置をliタグ (内側の位置) に設定します。

list-style-image プロパティ

list-style-image属性の機能は、リストの前の箇条書きを画像に設定することです。

list-style-image プロパティの説明表

属性値名	説明する
URL	リストの先頭の箇条書きの画像へのパスを設定します

では、 list-style-image属性の実践に入りましょう。実践内容は、リストの先頭の箇条書きを画像に置き換えることです。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>list-style-image 属性の使用</title>
    <スタイル>
        ul {
            幅: 300ピクセル;
            高さ: 150px;
            境界線: 1px実線 #00F;
        }
         ul li {
          
            幅: 280ピクセル;
            高さ: 30px;
            行の高さ: 30px;
            境界線: 1px 実線の赤;
            リストスタイルの画像: url(./img/001.png);
        }
 
    </スタイル>
</head>
  
<本文>
    <ul>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
    </ul>
   
</本文>
</html>

結果プロット

注意: 画像パスurl(./img/001.png);そうしないとレンダリングされません。画像パスは相対パスまたは絶対パスにすることができます。

リストスタイル属性

list-style属性は、( list-style-type属性、 list-style-position属性、 list-style-image属性) の短縮属性であり、( list-style-type属性、 list-style-position属性、 list-style-image属性) の機能を統合します。

list-style属性の実践に入りましょう。ここまでご覧いただいたので、この章の内容をすでにマスターできたと思います。

コードブロック

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>リストスタイル属性の使用</title>
    <スタイル>
        ul {
            幅: 300ピクセル;
            高さ: 150px;
            境界線: 1px実線 #00F;
        }
         ul li {
          
            幅: 290ピクセル;
            高さ: 30px;
            行の高さ: 30px;
            境界線: 1px 実線の赤;
            リストスタイル: なし url(./img/001.png);
        }
 
    </スタイル>
</head>
  
<本文>
    <ul>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
        <li>成功とは他人を打ち負かすことではなく、自分自身を変えることです。 </li>
    </ul>
   
</本文>
</html>

結果プロット