CSS

【CSS】モバイルフォールバックを備えたシンプルなCSSの棒グラフCSS Bar Graph

December 9, 2017
CSS Bar Graph

CSS Bar Graphは、モバイルフォールバックを備えたシンプルなCSSの棒グラフ。

HTML

    <table id="bar-graph">
        <caption>Web Performance Results</caption>
        <thead>
            <tr>
                <th></th>
                <th class="before">Before</th>
                <th class="after">After</th>
            </tr>
        </thead>
        <tbody>
            <tr id="section-1">
                <th scope="row">Initial Load Time</th>
                <td class="before bar"><p>4.7s</p></td>
                <td class="after bar"><p>1.1s</p></td>
            </tr>
            <tr id="section-2">
                <th scope="row">Visually Complete</th>
                <td class="before bar"><p>3.1s</p></td>
                <td class="after bar"><p>1.5s</p></td>
            </tr>
            <tr id="section-3">
                <th scope="row">Fully Loaded</th>
                <td class="before bar"><p>4.8s</p></td>
                <td class="after bar"><p>1.4s</p></td>
            </tr>
        </tbody>
    </table>
    <div id="ticks">
        <div class="tick"><p>5.0s</p></div>
        <div class="tick"><p>4.0s</p></div>
        <div class="tick"><p>3.0s</p></div>
        <div class="tick"><p>2.0s</p></div>
        <div class="tick"><p>1.0s</p></div>
        <div class="tick"><p>0.0s</p></div>
    </div>

MIT