超簡単！CSSで作った横向き棒グラフをコピペで設置出来る

グラフをよく使うサイトを計画していて
画像でやるか、何かしらのプラグインでやるか、CSSでやるかと考えたのですが

CSSが得意分野なので
CSSで作れば、シンプルに多用しやすいかなと思って作ってみました
シンプルながら実用性は有り、HTMLで作られているのでグラフの内容も検索結果に考慮されるので
画像を使うよりもSEO的に良いのではないかと思います

構造はとてもシンプルです
使うタグは<ul>と<li>と<span>
spanは右寄せに使うだけなので、必要なければ使わないだけでOK

<li>の数を増やせばグラフの数も増えます
棒グラフの色と幅はliにスタイルで指定しています、幅はwidthでパーセント指定
ピクセルでの指定でもOKです、背景画像はインライン化しているのでHTMLとCSSだけで表示出来ます

コード HTML

<ul class="graf">

    <li style="background:#E46C82;width:70%;">
    グラフ1
    <span>100ms</span>
    </li>

    <li style="background:#0D0D0D;width:85%;">
    グラフ2
    <span>100ms</span>
    </li>

    <li style="background:#008ECD;width:90%;">
    グラフ3
    <span>100ms</span>
    </li>

    <li style="background:#3EAC00;width:95%;">
    グラフ4
    <span>100ms</span>
    </li>

</ul>

コード CSS

.graf{
    margin: 0;
    padding: 0;
    list-style: none;
    background: url(data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAABCAIAAACkDpLCAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAA9JREFUGFdj+E8l8OjRIwAXIUpfpfMmxgAAAABJRU5ErkJggg==);
    border: 1px solid #000;
}

.graf li {
    height: 40px;
    padding: 10px 0;
    line-height: 40px;
    margin: 20px 0;
    color: #fff;
    font-weight: bold;
    padding-left: 10px;
    font-size: 15px;
}

.graf li span {
    padding-right: 10px;
    font-size: 15px;
    font-weight: 600;
    float: right;
}

あとは、使っているテンプレート等のCSSに追加してやれば
いつでもグラフを簡単に設置できちゃいます