リストの先頭についている点を消したい場合はどうしたらいいの
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
こちらはリストに順番がつくものです。
olタグの時だね
クリックで値が変わります
- list-style-type
- list-style-type
どちらの箇条書きが必要かで使い分けてください。
2.list-style-position
list-style-positionプロパティはリストマーカーの位置をボックスの内側に配置するのか、外側に配置するかを指定できます。
これによって余白の付け方が変わってくるのでリストマーカーを使用する際は意外と大事です。
セレクター{
list-style-position: 値;
}クリックで値が変わります
※わかりやすさのために背景色をつけてあります。
- list-style-position
insideoutside
3.list-style-image
list-style-imageプロパティはリストマーカーに画像を適用したい時に使用します。
上の２つのプロパティと異なるのは値に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-style-typeを使い、値は以下のものを入れる
- ulタグの場合
- circle(白丸)
- square(四角)
- disc(黒丸)
- none(消す)
- olタグの場合
- hiragana(ひらがな)
- lower-alpha(小文字のアルファベット)
- decimal(数字)
- ulタグの場合
- リストマーカーをボックスの内側か外側に変えるには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;”で大丈夫です
コメント