記事内に広告が含まれています。

CSSで円を描いて、中央に文字を配置して、中心を基点に拡大させる方法

CSS,HTML,JS , コーディング

画像を使わないでCSSだけで円を描いて、次に円の中央に文字を配置して、更にその円をCSSだけで非表示から中心を基点にアニメーションで徐々に拡大表示させる方法をご紹介します。

割と簡単なコードで全部できるので、自分のメモもかねて記事にしようと思います。

1. 円を描く方法

See the Pen oNgJOox by natsuki (@natsukimemo) on CodePen. 

 <div class="sample01"></div>

.sample01 {  
    width: 260px;
    height:260px;
    border-radius: 50%;/*角丸*/
    background-color:#f00;
}

CSSで正円を描くには、widthとheightに同じ値を入れて、border-radiusの値を50%以上にします。
border-radiusとは四隅の角を丸くするためのプロパティです。

widthとheight、それぞれに違う値を入れれば楕円になります。

POINT

CSSで正円を描く方法

widthとheightに同じ値を指定して、border-radius:50%;を指定する

サイト内関連リンク

円の中に画像をはめ込むこともできます。

CSSで画像を円形に切り抜く方法：object-fitが簡単で便利！ – NatsukiMemo

2. 円の中央に文字を配置する方法

一行の場合

See the Pen XWJOMEw by natsuki (@natsukimemo) on CodePen. 

<div class="sample02">sample02</div>

.sample02 {  
   width:260px;
   height:260px;
   border-radius:50%;
   background-color:#f00;
 
   font-size:36px;
   color:#fff; 
   line-height:260px; /*縦中央*/
   text-align:center; /*横中央*/
}

line-heightにheightと同じ値を指定します（CSS9行目）。これにより、縦中央に配置されます。
更に、text-align:center;を指定することで横中央に配置されます。（CSS10行目）

POINT

円の中央に文字を配置する方法（一行の場合）

1. line-heightにheightと同じ値を指定する
2. text-align:center;を指定する

複数行の場合

方法はいろいろありますが、flexboxを使った方法が簡単なのでご紹介します。

　

See the Pen oNgmZyx by natsuki (@natsukimemo) on CodePen. 

<div class="sample03">sample<br>03</div>

.sample03 {  
   width: 260px;
   height:260px;
   border-radius: 50%;
   background-color:#f00;
  
   font-size:36px;
   color:#fff;
   display:flex;
   justify-content:center; /*横中央*/
   align-items:center; /*縦中央*/
   text-align:center; /*行揃えを中央*/
}

line-heightは使いません。
CSS9行目から12行目がテキストを円の中央に配置しているCSSです。
それ以外はsample02と同じです。

CSS9行目 display:flex;を指定して、
CSS10行目 justify-content:center;で横位置を中央に。
CSS11行目 align-items:center;で縦位置を中央にしています。
CSS12行目 text-align:center;でテキストの行揃えを中央にします。

flexboxは、簡単なコードでレイアウトを組めるCSS3から導入されたレイアウトモジュールです。

スポンサーリンク

3. 非表示から円の中心を基点に拡大表示させる方法

　

See the Pen mdyvWGm by natsuki (@natsukimemo) on CodePen.

sample04は下記の条件で表示されています。

表示条件

  1. 非表示から
  2. 円の中心を基点に
  3. 徐々にアニメーションで拡大表示させる

１の「非表示から」と２の「円の中心を基点に」には、transformプロパティの関数scaleを使います。
３の「徐々にアニメーションで拡大表示させる」には、CSSのキーフレームアニメーションを使います。

transformプロパティの関数scaleについて

transformプロパティは、移動、回転、伸縮、傾斜の効果を2次元、3次元で指定できるプロパティです。
関数scaleは、要素の中心を起点に2次元での拡大・縮小を実現します。

意味例
scale(x,y)X軸とy軸を別々に変倍するscale(0.5,2)
scale(数値)X軸とy軸を同じ値で変倍するscale(2)

scale(1)が元々の大きさを表し、1より大きければ拡大、1より小さければ縮小することになります。

CSSのキーフレームアニメーションについて

CSSのキーフレームアニメーションは、要素にキーフレームを適用することで要素を動的に変化させることができるCSSです。

sample04で必要なキーフレームアニメーションについては後述します。
更に詳しくは別記事にしています。 最後にリンクを貼っておりますのでよろしければご覧ください。

下記がsample04のコードです。
CSS12行目までは前述した、sample03のコードと同じです。
14行目以降が、sample04の表示条件を満たすのに必要なコードとなります。

 <div class="sample04">sample<br>04</div>

.sample04 {  
    width: 260px;
    height:260px;
    border-radius: 50%;
    background-color:#f00;

    font-size:36px;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
  
    transform: scale(0);
    animation-name:sample04;
    animation-duration:4s;
    animation-fill-mode:forwards;
    animation-iteration-count:infinite;
}
@keyframes sample04{
  0%{
    transform: scale(0);    
  }
  100%{
    transform: scale(1);    
  }
}
14行目 transform: scale(0);

