正円の中にアイコンとテキストを配置するコーディング【Webサイト制作案件でよく使うサンプルコード】

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

色をついた正円の中に、アイコンとテキストを配置するコーディング方法が知りたい
Webサイト制作案件でよくある少し難しめのパーツのサンプルコードが見たい

という方のお悩みを解決します！

今回、紹介するサンプルコードはぼくがかつて、実際のWebサイト制作案件で使用したものです。

同じ様なパーツのコーディングで躓いている方の助けになれれば幸いです！！

完成イメージ
サンプルコード
- HTML
- CSS
まとめ

完成イメージ

今回紹介するコードで実現できるコンポーネントはこちら！

▼▼▼

コーディング案件を続けていると、必ず遭遇するデザインです笑

以下、このコンポーネントの特徴となります。

円の間は等間隔に余白を空ける（4n-3番目以外）
円は疑似要素beforeで表現する（padding-top:100%）
アイコンとテキストはabsoluteで上下中央に配置する
アイコンの横幅はそれぞれ指定して調整する

以下で紹介するコードをお使いいただければ、とりあえず見た目だけは秒で再現できます！

それでは見ていきましょう〜〜

サンプルコード

こちら、CodePenで作った見本です！

レスポンシブには未対応です。

この画面だと本来のPCサイズで表示されないので、ぜひCodePenのページへ行って確かめてみていただきたいです。

See the Pen
mdVaaMB by 石森裕也 (@yuyaphotograph)
on CodePen.

HTML

こちら、今回のコンポーネントのHTML構造です！

1列追加したい場合は「Inner-Card-Item」を4つ増やしてあげればOK。

アイコンによって指定する横幅が異なる場合は、「Inner-Card-Item-Box-ImgBox-Img」についている「item01」〜「item08」にwidthを指定してあげてください。

HTML

<div class="Inner">
  <div class="Inner-Card">
    <div class="Inner-Card-Item">
      <div class="Inner-Card-Item-Box">
        <div class="Inner-Card-Item-Box-ImgBox">
          <img src="アイコンURL" alt="" class="Inner-Card-Item-Box-ImgBox-Img item01"></div>
        <p class="Inner-Card-Item-Box-Text">テキスト</p>
      </div>
    </div>
    <div class="Inner-Card-Item">
      <div class="Inner-Card-Item-Box">
        <div class="Inner-Card-Item-Box-ImgBox">
          <img src="アイコンURL" alt="" class="Inner-Card-Item-Box-ImgBox-Img item02"></div>
        <p class="Inner-Card-Item-Box-Text">テキスト</p>
      </div>
    </div>
    <div class="Inner-Card-Item">
      <div class="Inner-Card-Item-Box">
        <div class="Inner-Card-Item-Box-ImgBox">
          <img src="アイコンURL" alt="" class="Inner-Card-Item-Box-ImgBox-Img item03"></div>
        <p class="Inner-Card-Item-Box-Text">テキスト</p>
      </div>
    </div>
    <div class="Inner-Card-Item">
      <div class="Inner-Card-Item-Box">
        <div class="Inner-Card-Item-Box-ImgBox">
          <img src="アイコンURL" alt="" class="Inner-Card-Item-Box-ImgBox-Img item04"></div>
        <p class="Inner-Card-Item-Box-Text">テキスト</p>
      </div>
    </div>
    <div class="Inner-Card-Item">
      <div class="Inner-Card-Item-Box">
        <div class="Inner-Card-Item-Box-ImgBox">
          <img src="アイコンURL" alt="" class="Inner-Card-Item-Box-ImgBox-Img item05"></div>
        <p class="Inner-Card-Item-Box-Text">テキスト</p>
      </div>
    </div>
    <div class="Inner-Card-Item">
      <div class="Inner-Card-Item-Box">
        <div class="Inner-Card-Item-Box-ImgBox">
          <img src="アイコンURL" alt="" class="Inner-Card-Item-Box-ImgBox-Img item06"></div>
        <p class="Inner-Card-Item-Box-Text">テキスト</p>
      </div>
    </div>
    <div class="Inner-Card-Item">
      <div class="Inner-Card-Item-Box">
        <div class="Inner-Card-Item-Box-ImgBox">
          <img src="アイコンURL" alt="" class="Inner-Card-Item-Box-ImgBox-Img item07"></div>
        <p class="Inner-Card-Item-Box-Text">テキスト</p>
      </div>
    </div>
    <div class="Inner-Card-Item">
      <div class="Inner-Card-Item-Box">
        <div class="Inner-Card-Item-Box-ImgBox">
          <img src="アイコンURL" alt="" class="Inner-Card-Item-Box-ImgBox-Img item08"></div>
        <p class="Inner-Card-Item-Box-Text">テキスト</p>
      </div>
    </div>
  </div>
</div>

CSS

こちらスタイリングです！

「Inner-Card-Item:before」に指定しているのがブロックの背景色です。

文字サイズや、円間の余白などはよしなに変更してお使いください。

CSS

.Inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 954px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.Inner-Card {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
}
.Inner-Card-Item {
  position: relative;
  width: calc((100% - 144px) / 4);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}
.Inner-Card-Item:before {
  content: "";
  display: block;
  border-radius: 50%;
  padding-top: 100%;
  background: #eee;
}
.Inner-Card-Item:not(:nth-child(4n-3)) {
  margin-left: 48px;
}
.Inner-Card-Item:nth-child(n+5) {
  margin-top: 40px;
}
.Inner-Card-Item-Box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.Inner-Card-Item-Box-ImgBox {
  width: 100%;
}
.Inner-Card-Item-Box-ImgBox-Img {
  margin-left: auto;
  margin-right: auto;
  width: 56px;
  display: block;
}
.Inner-Card-Item-Box-Text {
  margin-top: 20px;
  text-align: center;
  font-size: 16px;
}

まとめ

以上、実務でよく使われる「色をついた正円の中に、アイコンとテキストを配置する」コーディングのサンプルコードを紹介しました。

初学者の方には少し難しく感じるかもしれませんが、Web制作案件をする際に必ずや！役立つスキルとなりますのでぜひ覚えていきましょう〜！

コーディングスキルアップシリーズはこちら！