padding-topで円系のスタイル

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

padding-topとborder-radiusで円形の要素を作る。

LPデザインのお仕事募集中です↓↓↓

LPデザインのお仕事募集中【固定表示記事】
ランディングページ（LP）デザイン（＋コーディング）のお仕事を募集しております。 なお、コーポレートサイトのよ…
weblife.ppmp556.com

padding-topで円系のスタイル

コードは以下になります。

  <div class="p-container">
    <div class="l-inner">

      <div class="p-circles">
        <div class="p-circles__item ">
          <div class="c-circle">
            <div class="c-circle__inner">
              <p class="c-circle__text">テキスト<br>テキスト</p>
            </div>
          </div>
        </div>
        <div class="p-circles__item ">
          <div class="c-circle">
            <div class="c-circle__inner">
              <p class="c-circle__text">テキスト<br>テキスト</p>
            </div>
          </div>
        </div>
        <div class="p-circles__item ">
          <div class="c-circle">
            <div class="c-circle__inner">
              <p class="c-circle__text">テキスト<br>テキスト</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
.l-inner {
  max-width: 1132px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 16px;
  padding-left: 16px;
}


.c-circle {
display: block;
position: relative;
padding-top: 100%;
border-radius: 50%;
background-color: #fff;
border: 1px solid red;
}

.c-circle__inner {
display: flex;
position: absolute;
top: 50%;
left: 50%;
flex-direction: column;
align-items: center;
width: 100%;
padding-right: 10px;
padding-left: 10px;
transform: translate(-50%, -50%);
}

.c-circle__inner2 {
display: flex;
position: absolute;
top: 50%;
left: 50%;
flex-direction: column;
align-items: center;
width: 100%;
padding-right: 10px;
padding-left: 10px;
transform: translate(-50%, -50%);
}


.c-circle__text {
display: inline-flex;
flex-basis: 24px;
align-items: center;
margin-top: 4px;
color: #333333;
font-size: 12px;
font-weight: 700;
text-align: center;
}


.p-circles {
gap: 30px;
display: grid;
grid-template-columns: repeat(3, 1fr);
max-width: 500px;
margin-top: 40px;
margin-left: auto;
margin-right: auto;
}

.p-circles__item {
  width: 100%;
}

画面幅が狭くなっても、円形のスタイルは崩れません。

要素のheightは0、padding-top:100%で要素の高さを確保してます。中のテキストはposition:absolute;で配置しています。

.c-circle {
display: block;
position: relative;
padding-top: 100%;
border-radius: 50%;
background-color: #fff;
border: 1px solid red;
}

要素に例えばwidth:100px;、height:100px;のように固定値で指定してborder-radius:50%で円形を作る手法はよくやりますが、画面幅に応じていい感じに円にならないときがあります。

画面幅に応じていい感じにしたいんだったら、padding-topを使ったやり方でもいけます。

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

CSS HTML

この記事を書いた人

くまだ

記事一覧