リスト

HTML・CSS・JavaScriptで作ったリストのデザイン・コード集です。コピペで簡単にご利用頂けます。リストは項目の羅列に使い、情報の整理と理解を助けます。マーカーや番号により順序や階層構造も伝えやすくなります。

全件

    • Item 1
    • Item 2
    • Item 3

    ボックス枠リスト

    各項目を枠囲み

    • Item 1
    • Item 2
    • Item 3

    角丸カード風リスト

    各項目がカード風

    • 完了済み項目
    • 確認済み項目
    • 承認済み項目

    チェックアイコンリスト

    緑チェックを付加

    • Item 1
    • Item 2
    • Item 3

    カラー循環リスト

    虹色に変化循環

    • Item 1
    • Item 2
    • Item 3

    カラー波紋リスト

    色変化が波紋のように

    • Item 1
    • Item 2
    • Item 3

    仕切り線リスト

    線で区切り視認性

    • Item 1
    • Item 2
    • Item 3

    フェードインリスト

    順に透明→表示

    • Item 1
    • Item 2
    • Item 3

    グラデ背景リスト

    横グラデの彩色

    • Item 1
    • Item 2
    • Item 3

    ホバー強調リスト

    触れると背景変化

    • ✔ Item 1
    • ✔ Item 2
    • ✔ Item 3

    アイコン付きリスト

    各項目にアイコン追加

    • Item 1
    • Item 2
    • Item 3

    線付き左寄せリスト

    左に強調ライン表示

    • Item 1
    • Item 2
    • Item 3
    • Item 4

    マーキースクロール

    左右に流れる一覧

    • Item 1
    • Item 2
    • Item 3

    モノクロームリスト

    グレートーンで統一

    1. Step 1
    2. Step 2
    3. Step 3

    番号付きシンプルリスト

    デフォルトの番号表示

    1. Step 1
    2. Step 2
    3. Step 3

    丸囲み番号リスト

    番号を円で囲む

    1. Phase 1
    2. Phase 2
    3. Phase 3

    番号のカラーグラデ

    番号がグラデ変化

    1. Zoom 1
    2. Zoom 2
    3. Zoom 3

    ホバー拡大番号リスト

    番号が拡大アニメ

    1. Step A
    2. Step B
    3. Step C

    番号付きラインリスト

    番号＋左線付き表示

    1. Task A
    2. Task B
    3. Task C

    番号右寄せラベル風

    番号が右に表示される

    • Item 1
    • Item 2
    • Item 3

    ポップアップ拡大リスト

    拡大アニメで目立つ

    • 通知1
    • 通知2
    • 通知3

    パルス効果アイコンリスト

    アイコンが明滅表示

    • Item 1
    • Item 2
    • Item 3

    パルス点滅リスト

    明滅して存在感UP

    • Item 1
    • Item 2
    • Item 3

    シャドー付きリスト

    項目に影を追加

    • Item 1
    • Item 2
    • Item 3

    シンプルリスト

    ミニマルで整然表示

    • Item 1
    • Item 2
    • Item 3

    スライドインリスト

    左から順に出現

    • Item 1
    • Item 2
    • Item 3

    上昇スライドリスト

    上にスライド表示

    • Loading 1
    • Loading 2
    • Loading 3

    回転アイコンリスト

    アイコンが回転表示

    • 注目ポイント
    • 重要項目
    • おすすめ

    星マーク付きリスト

    各項目に星を表示

    • Item 1
    • Item 2
    • Item 3

    丸角タグ風リスト

    バッジ風スタイル

    • Item 1
    • Item 2
    • Item 3

    ウェーブ下線リスト

    波打つ下線が動く

ソースコード
このページのトップへ戻る