プログラミング

【HTML/CSS初心者】スキルセットのグラフの作成方法を解説|ポートフォリオに最適

 

こんにちは、イケゾーです。

今回は、ポートフォリオに最適なスキルセットのグラフの作り方を紹介します 🙂

プロフィールには、名前や連絡先の他にポートフォリをを掲載しますよね。さらに、自分の持っている技術「スキルセット」を可視的にデザインすると、仕事を発注する側も安心できます。下のようなプロフィールカードが作れるようになります。

 

実例とコードを掲載して解説しますので、お手元のPCで確認して進めてみてください。

イケゾー
Bootstrapの「プログレスバー」を使って簡単に作っていくよ。あっという間にできるよ

 

この記事はこんな人におすすめ!

  • プロフィールにスキルセットを表示して、プロフィールを充実させたい
  • タスク進捗管理のためにグラフを表示したい
  • Bootstrapを使ったプログレスバーの作り方を知りたい

 

当ブログでは、WordPressテーマ 「WING(AFFINGER5)」 を使用しています。

 

【HTML/CSS初心者】スキルセットのグラフの作成方法を解説|ポートフォリオに最適

このような流れで解説していきます。

 

Bootstrapの「プログレスバー」とは

 

一般的にプログレスバーとは、仕事の進捗などを分かりやすく表現するグラフです。アプリのダウンロードをするときに、「XX%完了」と進捗を表示しているのもプログレスバーですね。

スポーツ選手の能力値を示すときにも使われ、サッカー選手であれば「攻撃 85% 守備 60%」などと書いてやれば、その人が何が得意で不得意なのか分かりやすいですね。コーンフレークの裏の「レーダーチャート」も同じような役割ですよね。

 

本来プログレスバーを実現するためには、JavaScriptを使い複雑なコードを何行も書く必要がありますが、Bootstrapであれば class名を追記するだけで実現できてしまいます。

さらには、バーやラベル(XX%などの表示)のデザイン変更も自由自在なので、ぜひ取り入れてみれください。

 

Bootstrapの導入方法はこちら
初心者向け【WEBサイト模写のやり方】HTMLとCSSのテンプレートを作る方法を解説

続きを見る

 

基本コードで解説

基本コードを、HTML基本コード → デザイン変更の順にみていきましょう。

 

HTMLの基本コード

index.html

一番外側を<div class="progress">で囲み、その内側にバーの値を記入する<div class="progress-bar">を書きます。

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

 

 

デザインの変更

上のままだと少し素っ気ないので、デザインをいじってみましょう。

 

ラベルの表示

一番外側を<div class="progress-bar"> XXX </div>内にテキストを配置します。

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

 

色の変更

一番外側を<div class="progress-bar">class="bg-XXXXX"を追加します。XXXXは、Bootstrapのカラーから選択します。

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

 

 

入れ子構造

ひとつの<div class="progress">の中に、複数の<div class="progress-bar">を記載します。

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

 

 

イケゾー
このくらいのデザイン変更ができれば、色々な場面で使えますね

 

まとめ

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう
  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-プログラミング
-, , ,