CodeGrid 12th Event Site

工程を説明するUIの制作

全1回

料理工程やサービスの登録フローの説明など、「手順を追って説明するUI」のHTML/CSSの実装例を解説します。工程ごとの数字には、CSSカウンターを利用しましょう。

順番の数字と画像、説明文を配置する

手順を追って説明するUIのHTMLとCSSを考えます。工程ごとの順番を示す数字は、CSSのルールによって増減して、その回数をカウントできるCSSカウンターを利用してみましょう。