HTMLを記述する

まずはHTMLを記述していきましょう。今回は項目の先頭は数字でないので「ul」で「li」を囲んでいきます。

背景を設定する

HTMLを記述したら背景を設定してみましょう。デザインを見るとリスト全体に背景が設定されているので「ul」タグに背景色を設定します。

＜css＞

            ul {
            background: #E9F1FF;　/*背景色を指定*/
            }
          

設定すると以下のように黒ぽちを除くテキスト部分にしか背景がありません。今回は黒ぽちにも背景を敷きたいので、次で説明する「表示位置を内側にする」という設定を行います。

表示位置を内側にする

デフォルトだと上の画像のように表示位置が外側（outside）になっており、黒ぽちに背景が敷かれておりません。今回は黒ぽち含むリスト全体に背景を付けたいので、表示位置を内側にします。表示位置は「list-style-position」プロパティで指定します。

＜css＞

            ul {
            list-style-position: inside;　/*表示位置を内側に指定*/
            background: #E9F1FF;　/*背景色を指定*/
            }
          

そうすると以下のように黒ぽちも内側に入りました。
ちなみにデフォルトのように外側に指定する場合は「outside」を指定します。

余白を設ける

無事リスト全体に背景を設定できたところで、次は余白を指定していきます。「見た目の情報」に記載の通りリスト全体から余白が「20px」なので「padding」プロパティを使用していきます。

＜css＞

            ul {
              padding: 20px; /*余白の指定*/
            list-style-position: inside;　/*表示位置を内側に指定*/
            background: #E9F1FF;　/*背景色を指定*/
            }
          

少しずつ見た目が整ってきましたね。

枠線を設定する

完成形には枠線がありますので「見た目の情報」通りの太さ「2px」と枠線の色「#7B94C6」を指定します。枠線は「border」プロパティを使用します。

＜css＞

            ul {
            padding: 20px; /*余白の指定*/
            list-style-position: inside;　/*表示位置を内側に指定*/
            border: 2px solid #7B94C6;　/*枠線の指定*/
            background: #E9F1FF;　/*背景色を指定*/
            }
          

だいぶ完成形に近づいてきましたね。

補足ではありますが、線の種類はいろいろあります。今回は1本の実線ですが、破線や点線にも指定することが可能です。主な値は以下の通りです。

指定方法	説明	表示イメージ
solid	1本の実線
double	2本の実線
dashed	破線
dotted	点線
groove	立体的な谷型の線
ridge	立体的な山形の線
inset	囲まれた部分が凹んで見える 立体的な線
outset	囲まれた部分が浮き上がって 見える立体的な線

テキストの色を指定する

次にテキストを「見た目の情報」の指定の色に沿って設定します。テキストの色を設定する際は「color」プロパティを使用します。指定する要素は「ul」「li」タグのどちらでも大丈夫です。ただ、「ul」タグに指定するとリスト全体のテキストが指定の色になってしまうので、部分的にテキストの色を調整したい場合は各要素に指定するのが良いと思います。

＜css＞

            ul {
            padding: 20px; /*余白の指定*/
            list-style-position: inside;　/*表示位置を内側に指定*/
            color: #7B94C6;　/*テキストの色を指定*/
            border: 2px solid #7B94C6;　/*枠線の指定*/
            background: #E9F1FF;　/*背景色を指定*/
            }
          

テキストの色が変更できたらあとは黒ぽち部分の設定だけになりました。

黒ぽちの種類を変更する

現時点では「ul」タグでリストを作成しているのでデフォルトが黒ぽちになっているのですが、この黒ぽち部分は「list-style-type」プロパティで変更することができます。結構種類があるので、以下の表には主によく使用される値をまとめてみました。

今回は黒ぽち部分が四角なので「square」を指定します。

＜css＞

            ul {
            padding: 20px; /*余白の指定*/
            list-style-position: inside;　/*表示位置を内側に指定*/
            list-style-type: square;　/*黒ぽちの種類の指定*/
            color: #7B94C6;　/*テキストの色を指定*/
            border: 2px solid #7B94C6;　/*枠線の指定*/
            background: #E9F1FF;　/*背景色を指定*/
            }
          

これで実装は完了です。お疲れ様でした！