CSSで作るゲージのデザイン方法
ゲージはどのくらいの%なのかを直感的に示すことができます。
「CSSでゲージをどうやって作るの？」
CSSで作るゲージのデザイン方法を紹介します。
横ゲージ
<style>
.example{
border: 1px solid #333;
background: #999;
width: 200px;
margin: 10px 0;
}
.example>div{
height: 10px;
background: #78d461;
}
</style>
<div class="example">
<div style="width:85%"></div>
</div>
<div class="example">
<div style="width:22%"></div>
</div>親要素は外枠、空白色、全体幅
親要素となるdivは外枠、全体幅、空白色を決める役割があります。
外枠はborderで指定します。
ゲージの空白となる部分はここの背景色（background）で表現します。
空白部分ですので無彩色（白黒グレー）か透明がいいでしょう。
枠か背景色かで全体を示さないとゲージとしての役割を果たせないためどちらかは指定しましょう。
ゲージ全体の幅をwidthで指定しましょう。
子要素がメインゲージ。高さとゲージ色を決める
子要素となるdivがメインゲージです。
ここで高さ（height）を指定します。これに合わせて親要素の高さも決まります。
背景色はそのままゲージの色となるため、目立つ色がいいでしょう。
ゲージの横幅はwidthを%指定します。
これで親の幅（最大幅）に対してどの程度か表現できます。
状況に応じて頻繁に数値が変わるでしょうから、style属性を使ってhtmlに直接記述します。
値自体はphpやjavascriptなどのプログラミング言語で書き変えましょう。
値は下記の計算で成り立ちます。
（現在値/全体値）×100％
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
グラデーションゲージ
ゲージとなる子要素の背景色をグラデーションにすることでゲージをグラデーションにできます。
<style>
.example2{
border: 1px solid #333;
background: #999;
width: 200px;
margin: 10px 0;
}
.example2>div{
height: 10px;
/*変更*/background: linear-gradient(to right,#ff5623,#d3ff42);
}
</style>
<div class="example2">
<div style="width:85%"></div>
</div>
<div class="example2">
<div style="width:22%"></div>
</div>グラデーションは下記のように指定します。
background: linear-gradient(to right,左のカラーコード,右のカラーコード);
グラデーションにすることでよりゲージらしくなります。
ただし、この場合ゲージの長さに関わらず始まりの色と終わりの色が同じで変化がありません。
グラデーションゲージ2
ゲージの長さで色が変わっているように見せてみましょう。
<style>
.example3{
border: 1px solid #333;
width: 200px;
margin: 10px 0;
/*変更*/background: linear-gradient(to right,#ff5623,#d3ff42);
/*追加*/display: flex;
/*追加*/justify-content: flex-end;
}
.example3>div{
height: 10px;
/*変更*/background: #999;
}
</style>
<div class="example3">
<div style="width:15%"></div>
</div>
<div class="example3">
<div style="width:78%"></div>
</div>親要素のグラデーションを子要素のグレーで隠している状態です。
子要素を右寄せにするために親要素にdisplay: flexとjustify-content: flex-endを指定しています。
子要素の幅の値は先ほどまでとは逆になります。
値は下記の計算で成り立ちます。
{（全体値-現在値）/全体値}×100％
または
100% - {（現在値/全体値）×100％}
縦ゲージ
縦ゲージは横ゲージと基本的には同じですがところどころ違います。
<style>
.example4{
border: 1px solid #333;
height: 200px;
width: 10px;
background: #999;
display: flex;
align-items: flex-end;
}
.example4>div{
width: 100%;
background: #78d461;
}
</style>
<div class="example4">
<div style="height:85%"></div>
</div>縦(height)も横(width)も親要素に指定します。
メインゲージとなる子要素を下寄せにするために、親要素に「display: flex」と「align-items: flex-end」を指定します。
親要素に「display: flex」が指定されていると子要素の幅は最小限になってしまうため子要素に「width: 100%」を指定します。
ゲージの長さは子要素のstyle属性に直接heightを指定しましょう。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
