リストブロック｜数字（丸枠）

163 views
  1. テキストサンプル
  2. テキストサンプルテキストサンプルテキストサンプルテキストサンプル
  3. テキストサンプル

↓アイコンカラー変更

  1. テキストサンプル
  2. テキストサンプルテキストサンプルテキストサンプルテキストサンプル
  3. テキストサンプル

↓背景色追加

  1. テキストサンプル
  2. テキストサンプルテキストサンプルテキストサンプルテキストサンプル
  3. テキストサンプル
  1. テキストサンプル
  2. テキストサンプルテキストサンプルテキストサンプルテキストサンプル
  3. テキストサンプル
  1. テキストサンプル
  2. テキストサンプルテキストサンプルテキストサンプルテキストサンプル
  3. テキストサンプル
  1. テキストサンプル
  2. テキストサンプルテキストサンプルテキストサンプルテキストサンプル
  3. テキストサンプル

※ アイコンのカラー選択、背景色はリストブロックを囲っているグループブロックでします。

構造詳細

クラス名
bf-list-num--frame-border
CSS
ol.bf-list-num--frame-border {
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 2em;
    padding-left: 0;
    list-style-type: none;
    counter-reset: num;
}
.bf-list-num--frame-border li {
    display: flex;
    position: relative;
    padding-left: 1.75rem;
}
.bf-list-num--frame-border li:not(:last-child) {
    margin-bottom: 0.5rem;
}
.bf-list-num--frame-border li:before {
    display: flex;
    position: absolute;
    left: 0;
    counter-increment: num;
    content: counter(num)"";
    font-weight: bold;
    width: 24px;
    align-items: center;
    line-height: 1;
    height: 24px;
    justify-content: center;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid;
}
.has-background .bf-list-num--frame-border {
    padding: 1rem 1.5rem;
}

使い方

導入方法

  1. コピーボタンをクリック
  2. 投稿画面（エディタ）で右クリックしてプレーンテキストとして貼り付け

ー動画（予定）ー

オリジナルスタイルのルール

クラス名の付け方

  • 原則として使用するクラス名は1つとする
  • クラス名からは役割がわかるものとする
  • クラス名からはデザインのイメージがわかるものとする
  • 接頭語はbf-とする
  • デザインを意味する部分は–で繋ぐ
  • 詳細度は高め（ただしbodyなど広範囲に影響するのはNG）

CSSの書き方

  • 余白の値はできるだけremまたはpx
  • デフォルトカラー（うすめ）は#eee
  • デフォルトカラー（こいめ）は#333
  • colorとbackgroundは色設定から変更できることを頭に入れておく
  • 疑似要素をテキストの後ろにしたい場合は、親にzindex 0、疑似要素にzindex -1にしておく
  • importantは最低限なら使ってもいいと思う
0
関連記事
PULS

© PULS All rights reserved.