【list-style】リストに付く点の変更や削除【CSS】

list-styleのアイキャッチ
きなこ
きなこ

リストの先頭についている点を消したい場合はどうしたらいいの

こばゆた
こばゆた

list-styleプロパティを使うと消すことができるよ

<ul>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>
  • リスト
  • リスト
  • リスト
ul{
  list-style: none;
}
  • リスト
  • リスト
  • リスト
こばゆた
こばゆた

またlist-styleプロパティは消す事だけではなく形を変えたり、画像を使ったりということもできるんだ

もちろんそれ以外にも知っておく方が良い事もあるのでリストの装飾について解説していこうと思います。

またコチラでリストの基本を書いてありますのでよろしければどうぞ。

スポンサーリンク

1.list-style-type

list-style-typeプロパティを変えることで先頭に付くマークを変更できるプロパティです。なお何も指定しないと・(黒丸)になります。

ちなみにリストの前に付く点をリストマーカーといいます。

セレクター{
 list-style-type: 値;
}

値にボタンに書いてある値が入るとそのように変化します。

クリックで値が変わります

  • list-style-type
circle
square
disc
none

こちらはリストに順番がつくものです。

チャッピー
チャッピー

olタグの時だね

クリックで値が変わります

  1. list-style-type
  2. list-style-type
hiraganakatakanalower-alphadecimaldecimal-leading-zero

どちらの箇条書きが必要かで使い分けてください。

スポンサーリンク

2.list-style-position

list-style-positionプロパティリストマーカーの位置をボックスの内側に配置するのか、外側に配置するかを指定できます。

これによって余白の付け方が変わってくるのでリストマーカーを使用する際は意外と大事です。

セレクター{
 list-style-position: 値;
}

クリックで値が変わります

※わかりやすさのために背景色をつけてあります

  • list-style-position

insideoutside

3.list-style-image

list-style-imageプロパティリストマーカーに画像を適用したい時に使用します。

上の2つのプロパティと異なるのは値にurl( )を指定する所で、書かないと指定できません。

ちなみに画像の指定の仕方はコチラ

セレクター{
 list-style-image: url(ファイルの場所);
}

  • list-style-image
  • list-style-image

リストマーカーをマグロにしました(笑)。

注意点としてはあまり大きな画像にすると邪魔になるので注意です。

こばゆた
こばゆた

「普通のリストマーカーじゃ満足しないぜ」って方はどうぞ(笑)

4.list-style

list-styleプロパティは今まで見てきた3つのプロパティをまとめて書くことができるものになります。

セレクター{
 list-style: list-style-typeの値 list-style-positionの値 list-style-imageの値;
}

例としてリストマーカーを白丸にしつつ、余白の外に配置をする設定にしました。

見た目だけではあまり変化はわかりづらいですがCSSは機能しています。

ul{
 list-style: circle outside;
}
/*ul要素のリストマーカーを白丸にし、外側にする*/
  • list-style
  • list-style

また3つ値の順番は変わっても大丈夫ですがlist-style-typeとlist-style-imageを同時に指定した場合はlist-style-imageの方が優先されます。

ul{
 list-style: circle url(https://kbyt-programming.com/.png);
}
/*ul要素のリストマーカーを画像にする*/
  • list-style
  • list-style

リストマーカーに白丸とマグロを同時に設定していますがマグロの方が表示されています。

list-styleプロパティ(一括指定プロパティ)で値を省略すると初期値で上書きされてしまう事にも注意です。

  • リスト
  • リスト
  • リスト
<ul>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>
ul{
 list-style-type: circle;
}
/*ul要素のリストマーカーを白丸にする*/

list-style-typeに”circle”を指定していますが…。

<ul>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>
ul{
 list-style-type: circle;
 list-style: outside;
}

list-styleプロパティで”outside”を追加で指定すると…。

  • リスト
  • リスト
  • リスト

list-style-typeを”circle”に指定しているにも関わらず初期値である”disc”になっています。

これは簡単に言うと、list-styleプロパティを使って書くと指定していない値が初期値に上書きされるということです。

以下の表はそれぞれのプロパティの初期値になります。

初期値

list-styleの初期値

  • list-style-type: disc;
  • list-style-position: outside;
  • list-style-image: none;

この場合だとlist-style-positionの値は”outside”になってはいます。

5.まとめ

listまとめ
  • リストマーカーを変える場合はlist-style-typeを使い、は以下のものを入れる
    • ulタグの場合
      • circle(白丸)
      • square(四角)
      • disc(黒丸)
      • none(消す)
    • olタグの場合
      • hiragana(ひらがな)
      • lower-alpha(小文字のアルファベット)
      • decimal(数字)
  • リストマーカーをボックスの内側か外側に変えるにはlist-style-positionを使い、は以下のものを使う
    • inside(内側)
    • outside(外側)
  • リストマーカーに画像を使うにはlist-style-imageを使う
  • list-styleプロパティで上の3つをまとめて指定する事ができる
セレクター{
 list-style: list-style-typeの値 list-style-positionの値 list-style-imageの値;
}
  • 3つ値の順番は変わっても良い
  • list-style-typeとlist-style-imageを同時に指定した場合はlist-style-imageの方が優先される
  • list-styleプロパティを使うとその前にlist-style系が指定されていた場合上書きされそれぞれの以下にまとめた初期値になる

list-styleの初期値

  • list-style-type: disc;
  • list-style-position: outside;
  • list-style-image: none;
こばゆた
こばゆた

最後にはなりましたが、ただ単にリストの黒丸を消したいだけなら”list-style: none;”で大丈夫です

コメント

トップへ戻る