難易度をあわらすレベルインジケーターのCSSを作ってみた

※当サイトにはプロモーションが含まれています。

クライアント

難易度を表わすレベルインジケーターを作成してくれ！

にゃテック

こんなやつかにゃ？

レベルインジケーター

クライアント

そうだ、これをHTMLとCSSで作成してくれ！

ゲームや教育コンテンツなど、特定の能力やスキルレベルを示す際に使われることがあるのが、レベルインジケーター (level indicator)です。

これらは、評価バー (rating bar)や、難易度バー (difficulty bar)などとも言われています。

今回は、このレベルインジケーターをHTMLとCSSで作成してみました。

レベルインジケーターのCSS

難易度をあわらすレベルインジケーターのCSSです。

HTML

<div class="nya-difficulty-labels">
<span>易しい</span>
<span>普通</span>
<span>難しい</span>
</div>

<!-- 易しい 30%の例 -->
<div class="nya-difficulty-bar-container">
<div class="nya-difficulty-bar"></div>
<div class="nya-difficulty-cover" style="width: 70%;"></div>
</div>

このHTMLを記述することで、レベルインジケーターが表示されるようになります。

style=”width: 70%;と記述すると、70%の部分が薄い灰色（#efefef）で塗りつぶされるため、30%の部分がカラーで表示されます。

その為、難しい 90％を表示したい場合は、

<div class="nya-difficulty-labels">
<span>易しい</span>
<span>普通</span>
<span>難しい</span>
</div>

<!-- 難しい90%の例 -->
<div class="nya-difficulty-bar-container">
<div class="nya-difficulty-bar"></div>
<div class="nya-difficulty-cover" style="width: 10%;"></div>
</div>

上記のように、style=”width: 10%;と記述します。

CSS

.nya-difficulty-bar-container {
width: 80%;
background-color: #efefef; /* グレー: 残りの部分 */
height: 30px;
border-radius: 15px;
margin: 20px auto;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
overflow: hidden; /* コンテナを超えないように */
position: relative;
}

.nya-difficulty-bar {
width: 100%;
height: 100%;
background: linear-gradient(to right, #3498db, #f39c12, #e74c3c); /* 青→オレンジ→赤のグラデーション */
position: absolute;
top: 0;
left: 0;
}

.nya-difficulty-cover {
height: 100%;
background-color: #efefef; /* グレー: カバー部分 */
position: absolute;
top: 0;
right: 0;
}

.nya-difficulty-labels {
display: flex;
justify-content: space-between;
width: 80%;
margin: 10px auto;
font-size: 14px;
color: #333;
}

.difficulty-bar-containerは、難易度バー全体のコンテナです。

背景色をグレー (#efefef) に設定し、バー全体のサイズと形状を決定しています。

.difficulty-barは、グラデーションが適用されるバーです。

このバーはwidth: 100%で設定されており、青からオレンジ、そして赤へのグラデーションが全体にわたって表示されます。

.difficulty-coverは、グレーのカバー部分です。

このカバーがバーの上に配置され、指定された割合だけ残りの部分を覆います。

例えば、30%の例では、カバーが70%の幅で右側から配置され、左側の30%だけがグラデーションの色を表示するようにしています。

実際に、コードを記載すると、こんな感じで表示されます。

易しい
普通
難しい

※例として、3パターンを記載

スマホにも対応しています。

なお、メータの要素を下記のようにパーセント表示すれば、満足度などを表わす評価バー (rating bar)として活用することもできます。

<div class="nya-difficulty-labels">
<span>0％</span>
<span>50％</span>
<span>100％</span>
</div>

<div class="nya-difficulty-bar-container">
<div class="nya-difficulty-bar"></div>
<div class="nya-difficulty-cover" style="width: 20%;"></div>
</div>

0％
50％
100％