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

はじめに

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

プラグイン情報をブロックあるいはショートコードで表示します。
(0) 最終更新: 4か月 前
1,256ダウンロード 検証済み: 5.5.3
ダウンロード: リリース: 2016-01-01
テーマ情報をブロックあるいはショートコードで表示します。
(0) 最終更新: 4か月 前
164ダウンロード 検証済み: 5.5.3
ダウンロード: リリース: 2020-04-14

コード

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

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

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

この記事を書いた人