【コーディング解説】HTMLとCSSでバッジグループをつくる

今回は、HTMLとCSSを使ってバッジグループ(BadgeGroup)をコーディングしていきます。デザインを元に模写をする流れを解説します。プログラミング初学者やコーディング練習として模写をしたい駆け出しエンジニアにもおすすめです。

タグやカテゴリを並べたり、新着記事(NEW!)表示する時に使われているデザインです。横並べの折り返しレイアウトやボタンなどで使う上下左右中央揃えのテクニックの基本が学べます。

コーディングの準備をする

完成形のデザインを確認しましょう

こんな感じのデザインみたことありませんか？
ブログの記事にハッシュタグをつけたりして複数のキーワードを並べていくUIデザインです。

デザインの基本情報

バッジグループをコーディングするにあたって、必要となる情報は以下の通りです。

バッジグループ全体の横幅は260px
バッジ同士の間隔は横8px、縦10px
バッジの背景色はブルー(#4B96F5)
バッジの角丸は4px
文字色は白(#FFFFFF)
フォントサイズは12pxで、太字
バッジの内側の余白は縦8px、横10px
バッジの影はY方向に2px、ぼかし2px、色は黒(#000000)の透明度40%

コーディングの目標時間

15分以内でコーディングが終えられるように頑張ってみましょう。

自分なりにコードを書いてみる

Yuto Seta

上のデザインと基本情報を元にまずは自分なりにコーディングをしてみましょう。

コーディングの手順

HTMLを書き出す
1. バッジを束ねるグループ要素をつくる
2. グループ要素の中にバッジ要素を設置し、見本の数と同じだけ繰り返す。
CSSを書き出す
1. バッジをグルーピングする要素から、flexboxを用いて子要素が横並びで折り返すようにレイアウトする
2. 一個のバッジを横幅と縦幅を指定せずに実装する

実際のソースコード

実際のソースコードは以下の通りです。
コーディングのお手本として参考にしてください。
自分なりにコーディングしてみたら、答え合わせをしてみましょう。

初心者はまずは見た目を完璧に同じにすることを目標にしてください。

中級者はなぜそのようなソースコードになったのか？と考えながら読み進めていってください。

上級者はこれよりも優れたコードはないだろうか？と考えながら読み進めていってください。

HTML

<div class="badge-group">
  <div class="badge-item">モックアップ</div>
  <div class="badge-item">XD</div>
  <div class="badge-item">ウェブデザイン</div>
  <div class="badge-item">Illustrator</div>
  <div class="badge-item">UX</div>
  <div class="badge-item">UI</div>
  <div class="badge-item">イラスト素材</div>
  <div class="badge-item">Photoshop</div>
</div>

バッジグループのHTMLはこのような構造にしました。バッジが子要素にあり、それらを囲うバッジグループがあるという構造です。クラス名はbadge-groupとbadge-itemとしました。

YutoSeta

ここで僕がつかっているクラスの命名規則について１つご紹介します。
同じ子要素が繰り返し並んでいて、１つの親要素がそれらを囲っているというケースでは、element-group(親)とelement-item(子)という命名にすると迷いがなくなります。例えば、リスト(list-group、list-item)、カード(card-group、card-item)、タブ(tab-group、tag-item)、ボタン(btn-group、btn-item)、ナビゲーション(nav-group、nav-item)などです。

CSS

.badge-group{
  margin: 20px;
  width: 260px;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.badge-item{
  margin-top: 10px;
  margin-right: 8px;
  border-radius: 4px;
  background: #4B96F5;
  box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
  padding: 8px 10px;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}

バッジグループのCSSは上記の通りです。プロパティ順はマージンなどの大きいところからフォントサイズなどの小さいところへと段々と要素の内側へ内側へ進んでいくイメージで書いていくのがおすすめです。

バッジグループの特徴

バッジグループのコーディングを効率よく進めていく上で、特徴を把握しておくとよいです。

flex-wrap: wrap;による折り返しレイアウト

.badge-group{
  display: flex;
  flex-wrap: wrap;
}

フレックスボックスの折り返しを使って、バッジが横幅以上に増えた時に自動的に折り返すようにしています。実際のサイトを作る時、バッジの数は最初から決まっておらず、段々と増えていく可能性があります。そのため、横幅は固定で縦幅をautoにして自動的に伸びていくようにすることで大きさを固定で確保にしていません。こういったケースでflex-wrapは活躍します。

横幅も高さも指定しないバッジ(badge-item)

.badge-item{
  margin-top: 10px;
  margin-right: 8px;
  border-radius: 4px;
  background: #4B96F5;
  box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
  padding: 8px 10px;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}

バッジのCSSにはどこにも横幅や高さの指定がありません。その代わり、paddingで文字の周りに余白を確保しています。flexコンテナの中では、横幅は自動的に計算されて最低限の大きさになります。高さもalign-itemsによって最低限の高さが確保されています。こうすることで、文字数が多くなった時やバッジ内で改行された時もデザイン崩れが発生しないようにしています。