CSS で大きな円を描いて、真ん中に文字書き、時間的変化をさせる方法

CSS3を使うと、いままで画像で作成していた円形をかんたんに描くことができます。こちらを利用するとスタイルシートの側から、サイズや色を変更できますし、CSS3になって導入された動きを付けることも可能です。

例として当ブログの左上にあるサイトロゴを作ってみます(注:別に作ったサイトロゴなのでいまと文字がちがいます)。順番に説明していきましょう。

円形の作り方

まずは大きな円形の作り方。基本的な方法は、

  1. div 要素で囲った範囲の上下左右のサイズを指定する(height, width)
  2. 背景色を付ける(background-color)
  3. 角を丸くする(border-radius)

となります。これで円形ができます。当ブログ左上のロゴはこんな感じ(style.css)。

CSS3で円形をつくった

border-radius プロパティでボックス四隅の角丸を指定しています。一般的にはpx単位で指定しますが、パーセンテージを使うことも可能です。むしろ、円形の場合にはこちらの方が簡単です。

【参考】border-radius-CSS3リファレンス

主要ブラウザのベンダープレフィックス(接頭辞)である「-webkit-」(Google Chrome, Safari 用)や「-moz-」(Internet Explorer 用)はいずれ必要がなくなりますが、いまのところは、これらを付けてプロパティを指定しておきます。同時に、ベンダープレフィックス無しも併記しておきましょう。(この点について詳しいことは、ネット上にたくさん情報がありますので調べてみてください)

円形の中央に文字を置く

次にこの円の上に文字を置きます。ひとまずこの<div>で囲った円形の中に、もうひとつ<div>~</div>を作り、その中に文字を入れます。class 属性に名前も付けておきましょう。

たとえばこのようにHTMLで書きました。

CSS3で作った円形に文字を載せた

しかし、このままでは文字が左上に表示され、うまく中央の位置に来てません。調整が必要です。

まずpadding-top を指定して文字を真ん中まで下ろし、つぎにtext-align:center; で中央に寄せます。ついでに文字の色や余白なども変更しておきましょう。

CSS3で作った円形に文字を載せたて調整した後

円形に影をつける

せっかくなので、影(box-shadow)も加えました。

CSS3で作ったサイトロゴ影付き

CSS3で動きをつける

さらにマウスカーソルを重ねたときに色を変え、回転させてみましょう。

これにはまず、変化させたい部分に変化に要する時間をtransition プロパティで指定します。

そしてマウスカーソルを重ねたとき(:hover)に変化させたい内容を指定します。

これで完成です。下にあるサイトロゴにマウスカーソルを重ねてみてください。色が変わり、回転します。

かっぱぶろぐ.net

本と京都とWordPressのブログ

こちらの記事のサンプルも参考にどうぞ。

css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた – かちびと.net

CSS3で他にもいろいろできる

円形にしたり、影を付けるのにはCSSジェネレーターを使うのが簡単です。

【CSS3】これはやばい!覚えなくてもすぐに使える便利なCSS3ジェネレータまとめ。 – NAVER まとめ

いくつもあるので、いろいろ試して使いやすいのを利用すればいいでしょう。

さらにCSS3のすごさを理解し、それを手軽に使いたいときにはコリスさんによるこちらの記事が参考になります。

[CSS]CSS3で何ができるの? という時にみておきたいサイト集 | コリス

[CSS]コピペで簡単にCSS3アニメーションを実装できるライブラリ・ツールのまとめ | コリス

CSS3の制作をぐっと楽にする厳選20のオンラインツール | コリス

こんなにできるのが多いのか! と驚きますね。アニメーションを見ているだけでも楽しいのでチェックしてみてください。

追記

ご覧のように、現在はロゴを回転させずに、色変化にしています。やり方は上記の方法を好きなように修正、またはリンク先ツールをご利用ください。

簡単なので、遊び感覚でいろいろ変更して試してみると面白いですよ。

関連記事

CSS で h タグをちょっとだけカスタマイズしてみました

見出しは超重要! 多くのブロガーさんや大手サイトでは「記事の書き方」を解説してくれています。それを読むと、見出しを効果的に使うことが、読みやすい記事を書く上での必須項目であるとわかります。 見出しの種類 見出しというのはHTMLで書くときの…

新しく自作 WordPress テーマに変更しました

なんとか、完成にまでこぎつけました。 昼にテーマのファイルをアップロードして、変更してみたら、いろいろ表示に不具合が発生して、そのときに訪問された方にはご迷惑をお掛けしました。 ページによって新テーマと旧テーマの表示が違っていて「なんでやろ…