CSSで見出しタグに連番をつけて「手順書」っぽくする - Qiita

CSSで見出しタグに連番をつけて「手順書」っぽくする - Qiita

この投稿では見出しタグに連番をふったり、装飾したりして手順をいいかんじに表現する方法を紹介します...概要を表示 この投稿では見出しタグに連番をふったり、装飾したりして手順をいいかんじに表現する方法を紹介します。 実現したいこと 次のようななんの変哲もないHTMLにスタイルを当てて、 <h1>カレーライスの作り方</h1> <div class="steps"> <h2>野菜と肉を切る</h2> <p>いい感じの大きさに野菜と肉を切ります。</p> <h2>煮込む</h2> <p>切った具材を鍋に入れて煮込みます。</p> <h2>味付け</h2> <p>カレールーなど調味料を入れて完成です。</p> </div> 下のように各ステップに1,2,3と連番がついた表示になるようにしたいと思います。 見出しに連番をつけたり、装飾したりして「手順」を表現する方法 いきなりですが、完成形のCSSを示します。細かい説明はコード内にコメントで書いてあるのでご覧ください。 .steps { /* 連番カウンター名の

• css
• qiita