【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 件のコメント :

コメントを投稿