CSSでアニメーションされるスキルバーの作成方法

まず、HTMLファイルを作成しましょう。以下のコードは基本的なスキルバーの構造を示しています。

<div class="skill-bar">
  <div class="skill" style="width: 0;"></div>
</div>

次に、CSSスタイルシートを作成し、スキルバーの外観とアニメーションを定義します。

.skill-bar {
  width: 100%;
  background-color: #f2f2f2;
  height: 20px;
}
.skill {
  height: 100%;
  background-color: #4caf50;
  width: 0;
  transition: width 1s ease-in-out;
}

上記のコードでは、スキルバーの背景色を灰色に設定し、スキルのバーの初期幅を0にしています。また、transitionプロパティを使用して、幅の変更がスムーズにアニメーションされるようにしています。

次に、JavaScriptを使用してスキルバーの幅を動的に変更するコードを追加します。

window.addEventListener('load', () => {
  const skillBar = document.querySelector('.skill');
  const targetWidth = 75;  // 目標の幅（例: 75%）
  skillBar.style.width = `${targetWidth}%`;
});

上記のコードでは、ページの読み込みが完了した後にスキルバーの幅を目標の幅に変更しています。targetWidthの値を適宜変更して、目標のスキルの割合を設定してください。

これで、スキルバーがアニメーションしながら目標の幅まで変化するようになりました。

この方法を応用すれば、複数のスキルバーを作成し、異なる目標の幅やアニメーション時間を設定することもできます。また、CSSのプロパティやアニメーションのオプションをカスタマイズすることも可能です。

以上が、CSSを使用してスキルバーをアニメーションさせる方法の一例です。この方法を使って、ウェブサイトやポートフォリオなどで自分のスキルや能力を効果的に表示してみてください。