CSSでブラウザを縮めても楕円にならず、まん丸(正円)で文字を中心に配置する方法

CSS
Featured Video Play Icon

おかぴーです。

今回はCSSでコーディングし、まん丸(正円)を作りたいと思います。

完成形はこちら↓
実際にブラウザを縮めてみてください。

 

最初の円のテキストだよ!
2つ目のテキスト!
さて、どうなるかな?

 

みみこみみこ
パソコン・スマホで見た時はまん丸になってて、Chromeとかのブラウザを変更して見た時って案外バランス崩れたりするんですよね…
おかぴーおかぴー
ブラウザを縮めた時に幅と高さが楕円形になってバランスが潰れてしまわないように、レスポンシブ対応した円を作っていこうと思います!

 

まん丸(正円)のコード

 

<div class="seien">
<div>最初の円のテキストだよ!</div>
<div>2つ目のテキスト!<br>さて、どうなるかな?</div>
</div>

/*円の配置*/
.seien{
display: flex;
display: -webkit-flex;
justify-content: space-around;
}
/*円と文字*/
.seien div{
width: calc(90%/2);
border-radius: 100%;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-box-pack: center;
align-items: center;
-webkit-box-align: center;
color: #4c4c4c;
border: 1px solid #4c4c4c;
background:#ffffbc;
text-align:center;
}
/*擬似要素*/
.seien div:before{
display: block;
content: '';
padding-top: 100%;
}

 

それぞれ解説していきますね。

 

円の親要素

.seien{
display: flex;
display: -webkit-flex;
justify-content: space-around;
}

まずは親要素。

→display: flex;を使って、円2つを横並びに。
→justify-content: space-around;で均等に配置しています。

 

円と文字

width: calc(90%/2);

→円2つ分の幅を指定。
ブラウザ幅の90%に対して、2分割して配置。

border-radius: 100%;

→円の丸み

display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-box-pack: center;

→文字を円に対して、左右の中央に配置

align-items: center;
-webkit-box-align: center;

→文字を円に対して、上下の中央に配置

color: #4c4c4c;

→文字色・お好みで

border: 1px solid #4c4c4c;

→円の枠線の色・お好みで

background:#ffffbc;

→円の背景色・お好みで

text-align: center;

→文字を改行した場合の中央寄せ

 

円の擬似要素

.seien div:before{
display: block;
content: '';
padding-top: 100%;
}

padding-topを100%にすることで、親要素(今回だと、.seienというクラス名のdiv)の幅を参照して、同じ高さを反映させてくれます。

これがあることで、どんな幅になってもまん丸になるんですね。

 

まとめ

画像を使ってデザインするのもありですけど、コーディングでもうまくレスポンシブなまん丸を表現することができました^^

padding-top: 100%;って便利ですね〜

おまけ

「ある程度ブログのデザインも納得したものができてきたなぁ」

「次はこのブログを、稼げるブログにしたい!」

と思っている方へ。

 

ブログ収益化において、

デザイン効果と組み合わせることで反応率が高まる効果的な方法があるのですが、

僕が勤めている会社では、とても言えない(というか教えたくないw)内容を、

ここだけの話で公開しようと思います。

 

どんな話かと言うと、

「発信するテーマ(内容)に合わせた最適な収益化方法が分かる」というものです。

 

100人いれば、100個のブログがあり、コンセプトがあります。

それによって収益化の方法も様々です。

 

デザインは視覚的に注目を集める力がありますが、その先の収益化へ進むには間違いなく発信内容に合わせてブログを構築していく必要があります。

 

あなたは最適な収益化方法を選択できていますか?

きっと、今ブログで伸び悩んでいる人には新しい発見になるはず^^

 

興味がある方は「こちら」をご覧ください〜

ストレスフリーなブロガーライフを送ろうWPテーマ「THE THOR」でリニューアル!" width="1280" height="479" >

WPテーマ「THE THOR」でリニューアル!

2年近く「STORK」を愛用してきた当ブログは、これから「THE THOR」でデザインも新たに生まれ変わりました。(STORK、今までありがとう!)

これからも当ブログではブログ作りに役立つ情報を発信していきます。よろしくお願いします(o^^o)

CTR IMG