最近
極鶏のラーメンが食べたいです
ついでに言うと猪一のラーメンも食べたいです
目次
- 目標
- HTML
- CSS
目標
リストの入れ子で通常のリストだと↓見えにくい。
↓こんな感じのリストを作る
HTML
今回はolで括りましたがulでも大丈夫です。
それぞれのolにfirst second thirdなどの対応する階層の任意のクラスをつける。
index.html
<olclass="first-layer"><li>1つ目の階層リスト－１</li><li>1つ目の階層リスト－２</li><olclass="second-layer"><li>２つ目の階層リスト－１</li><li>２つ目の階層リスト－２</li><olclass="third-layer"><li>３つ目の階層リスト－１</li></ol></ol><li>1つ目の階層リスト－３</li><olclass="second-layer"><li>２つ目の階層リスト－１</li><olclass="third-layer"><li>３つ目の階層リスト－１</li><li>３つ目の階層リスト－２</li></ol><li>２つ目の階層リスト－２</li></ol></ol>CSS
counterとmarkerを使い、作っていきます。
olが実行される度にcounter-resetで 加算していた num を0にする。
(int num=0;の気持ち)
ol{counter-reset:num;}counter-incrementで num に加算していく。
リストがある度に1加算される。
(num++; の気持ち)
li{counter-increment:num;}リストの後ろにmarkerを作り、そのcontentに num の数値を出力する。
(print(num) の気持ち)
li:before{display:marker;content:counter(num_f)". ";}以上を階層ごとに設定していく。
style.css
li{list-style-type:none;list-style-position:inside;}ol.first-layer{counter-reset:num_f;}.first-layerli{counter-increment:num_f;}.first-layerli:before{display:marker;content:counter(num_f)". ";}ol.second-layer{counter-reset:num_s;}.second-layerli{counter-increment:num_s;}.second-layerli:before{display:marker;content:counter(num_f)'.'counter(num_s)". ";}ol.third-layer{counter-reset:num_t;}.third-layerli{counter-increment:num_t;}.third-layerli:before{display:marker;content:counter(num_f)'.'counter(num_s)"."counter(num_t)'. ';}できました！
おまけ
n.n.n.も作れます。
ol.first-layer{counter-reset:num_f;counter-reset:num_s;counter-reset:num_t;}.first-layerli:before{display:marker;content:counter(num_f)'.'counter(num_s)"."counter(num_t)'. ';}ol.second-layer{counter-reset:num_s;counter-reset:num_t;}.second-layerli:before{display:marker;content:counter(num_f)'.'counter(num_s)"."counter(num_t)'. ';}※変更した箇所を記載
参考
マーカー
http://www6.plala.or.jp/go_west/nextcss/reference/article/marker.htm