【 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点とするのは、主観であります。

技術は進化しますから、満点ということは永遠にないと考えています。

この辺りは、主観の数値になることを前提にデザインします。
あくまでも目安ですね。

【 まとめ 】

ポートフォリオに使えるスキルバーのコーディングについて書きました。

ドットの数をもっと増やしたり、ドットではなく星マークにしたりとカスタマイズして使ってみてください。