リストに画像を指定する

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

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と書いた方がすっきりかけたりします。
でも、私なんかは、面倒くさいのでいちいち4つの値を指定することが多いです^^;
そのあたりは、まぁ、お好みでどうぞ。


関連記事

  1. 自分の思い描いたデザインのウェブサイトを持てる

  2. “page2.html”へリンクする

  3. 自己表現ツールとしてのウェブサイト

  4. 文字のフォントを指定する

  5. 背景画像を設定する

  6. 小見出しをつける

お手本ナビの無料HPデザイン

ランダムピックアップ