【HTML】円を並べるコーディング【CSS】

どうも、くまだです。

ネタが浮かばないので、また案件で使ったものを。

今回は要素を円形に並べる感じのものをコーディングでつくる感じです。（タイトルあってるかわかりませんが）

カード型に並べるやりかたはこちらです。

カード型レイアウトのコーディング

カード型レイアウトのコーディング方法について。

weblife.ppmp556.com

要素を円形に配置するコーディング

説明が難しいのでまずは結果から。

〇HTML

<div class="circlebox__content">
      <div class="circlebox-line">
        <div class="circlebox">
          <div class="circlebox__text">テキスト</div>
        </div>
      </div>
      <div class="circlebox-line line02">
        <div  class="circlebox circle02">
          <div class="circlebox__text">テキスト</div>
        </div>
      </div>
      <div class="circlebox-line line03">
        <div class="circlebox circle03">
          <div class="circlebox__text">テキスト</div>
        </div>
      </div>
      <div class="circlebox-line line04">
        <div class="circlebox circle04">
          <div class="circlebox__text">テキスト</div>
        </div>
      </div>
      <div class="circlebox-line line05">
        <div class="circlebox circle05">
          <div class="circlebox__text">テキスト</div>
        </div>
      </div>
      <div class="circlebox-line line06">
        <div class="circlebox circle06">
          <div class="circlebox__text">テキスト</div>
        </div>
      </div>
      <div class="circlebox-line line07">
        <div class="circlebox circle07">
          <div class="circlebox__text">テキスト</div>
        </div>
      </div>
      <div class="circlebox-line line08">
        <div class="circlebox circle08">
          <div class="circlebox__text">テキスト</div>
        </div>
      </div>
    </div>

〇CSS

.circlebox__content {
  width: 30rem;
  height: 30rem;
  position: relative;
  border-radius: 50%;
  border: 0.1rem dotted black;
  margin-right: auto;
  margin-left: auto;
  margin-top: 12.1rem;
}


.circlebox-line {
  width: 0.1rem;
  height: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.circlebox {
  width: 10rem;
  height: 10rem;
  background: #fff;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #000;
  border: 0.1rem solid black;
}


.circle02 {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.circle03 {
  transform: translate(-50%, -50%) rotate(-90deg);
}

.circle04 {
  transform: translate(-50%, -50%) rotate(-135deg);
}

.circle05 {
  transform: translate(-50%, -50%) rotate(-180deg);
}

.circle06 {
  transform: translate(-50%, -50%) rotate(-225deg);
}

.circle07 {
  transform: translate(-50%, -50%) rotate(-270deg);
}

.circle08 {
  transform: translate(-50%, -50%) rotate(-315deg);
}




.line02 {
  transform: translateX(-50%) rotate(45deg);
  transform-origin: center bottom;
}

.line03 {
  transform: translateX(-50%) rotate(90deg);
  transform-origin: center bottom;
}

.line04 {
  transform: translateX(-50%) rotate(135deg);
  transform-origin: center bottom;
}

.line05 {
  transform: translateX(-50%) rotate(180deg);
  transform-origin: center bottom;
}

.line06 {
  transform: translateX(-50%) rotate(225deg);
  transform-origin: center bottom;
}

.line07 {
  transform: translateX(-50%) rotate(270deg);
  transform-origin: center bottom;
}

.line08 {
  transform: translateX(-50%) rotate(315deg);
  transform-origin: center bottom;
}

上記のコードで表示すると、以下のような感じになります。

.circleboxと.circlebox-lineでまずはベースを作成します。8つの円の中央にはcirclebox__contentが親要素としてpositon: relativeを指定しています。

分かりやすく周りの円を一つに、中央を視覚的に赤くしてみます。

    <div class="circlebox__content">
      <div class="circlebox-line">
        <div class="circlebox">
          <div class="circlebox__text">テキスト</div>
        </div>
      </div>
    </div>

.circlebox__content {
  width: 30rem;
  height: 30rem;
  position: relative;
  border-radius: 50%;
  border: 0.1rem dotted black;
  margin-right: auto;
  margin-left: auto;
  margin-top: 12.1rem;

  background: red;
}


.circlebox-line {
  width: 0.1rem;
  height: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.circlebox {
  width: 10rem;
  height: 10rem;
  background: #fff;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #000;
  transition: all 0.5s ease;
  border: 0.1rem solid black;
}

分かりやすく周りの円を一つに、中央を視覚的に赤くしました。これを円の角度を変えつつ、円を増やしていきます。

    <div class="circlebox__content">
      <div class="circlebox-line">
        <div class="circlebox">
          <div class="circlebox__text">テキスト</div>
        </div>
      </div>
      <div class="circlebox-line line02">
        <div class="circlebox circle02">
          <div class="circlebox__text">テキスト</div>
        </div>
      </div>
   </div>

.line02 {
  transform: translateX(-50%) rotate(45deg);
  transform-origin: center bottom;
}

二つ目の円には上のように指定して、円の位置をずらします。ただ、このままだと円の中のテキストが回転したままなので、これを以下のように指定して角度を戻してあげます。

.circle02 {
  transform: translate(-50%, -50%) rotate(-45deg);
}

円を増やして角度をつけて回転させたら、テキストだけ角度を戻してあげる。これと同じことをあと6個やればいいだけです。ちなみに数はいくらでもできます（円の大きさの調整は必要ですが）。

ここまで読んでくださりありがとうございました。