2015年2月16日月曜日

【CSS】 li要素(リスト)を装飾する

li要素はデフォルトだと「・」のような無味乾燥なものになってしまうので装飾したい場合のメモ。

まずはデフォルトのスタイルをリセット


ul {
  margin: 0; /* 上下左右のマージンを0 */
  padding: 0; /* 上下左右のパディングを0 */
}
li {
  list-style-type: none; /* リストマーカーを表示しない */
}


その上で一番簡単なやり方。


ul {
  padding-left: 20px; /* マーカー表示分の左パディング */
}
ul li {
  list-style-image: url("gazo.gif"); /* マーカー画像 */
}



0 コメント:

コメントを投稿