リストに画像を指定する

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

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

  6. リストを作る

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

ランダムピックアップ