【 WEBデザイン 】 ポートフォリオでよく使うスキルのレイアウト FirE♯590
ポートフォリオサイトに使えそうなスキルの度合いを示すバーをコーディングします。
完成品はこのようなものです。
【 スキルバー 】
このようなスキルの度合いをドットで示したバーを作ります。
グリーンのドットと、ホワイトのドットで使えるスキルを示しています。
■ HTML
<!--HTML-->
<div class="skill-bar">
<p>HTML</p>
<div class="dots">
<div class="dot green"></div>
<div class="dot green"></div>
<div class="dot green"></div>
<div class="dot green"></div>
<div class="dot"></div>
</div>
</div>
<!--/HTML-->
グリーンにしたいドットにgreenクラスをつけています。
■ SCSS
.skill-bar {
width: 100%;
padding: 12px;
border-radius: 50px;
background-color: #CECBBC;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4%;
p {
font-size: 1.8rem;
color: #363636;
width: 40%;
text-align: center;
@include base-font;
}
.dots {
width: 50%;
display: flex;
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #fff;
margin-left: 4%;
}
.green {
background-color: #003D4D;
}
}
}
display:flexを使って、HTMLという文字<p>と、ドットの全体を囲む.dotsを横並びにしています。
さらに、.dotsの中にdisplay:flexを使って、.dotを横並びにしています。
ドットはborder-radius: 50%; で表現します。
■ ポイント
HTMLをコピペして行くことで、他のスキルバーを量産できます。
<!--CSS-->
<div class="skill-bar">
<p>CSS</p>
<div class="dots">
<div class="dot green"></div>
<div class="dot green"></div>
<div class="dot green"></div>
<div class="dot green"></div>
<div class="dot"></div>
</div>
</div>
<!--/CSS-->
<!--SCSS-->
<div class="skill-bar">
<p>SCSS</p>
<div class="dots">
<div class="dot green"></div>
<div class="dot green"></div>
<div class="dot green"></div>
<div class="dot green"></div>
<div class="dot"></div>
</div>
</div>
<!--/SCSS-->
<!--JS-->
<div class="skill-bar">
<p>JS</p>
<div class="dots">
<div class="dot green"></div>
<div class="dot green"></div>
<div class="dot green"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<!--/JS-->
<p>の中のスキル名を変えて、対応するドットの色を、.greenで変更します。
【 デザインの注意点 】
今回紹介したスキルの表示の仕方は、賛否が分かれると思います。
一番の問題は、「誰目線やねん」です。
自分のスキルを5点満点中4点とするのは、主観であります。
技術は進化しますから、満点ということは永遠にないと考えています。
この辺りは、主観の数値になることを前提にデザインします。
あくまでも目安ですね。
【 まとめ 】
ポートフォリオに使えるスキルバーのコーディングについて書きました。
ドットの数をもっと増やしたり、ドットではなく星マークにしたりとカスタマイズして使ってみてください。
この記事が気に入ったらサポートをしてみませんか?