scale(0)を指定して要素を非表示にしています。

関数scaleはwidthやheightで指定した値を1として拡大縮小します。
上記CSSの場合、width:260px;(CSS2行目)とheight:260px;(3行目)が1となります。

1より大きい数値ならば拡大、1より小さい数値なら縮小されます。
scale(0)は、1より小さいので縮小、それも0なので最大限に縮小されて非表示ということです。

このCSSを指定する理由は、ページがロードされた時から要素を非表示にするためです。
これを指定しておかないと、ページが読み込まれてアニメーションが始まるまで、一時的に要素が表示されてしまいます。

このコードにより表示条件1の「非表示から」を実現しています。

CSSキーフレームアニメーションの設定

15行目以降キーフレームアニメーションの設定になります。

キーフレームアニメーションは、

「animationプロパティ」と
「@keyframes(キーフレーム)」

のふたつの要素で構成されています。

CSS15～18行目がanimationプロパティ、20行目以降が@keyframes(キーフレーム)です。

15行目animation-name:sample04;と
20行目@keyframes sample04{

animation-nameプロパティは、アニメーションに名前を付けるプロパティです。
@keyframesに半角スペースを空けて同じ名前を記述することで互いが関連付けられます。
この場合、sample04と名付けています。

animationに名前を付ける

animation-name: 〇〇〇;
@keyframes 〇〇〇｛ ｝

〇〇〇は、同じ名前であること

また、@keyframesは下記の形で使い、「時間の経過とそこでの状態を指定」します。

@keyframesの書き方

@keyframes 名前 {
0% または from { 0%の時の状態を指定 }
100% または to { 100%の時の状態を指定 }
}

0%から100%に至る過程がアニメーションされます。

それでは、以上をふまえて一行ずつ見ていきましょう。

16行目animation-duration:4s;

アニメーションが行われている時間を指定するプロパティです。
4秒間に指定しています。

17行目 animation-fill-mode: forwards;

animation-fill-modeは、アニメーションの終了時の状態を指定できるプロパティです。
値の「forwards」は、アニメーションの再生後は、キーフレーム100%の状態を維持せよ、という意味です。
このアニメーションの場合、25行目で指定した状態を維持せよ、ということです。

18行目 animation-iteration-count: infinite;

アニメーションの繰り返し回数を指定するプロパティです。
「infinite」は、無限に繰り返す、という意味です。

21行目0%{
22行目 transform: scale(0);

キーフレーム0％（開始）の時、transform: scale(0);で非表示にしています。

24行目100%{
25行目 transform: scale(1);

キーフレーム100％（終了）の時、transform: scale(1);を指定することでwidthやheightで指定した元々の大きさで表示されます。

キーフレームアニメーションで関数scaleを用いることで、表示条件2の「円の中心を起点に」と、表示条件3の「徐々にアニメーションで拡大表示する」が実現できました。

補足：ベンダープレフィックスについて

CSS3で採用される予定の機能が各ブラウザで先行実装されており、それらを動作させるには各ブラウザごとに識別子を付ける必要があります。
これをベンダープレフィックスといいます。

この記事で扱っているanimationプロパティとtransformプロパティは、現時点では下記ブラウザにおいて識別子が必要です。

各ブラウザの識別子

  • -moz- ・・・ Firefox
  • -webkit- ・・・ Google Chrome、Safari
  • -ms- ・・・ Internet Explorer

例）
-webkit-animation-duration: 2s;
-ms-animation-duration: 2s;
-webkit-transform: translateY(-20px);

いずれ、正式採用されてこのベンダープレフィックスは不要となり効かなくなりますので、必ず識別子のないCSSも併記しておきます。

この記事内ではコードのポイントがわかりにくくなってしまうので、識別子を付けたコードは省略しています。 実際にコードを記述する際はご注意ください。

スポンサーリンク

5.参考

関数scaleではなくキーフレームにwidthやheightを指定してみると下のようなアニメーションもできたりします。

See the Pen ZEYwemZ by natsuki (@natsukimemo) on CodePen.

See the Pen vYEPBVR by natsuki (@natsukimemo) on CodePen.

6.まとめ

少し長くなりましたが、自分へのメモも兼ねて記事にしてみました。
CSSだけで全部できるので、WEBデザイナーやコーダーにもとっつきやすいですよね。

この記事がお役にたてると幸いです。

CSSのキーフレームアニメーションについては、下記の記事もどうぞ。

サイト内関連リンク

CSSでふわっとフェードインさせる方法！@keyframesアニメーション入門-
NatsukiMemo

CSSで上下から横からフェードインしながらスライドイン！-NatsukiMemo

【番外】WEB制作習得におすすめの本

スポンサーリンク

【番外】パソコン時短技

知ってるか知らないかだけで作業スピードが全く違うので読んで損のない本。

スポンサーリンク

スポンサーリンク
スポンサーリンク

当ブログ利用サーバー

スポンサーリンク
スポンサーリンク