# プログレスバーのCSS実装

> HTML標準の<progress>要素をスタイリングした進捗バー。意味付けはブラウザ任せで、装飾だけをCSSで整えます。

- カテゴリ: 表示・フィードバック
- URL: https://www.css-dictionary.com/recipes/progress-bar/

## HTML

```html
<label class="progress-label" for="upload">
  アップロード中
  <span class="progress-pct">60%</span>
</label>
<progress id="upload" max="100" value="60"></progress>
```

## CSS

```css
.progress-label {
  display: flex;
  justify-content: space-between;
  width: 260px;
  font-size: 13px;
  font-weight: 600;
  color: #5c5445;
}

.progress-pct {
  font-variant-numeric: tabular-nums;
  color: #8a7d63;
}

progress {
  display: block;
  width: 260px;
  height: 10px;
  margin-top: 6px;
  appearance: none; /* 標準の見た目を外す */
  border: none;
  border-radius: 999px;
  overflow: hidden; /* 角丸から中身がはみ出ないように */
  background: #e2d8c2; /* Firefoxのトラック */
}

/* Chrome/Safari系: トラックと値の2つの疑似要素 */
progress::-webkit-progress-bar {
  background: #e2d8c2;
}

progress::-webkit-progress-value {
  background: linear-gradient(90deg, #b0413e, #d9a441);
  border-radius: 999px;
}

/* Firefox: 値はこちら */
progress::-moz-progress-bar {
  background: linear-gradient(90deg, #b0413e, #d9a441);
  border-radius: 999px;
}
```

## 仕組みの解説

divで自作せず<progress>を使うと、value/maxの意味が支援技術へそのまま伝わります。装飾はブラウザ2系統の疑似要素に同じ見た目を書きます: Chrome/Safariは ::-webkit-progress-bar（トラック）と ::-webkit-progress-value（値）、Firefoxは ::-moz-progress-bar（値）とprogress自体のbackground（トラック）です。この2系統はセレクタをまとめて書けないため、別々のルールにします。

## 実装のポイント

色を変えるだけならaccent-color: #b0413e;の1行でも足ります（グラデーションは不可）。valueなしの<progress>は不確定（インジケータ）表示になります。

## AIに依頼するときの文例

HTML標準の<progress>要素をスタイリングしてください。appearance: noneでリセットし、::-webkit-progress-bar / ::-webkit-progress-value / ::-moz-progress-barの両系統にグラデーションの進捗バーを実装してください。

## 使っているプロパティ

- [appearance](https://www.css-dictionary.com/property/appearance.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)
- [overflow](https://www.css-dictionary.com/property/overflow.md)
- [width](https://www.css-dictionary.com/property/width.md)