【CSSで簡単！】アニメーション付き棒グラフの作り方

当サイトは広告を含んでいます。

2024-12-04

おしゃれなグラフをcssで作りたい・・・

サイト内にグラフを挿入したいときもありますよね！

今回は、おしゃれなグラフの作り方をご紹介させていただきます。

棒グラフ

横向き棒グラフ

シンプルな横向きの棒グラフです。棒グラフが左側から伸びるアニメーションを追加しています。

ラベルや棒の長さを変えたい場合は、HTMLを編集してください。

項目1

70%

項目2

50%

項目3

30%

HTML コードを表示

<body>
  <!-- グラフ全体を囲むコンテナ -->
  <div class="bar-container">
    <!-- 項目1の棒グラフ -->
    <div class="bar">
      <!-- 項目1のラベル -->
      <div class="bar-label">項目1</div>
      <!-- 項目1のバーとパーセンテージ表示 -->
      <div class="bar-fill" style="width: 70%;">70%</div>
    </div>

    <!-- 項目2の棒グラフ -->
    <div class="bar">
      <!-- 項目2のラベル -->
      <div class="bar-label">項目2</div>
      <!-- 項目2のバーとパーセンテージ表示 -->
      <div class="bar-fill" style="width: 50%;">50%</div>
    </div>

    <!-- 項目3の棒グラフ -->
    <div class="bar">
      <!-- 項目3のラベル -->
      <div class="bar-label">項目3</div>
      <!-- 項目3のバーとパーセンテージ表示 -->
      <div class="bar-fill" style="width: 30%;">30%</div>
    </div>
  </div>
</body>

CSS コードを表示

/* グラフ全体を囲むコンテナのスタイル */
.bar-container {
  width: 80%; /* グラフ全体の幅を80%に設定 */
  margin: 50px auto; /* 上下に50pxの余白を加え、中央に配置 */
}

/* 各棒グラフ（項目）のスタイル */
.bar {
  display: flex; /* Flexboxを使用して、ラベルとバーを横並びに配置 */
  align-items: center; /* ラベルとバーを縦方向に中央揃え */
  margin-bottom: 15px; /* 各棒の間に15pxの余白を追加 */
}

/* 棒グラフのラベル（項目名）のスタイル */
.bar-label {
  width: 100px; /* ラベルの幅を100pxに設定 */
  font-weight: bold; /* ラベルを太字に */
}

/* 棒グラフそのもののスタイル */
.bar-fill {
  background-color: #4caf50; /* 棒の色を緑色に設定 */
  color: white; /* パーセンテージの文字色を白に設定 */
  text-align: right; /* 文字を右寄せに設定 */
  padding-right: 10px; /* 文字の右側に10pxの余白を追加 */
  height: 50px; /* 棒の高さを50pxに設定 */
  border-radius: 5px; /* 棒の角を丸く設定 */
  font-size: 16px; /* 文字のサイズを16pxに設定 */
  display: flex; /* Flexboxを使用して、パーセンテージの文字を整列 */
  align-items: center; /* 縦方向に中央揃え */
  justify-content: flex-end; /* パーセンテージの数字を右側に寄せる */
  
  /* 初期状態で棒の横幅を0に設定 */
  transform: scaleX(0); 
  /* アニメーションが左から始まるように、左端を基準に設定 */
  transform-origin: left center; 
  
  /* アニメーションの設定 */
  animation: growBar 2s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; 
  /* 'growBar'という名前のアニメーションを2秒間で、イージング（動きが滑らかになる）を指定し、最終状態に向かう */
}

/* 棒グラフのアニメーションの定義 */
@keyframes growBar {
  from {
    transform: scaleX(0); /* アニメーション開始時、棒の横幅は0（非表示） */
  }
  to {
    transform: scaleX(1); /* アニメーション終了時、棒の横幅が100%に伸びる */
  }
}

/* 各棒に個別のアニメーション時間を設定 */
.bar:nth-child(1) .bar-fill {
  animation-duration: 2s; /* 1番目の棒グラフは2秒でアニメーション */
}
.bar:nth-child(2) .bar-fill {
  animation-duration: 2.5s; /* 2番目の棒グラフは2.5秒でアニメーション */
}
.bar:nth-child(3) .bar-fill {
  animation-duration: 3s; /* 3番目の棒グラフは3秒でアニメーション */
}

縦向き棒グラフ

シンプルな縦向きの棒グラフです。下から上に伸びるようなアニメーションを追加しています。

項目1 80%

項目2 60%

項目3 40%

項目4 90%

HTML コードを表示

