リストに画像を指定する

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

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. フッターを作成する

  3. リンクを装飾する

  4. ウェブサイトを公開する方法

  5. Crescent Eveをダウンロード

  6. 表を装飾する

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

ランダムピックアップ