リスト表示は冒頭部分にインデントが設定され、改行が生じた際に見やすくなる便利な書式である。
ところが、一般的に知られているulタグやliタグは許容される使用パターンが狭いブロック要素であり、margin等が初期設定されていていちいち体裁を整える必要があるなど、意外に柔軟性に欠け何かと使いづらい場面が多かったりする。
そこで、ul、liタグを使わず、インライン要素のみで簡易的に文字列をリストっぽく表示させるコードを作る。
【CSS】
.quasili_star { display: inline-block; position: relative; margin-left: 1.1em; } .quasili_star span.mark::before { position: absolute; left: -1.1em; content: '★'; }
content: '★';
のクォーテーションの中身を変えることで、マーカーを自由に変更できる。
【HTML】
<span class="quasili_star"> <span class="mark"></span> 項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1 </span> <span class="quasili_star"> <span class="mark"></span> 項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2 </span> <span class="quasili_star"> <span class="mark"></span> 項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3 </span>
【表示例】
項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1項目1
項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2項目2
項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3項目3
特に難しいことはしていないが、『Hino-Tama-Basic』テーマに実装したので一応メモしておく。