<h1 id="h2e03bd9323">olタグ</h1> HTMLで番号付きのリストを使いたい場合は<code>&lt;ol&gt;</code>タグを使います。 自動で上から採番されるのでとっても便利。 こういうやつですね。 <ol><li>aaa</li><li>bbb</li><li>ccc</li></ol> <pre><code>[html:HTML]
&lt;ol&gt;
 &lt;li&gt;aaa&lt;/li&gt;
 &lt;li&gt;bbb&lt;/li&gt;
 &lt;li&gt;ccc&lt;/li&gt;
&lt;/ol&gt;</code></pre> このマーカーはわりと好きなように変更できます。標準で用意されているマーカーは以下を参照。 <a href="https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type" target="_blank" rel="noopener noreferrer">list-of-type | MDN</a> <h1 id="h037a27c673">オリジナルマーカー</h1> 以下のような採番をしたいときのサンプルです。 a-1. aaaa-2. bbba-3. ccc <pre><code>[css:CSS]
ol {
 list-style: none;
}
ol li {
 counter-increment: li;
}
ol li::before {
 content: 'a-' counter(li) '. ';
}</code></pre> SCSSで書くと以下のような感じ。 <pre><code>[scss:SCSS]
ol {
 list-style: none;

 &amp; &gt; li {
 counter-increment: li;

 &amp;::before {
 content: 'a-' counter(li) '. ';
 }
 }
}</code></pre> <code>li</code>に疑似要素<code>::before</code>や<code>::after</code>を使うことでいろいろなオリジナルマーカーを作れます。

ゆったりWeb手帳

気になったことをのんびり書くよ