アジェンダ
- リストのマーカー
- ulで指定できるもの
- olで指定できるもの
- マーカーの位置
- 実践
リストのマーカー
リストのマーカーを指定する場合、以下のように書く。
list-style-type: 値;
指定できる値(マーカーの種類)は、ulとolで異なる。
ulで指定できる単語
- disc
- 黒い丸
- circle
- 白い丸
- square
- 黒い四角
など。ほかにもさまざまな種類がある。
olで指定できる単語
- decimal
- 数字
- decimal-leading-zero
- 0埋めした数字
- lower-roman
- 小文字のローマ数字
- lower-alpha
- 小文字のアルファベット
など。ほかにもさまざまな種類がある。
マーカーの位置を指定する場合、以下のように書く。
list-style-position: 値;
値は以下の単語で指定する。
- inside
- マーカーをブロックの内側に表示させる。
- outside
- マーカーをブロックの外側に表示させる。
実践
上記の内容を用いて、以下のindex.htmlとstyle.cssを作成した。
index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><linktype="text/css"rel="stylesheet"href="./style.css"><title>言語</title></head><body><h1>好きな言語</h1><p><ulclass="circle"><li>Python</li><li>C++</li><li>Java</li></ul></p><h1>学んでみたい言語ランキング</h1><p><olclass="lower-roman outside"><li>JavaScript</li><li>Go</li><li>PHP</li></ol><olclass="lower-roman inside"><li>JavaScript</li><li>Go</li><li>PHP</li></ol></p></body></html>style.css
.outside{list-style-position:outside;}.inside{list-style-position:inside;}.circle{list-style-type:circle;}.lower-roman{list-style-type:lower-roman;}これをWebブラウザに表示させるとこんな感じ。
注目すべきは下のolの差。
list-style-positionを指定した時、
- outside : リストに書き込む内容の頭位置を揃えている
- inside : リストのマーカーの先頭を揃えている
という違いがある。
おわりに
今回は、リスト表示の変更方法の内容だった。
マーカーは結構趣味が出そうだと思った。
ちなみに好きな言語と学んでみたい言語は真実です。C++いいね。
次回 >> ☆まだ☆