<body>
  <!-- 縦棒グラフの全体を囲むコンテナ -->
  <div class="vertical-bar-container">
    <!-- 項目1の縦棒 -->
    <div class="vertical-bar"> 
      <!-- 項目1のラベル（バーの下に表示される） -->
      <span class="vertical-label">項目1</span>
      <!-- 項目1のパーセンテージ（バーの上に表示される） -->
      <span class="vertical-percentage">80%</span>
    </div>
    
    <!-- 項目2の縦棒 -->
    <div class="vertical-bar"> 
      <!-- 項目2のラベル（バーの下に表示される） -->
      <span class="vertical-label">項目2</span>
      <!-- 項目2のパーセンテージ（バーの上に表示される） -->
      <span class="vertical-percentage">60%</span>
    </div>
    
    <!-- 項目3の縦棒 -->
    <div class="vertical-bar"> 
      <!-- 項目3のラベル（バーの下に表示される） -->
      <span class="vertical-label">項目3</span>
      <!-- 項目3のパーセンテージ（バーの上に表示される） -->
      <span class="vertical-percentage">40%</span>
    </div>
    
    <!-- 項目4の縦棒 -->
    <div class="vertical-bar"> 
      <!-- 項目4のラベル（バーの下に表示される） -->
      <span class="vertical-label">項目4</span>
      <!-- 項目4のパーセンテージ（バーの上に表示される） -->
      <span class="vertical-percentage">90%</span>
    </div>
  </div>
</body>

CSS コードを表示

/* 縦棒グラフ全体のコンテナ */
.vertical-bar-container {
  display: flex; /* 横並びにするための設定 */
  gap: 20px; /* 子要素の間隔を20pxに設定 */
  align-items: flex-end; /* 縦棒を下に揃える */
  justify-content: center; /* 縦棒グラフ自体を横方向で中央に配置 */
  height: 200px; /* グラフの高さを200pxに設定 */
  width: 80%; /* コンテナの幅は80% */
  box-sizing: border-box; /* パディングを含めたサイズ計算 */
  margin: 50px auto; /* コンテナの中央寄せ */
  padding-bottom: 30px; /* グラフの下に30pxの余白を追加 */
}

/* 各縦棒のスタイル */
.vertical-bar {
  position: relative; /* ラベルやパーセンテージの位置を調整するために必要 */
  width: 60px; /* 各縦棒の幅を60pxに設定 */
  background-color: #4caf50; /* 縦棒の色を緑色に設定 */
  border-radius: 5px; /* 縦棒に丸みを付ける */
  height: 0; /* 初期状態で縦棒の高さを0に設定 */
  animation: vertical-growBar 1s forwards; /* アニメーションを設定（1秒で伸びる） */
  --height: 50%; /* 高さをカスタムプロパティで指定（仮の値） */
}

/* 各縦棒に異なる高さを設定 */
.vertical-bar:nth-child(1) {
  --height: 80%; /* 最初の棒の高さを80%に設定 */
}

.vertical-bar:nth-child(2) {
  --height: 60%; /* 2番目の棒の高さを60%に設定 */
}

.vertical-bar:nth-child(3) {
  --height: 40%; /* 3番目の棒の高さを40%に設定 */
}

.vertical-bar:nth-child(4) {
  --height: 90%; /* 4番目の棒の高さを90%に設定 */
}

/* アニメーション：縦棒が下から上に伸びる */
@keyframes vertical-growBar {
  from {
    height: 0;
  }
  to {
    height: var(--height); /* 高さをカスタムプロパティで指定 */
  }
}

/* 各縦棒のラベル（項目名）のスタイル */
.vertical-label {
  position: absolute; /* ラベルの位置を調整 */
  bottom: -40px; /* ラベルを縦棒の下に少し余裕を持たせて配置 */
  width: 100%; /* ラベルを縦棒と同じ幅にする */
  text-align: center; /* ラベルを中央に配置 */
  font-size: 16px; /* フォントサイズを14pxに設定 */
  font-weight: bold; /* ラベルを太字に */
}

/* 各縦棒のパーセンテージ（数値）のスタイル */
.vertical-percentage {
  position: absolute; /* パーセンテージを絶対位置で配置 */
  top: 50%; /* 棒の中央に表示 */
  width: 100%; /* パーセンテージも縦棒の幅に合わせる */
  text-align: center; /* パーセンテージを中央に配置 */
  font-size: 16px; /* フォントサイズを12pxに設定 */
  color: white; /* パーセンテージの文字色を白に設定 */
  transform: translateY(-50%); /* 完全に中央に配置 */
}