(イ) リストに画像を指定する

現在、リストはただの●になっています。
これを画像にしてみましょう。スタイリッシュになるはずです。

ul {
   list-style-image: url(./images/icon.gif);
}

これだけです。

ここまでで、こんな感じになったはずです。

もちろん、このままでも構わないのですが、すこし、リストとサンプルバナーの隙間が足りないように感じました。

なので、これを修正したいと思います。

ulの下に余白を設定します。コードはこちら。

ul {
   list-style-image: url(./images/icon.gif);
 margin-bottom: 30px;
}

「あれ、余白はpaddingじゃなかったの？」とあなたは思うかもしれません。
はい。paddingも余白です。

しかし、ちらっと書きましたが、padding内側の余白です。
今回は、marign、外側の余白として設定しました。

例によって図にします。

というわけです。

なので、今回の場合は、下の図のように、下に30px余白が生まれるわけです。

※margin-bottom:30px;とmargin:0 0 30px 0;は同じように表示されます。ひとつしか値を指定しない場合は、margin-bottomと書いた方がすっきりかけたりします。
でも、私なんかは、面倒くさいのでいちいち４つの値を指定することが多いです＾＾；
そのあたりは、まぁ、お好みでどうぞ。

あなたも、サポートメールに参加しませんか？

『初めてWeb入門』に取り組んでくださっている方にサポートメールをお送りしています。
ここでは、『初めてWeb入門』では紹介し切れなかったウェブデザインの知恵を配信しています。
名前とメールアドレスだけで参加出来ますので、興味のある方は、ぜひご参加くださいね＾＾

※サポートメールは、いつでも解除できます。詳しくはサポートメールのページをご確認ください。