CSS3 で二重丸を作る

 

仕事で必要になったので作ってみました。実装方法は意外と簡単だったのでまとめてみます。これを作るにあたって下記サイトの記事が参考になったので張らせていただきます。[ CSS]高さが可変のボックスに二重のボーダーを適用するテクニックのまとめ

今回用いたのは参考にしたサイトで紹介されていた第3 の方法、box-shadow を使用した方法です。参考サイトでは二重ボーダーを作っていますが、要はこれを角丸指定で円にしつつ真ん中のボーダーを背景と同色で作れば実現できるってわけですね。

margin: auto;
background-color: #00b1f4;
border: solid 6px #fff;
width: 70px;
height: 70px;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
box-shadow: 0 0 0 3px #00b1f4;
-webkit-box-shadow: 0 0 0 3px #00b1f4;
-moz-box-shadow: 0 0 0 3px #00b1f4;

真ん中に文字を入れることも可能です、JavaScript で制御すれば文字数に応じて円の大きさを可変で作ることも出来そうですね。

TechRacho

  <!-- TechRacho ボールのコードです -->
  <div style="margin: auto;
              background-color: #1d0204;
              border: solid 6px #f4a814;
              width: 70px;
              height: 70px;
              -moz-border-radius: 60px;
              -webkit-border-radius: 60px;
              border-radius: 60px;
              box-shadow: 0 0 0 3px #1d0204;
              -webkit-box-shadow: 0 0 0 3px #1d0204;
              -moz-box-shadow: 0 0 0 3px #1d0204;">
    <p style="font-size: 12px;
              margin-top: 25px;
              color: #f4a814;
              text-align: center;
              font-weight: bold;">
      TechRacho
    </p>
  </div>

円だけではなく楕円も可能です。

グラデーションも可能です、実はborder もグラデーション可能だったみたいです。あまりやり過ぎると最早CSS で描画していることがパッと見わからなくなりますね。

なお、IE9 では上記のグラデーションを使用すると円ではなく四角になってしまうみたいです。加えてIE7,8 においては全て四角で表示されてしまいます。大きさはwidth とheight で指定したものなので、レイアウトの崩れには繋がりません。

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

shibuso

明治大学大学院理工学研究科を修了後ウェブ企業に就職。その後ソーシャルゲーム企業に転職し、後に登録会員数400万人を超えたタイトルのローンチを担当。2012年にBPSに入社。 Java, PHP, Perl, Rubyと渡り歩いて来ました。BPSに入社後RubyとRailsを使い始めましたが、今では一番好きな言語になっています。 休日の趣味はゲームと愛車のCBR250Rでのツーリングです。 たまにblog書いてます。http://www.shibuso.net

shibusoの書いた記事

週刊Railsウォッチ

インフラ

BigBinary記事より

ActiveSupport探訪シリーズ