Ribbit's works

ol, liタグと疑似要素だけで垂直ステップデザインを作る

#HTML
記事のトップ画像

Wordpressのテーマはおしゃれなものが多いですよね。

このサイトはGatsby.jsを使って自作しているんですが、デザインでもSEOでもなかなか勝てません。

その中でも、作業工程などを説明する際に便利なstep1, step2...と垂直方向に表示されるアレ。憧れます。

これ↓です。

  1. first step

    first content

  2. second step

    second content

  3. third step

    third content

なので今回は、できる限りタグを少なく、簡単に垂直ステップデザインを実装する方法を紹介します。

プロダクト

See the Pen oredered list with step by Ribbit (@local-bias) on CodePen.

解説

counter-resetについて

CSSでも変数のカウントアップのようなことができるみたいです、今回の実装で初めて知りました。

/** カウンターを定義 */
counter-reset: num;

/** カウンターを表示 */
counter(num);

/** カウントアップ */
counter-increment: num;

list-style-type: none;で標準のカウンターを無効化した上で、独自のカウンターを作成しています。

疑似要素の改行

タグ数を増やしたくなかったので、疑似要素の改行を使ってステップ表示を実装しました。

white-spaceにpreを指定した上で、content内に\Aと記述すると、その部分が改行文字扱いとなります。

white-space: pre;
content: "1行目\A2行目 ";