パーツ番号 04-13-10 ・ CSSのみ

カテゴリ別複数評価入力(味・接客・雰囲気)

複数の評価項目ごとに星評価を並べた入力欄。飲食店レビューや宿泊施設の詳細評価フォームのデザイン見本に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-13-10-list">
          <div class="d04-13-10-row">
            <span class="d04-13-10-cat">味</span>
            <span class="d04-13-10-stars">
              <span class="d04-13-10-star on">&#9733;</span><span class="d04-13-10-star on">&#9733;</span><span class="d04-13-10-star on">&#9733;</span><span class="d04-13-10-star on">&#9733;</span><span class="d04-13-10-star">&#9733;</span>
            </span>
          </div>
          <div class="d04-13-10-row">
            <span class="d04-13-10-cat">接客</span>
            <span class="d04-13-10-stars">
              <span class="d04-13-10-star on">&#9733;</span><span class="d04-13-10-star on">&#9733;</span><span class="d04-13-10-star on">&#9733;</span><span class="d04-13-10-star on">&#9733;</span><span class="d04-13-10-star on">&#9733;</span>
            </span>
          </div>
          <div class="d04-13-10-row">
            <span class="d04-13-10-cat">雰囲気</span>
            <span class="d04-13-10-stars">
              <span class="d04-13-10-star on">&#9733;</span><span class="d04-13-10-star on">&#9733;</span><span class="d04-13-10-star on">&#9733;</span><span class="d04-13-10-star">&#9733;</span><span class="d04-13-10-star">&#9733;</span>
            </span>
          </div>
        </div>

CSS

.d04-13-10-list{display:flex;flex-direction:column;gap:10px;width:220px}
        .d04-13-10-row{display:flex;align-items:center;justify-content:space-between}
        .d04-13-10-cat{font-size:12px;color:#475569;font-weight:700;width:60px}
        .d04-13-10-stars{display:flex;gap:2px}
        .d04-13-10-star{font-size:16px;color:#e2e8f0}
        .d04-13-10-star.on{color:#fbbf24}

クラス名 .d04-13-10 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。