横棒グラフにパーセンテージをつける

ちょっとHTMLを久々に書いたのでメモ投稿

<style>
.base {
    margin-top: 15px;
    width: 150px;
    height: 10px;
    background-color: #eceff1;
    position: relative;
}

.graph {
    height: 100%;
    background-color: #0091ea; z-index: 99;
}

.memory {
    position: absolute;
    color: #bdbdbd;
    font-size: 8px;
    width: 2px;
    height: 5px;
    top: -11;
}

</style>

<div class="base">
    <div class="memory" style="left: 75;">50</div>
    <div class="memory" style="left: 150;">100</div>

    <div class="graph" style="width: 30%"></div>
</div>


<div class="base">
    <div class="memory" style="left: 75;">50</div>
    <div class="memory" style="left: 150;">100</div>

    <div class="graph" style="width: 80%"></div>
</div>

<div class="base">
    <div class="memory" style="left: 75;">50</div>
    <div class="memory" style="left: 150;">100</div>

    <div class="graph" style="width: 10%"></div>
</div>


<div class="base">
    <div class="memory" style="left: 75;">50</div>
    <div class="memory" style="left: 150;">100</div>

    <div class="graph" style="width: 100%"></div>
</div>

[PR] おすすめの本

この記事を書いた人

Nな人（えぬなひと）。
Nは本名から取っています。
Laravelが大好きなPHPerで、WEBを作るときはLaravelを技術スタックに絶対推すマン。
PHP、Pythonと、昔はperlを書いていたP言語エンジニア。
最近はNimを書いたりしています。