progress タグで五つ星レビューの横棒グラフを作成

はじめに

WordPress の話題では無いのですが、以下のプラグインを作成する際に、五つ星表示レビューの横棒グラフを今まで見た事が無い方法で作成しました。それが簡単だったのでシェアします。

Plugin Stats View

プラグイン情報をブロックあるいはショートコードで表示します。

作者: Katsushi Kawamori

(1) 最終更新: 4か月 前

5,019ダウンロード 検証済み: 6.8.2

ダウンロード: リリース: 2016-01-01

2025-09-27 09:27 時点の統計

Theme Stats View

テーマ情報をブロックあるいはショートコードで表示します。

作者: Katsushi Kawamori

(0) 最終更新: 5か月 前

2,976ダウンロード 検証済み: 6.8.2

ダウンロード: リリース: 2020-04-14

2025-09-27 09:27 時点の統計

コード

タイトルの通り、progress タグで作成しました。progress 以外の CSS はインラインにしています。

• ３列（題名、横棒、数）を、inline-block で揃えます。
• progress の、value に割合（％）max に 100 を指定します。
  • コードでは、５行分書いてありますが、プログラムの中で、５ループさせれば簡単です。
• progress の CSS は、ブラウザ毎に、異なりますのでコードをみてください。

See the Pen yLYJvRy by Katsushi Kawamori (@dodesyo312) on CodePen.