BLOG

意外と知られていない CSSで番号出力

| HTML / CSS

リストとかで頭に数字を付けたりすることがあるとおもうんです

  1. こんな感じ
  2. 順番に出す場合
  3. olつかったりして番号だしたり
  4. してますよねー
  5. もしくはsassとかでfor文つかったり

こんな感じで使えますよね。
cssだけで、olとかulとかじゃなくてもできるようになります。

こんな感じで使えます。
僕がよく使う方法としては

// sectionという名前でカウンターを設定しますっていう宣言 0を設定します。
body{
  counter-reset: section;
}

// counter-incrementでsectionのカウントを+1します。
// counter(section)で出力
h3{
  counter-increment: section;
  &::before {
    content: counter(section);
  }
}

結構簡単に設定できます。
CSS結構長い間使ってますが、こんなのがあったなんてつい最近まで知りませんでした。
知っていれば結構便利ですよね。

RECENT POSTS

WordPressでIDから本文を取得する

[PHP] 配列内の空白を削除「array_filter」「array_diff」

[PHP] 配列内の同じ値をまとめる「array_unique」

WordPressのカスタムフィールドでソートする

連想配列から特定の値を取得して配列にいれちゃうってやつ

JavaScriptで取得するGETの値

【CSS】text-decorationのカスタマイズができるの知ってた?

CSSでフッターの下に隙間ができないように調整する

「reduce」を使って配列を値を処理する

data属性の取得・設定・更新【JavaScript】

CATEGORY

POPULAR POSTS

PAGE TOP