機能テスト 箇条書き

箇条書きとそれらをどう使うかを諸々考えて

箇条書きなので、何かしらの要点をそれぞれにまとめた文を書き出しているわけですが、使い方としてはそれだけにとどまりません。
例えば、当サイトでも時折使っていますが、新規に要件を追加したりする場合に、<ol>や<ul>の最初にアイテムを追加してもよいですが、bloggerにしても他のエディターにしても最後のリスト行で改行をすると自動で次のリストが補完できるようなものがあったりします。そうである場合には管理者がいちいち一番上にアイテムを作らずとも、下に追加すれば楽です。そしてそのリストアイテムの順番だけ逆になれば、書いている人は普通に書くだけなので良いのではないかということで入れたのがreverseです。

1. item 1
2. item 2
3. item 3
4. item 4
5. item 5

上記は通常の<ol>のリスト。

アイテムを逆順表示 reverse

1. item 5
2. item 4
3. item 3
4. item 2
5. item 1

順番が逆順かどうかがわかるように左側に逆順ですよという表示が出るようになっています。cssの疑似要素で入っているので、何かしらクラスを追加して、そのクラスがある時のreverseの疑似要素は非表示とすれば、任意の箇所だけこの表示を消すこともできます。

アイテムを逆順表示・マーカーも逆順に reverse + reversed属性

1. item 5
2. item 4
3. item 3
4. item 2
5. item 1

わかりやすいように<ol>でサンプルを作ってますが、これが<ul>である場合は最新が最初か最後かわからなかったりします。そのために逆順にしてますよと表示していますが、これらは例えば何かしらのランキングを最後から表示するような場合もあるかもしれません。

しかし<ol>であっても、リストアイテムを逆順にしているだけなのでアイテムの内容は逆順でもマーカーの数字はそのまま1から順番に振られていたりします。それも逆順にしたい場合は、次のようにreversed属性を足せば解決できます。

<ol class="reverse" reversed>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ol>

アイテムの折りたたみtruncate

15 /20
1. item 1
2. item 2
3. item 3
4. item 4
5. item 5
6. item 6
7. item 7
8. item 8
9. item 9
10. item 10
11. item 11
12. item 12
13. item 13
14. item 14
15. item 15
16. item 16
17. item 17
18. item 18
19. item 19
20. item 20
Show 5 more

15 /20
• item 1
• item 2
• item 3
• item 4
• item 5
• item 6
• item 7
• item 8
• item 9
• item 10
• item 11
• item 12
• item 13
• item 14
• item 15
• item 16
• item 17
• item 18
• item 19
• item 20
Show 5 more

逆順のリストを折りたたむ reverse + truncate + reversed属性

15 /20
1. item 20
2. item 19
3. item 18
4. item 17
5. item 16
6. item 15
7. item 14
8. item 13
9. item 12
10. item 11
11. item 10
12. item 9
13. item 8
14. item 7
15. item 6
16. item 5
17. item 4
18. item 3
19. item 2
20. item 1
Show 5 more

これは現在調整中です。けどもやりたいことは理解してもらえるかと。