CSS3(transition)で円の中心を基準に拡大する丸いボタンが並んだメニュー

そもそもこいうのはメニューと呼ばないのかな。検索エンジンのことを考えると色々キーワードを入れたいけど、入れすぎると何をいっているのか分からなくなる。ほんとタイトルって難しい。。

ということで、今回もサンプルを用意していますのでこちら見ていただければと思います。

ではHTMLから解説していきます。

HTML

まずはHTMLから。リンク先のURLは省略しています。

<div id="box">
  <div class="boxin">
    <a href="#" id="circle1">CSS</a>
  </div>
  <div class="boxin">
    <a href="#" id="circle2">CSS3</a>
  </div>
  <div class="boxin">
    <a href="#" id="circle3">jQuery</a>
  </div>
  <div class="boxin">
    <a href="#" id="circle4">Tutorial</a>
  </div>
  <div class="boxin">
    <a href="#" id="circle5">Collect</a>
  </div>
</div>

クラスboxinでボタンの位置を決めて、ボタンの色はクラスboxinの子要素のリンクで指定します。マウスを乗せてボタンが大きくなるときに、周りのボタンの位置に影響を与えないようにするためです。

CSS

続いてCSSです。まず全体を載せておきます。

#box{
  width: 850px;
  margin: 40px auto;
  color: #3F2F69;
  text-align: center;
}
.boxin{
  position: relative;
  float: left;
  width: 150px;
  height: 150px;
  margin: 0 10px;
}
#box a{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  padding: 0px;
  border-radius: 50%;
  color: #fff;
  font-size: 32px;
  line-height: 150px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -o-transition: .5s;
  -ms-transition: .5s;
  transition: .5s;
  z-index: 10;
}
#box a:hover{
  top: -75px;
  left:-75px;
  width: 300px;
  height: 300px;
  font-size: 48px;
  line-height: 300px;
  z-index: 100;
}
#circle1{
  background: #490A3D;
  background: rgba(73,10,61,.7);
}
#circle2{
  background: #bd1550;
  background: rgba(189,21,80,.7);
}
#circle3{
  background: #e97f02;
  background: rgba(233,127,2,.7);
}
#circle4{
  background: #d6ae00;
  background: rgba(214,174,0,.7);
}
#circle5{
  background: #8a9b0f;
  background: rgba(138,155,15,.7);
}

リンクの部分以外はなんてことはないと思います。

CSSを個別に解説

では、セレクタごとに個別に解説していきます。

.boxin{
  position: relative;
  float: left;
  width: 150px;
  height: 150px;
  margin: 0 10px;
}

まず、ボックスを横並びに配置します。このボックスの子要素のリンクにマウスを乗せると大きくなりますが、このボックスの位置関係は変わりません。

#box a{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 150px;
  height: 150px;
  padding: 0px;
  border-radius: 50%;
  color: #fff;
  font-size: 32px;
  line-height: 150px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -o-transition: .5s;
  -ms-transition: .5s;
  transition: .5s;
}

クラスboxinを基準に絶対値で配置しています。「width: 150px;」「height: 150px;」「border-radius: 50%;」で直径150pxの真円になります。

「line-height: 150px;（円の直径と同じ）」「text-align: center;」でテキストが円の中心に表示されます。ただしこれはテキストが1行のときだけです。

transitionを使ってマウスを乗せて拡大するときに動きをつけます。z-indexはマウスを乗せたときのボタンを優先して表示するためです。

#box a:hover{
  top: -75px;
  left:-75px;
  z-index: 100;
  width: 300px;
  height: 300px;
  font-size: 48px;
  line-height: 300px;
}

続いてマウスを乗せたときのボタンの設定です。

「width: 300px;」「height: 300px;」で円の大きさを倍にします。円を大きくしたときのテキストを位置を中心にするため「line-height: 300px;（円の直径と同じ）」にします。

円の中心を基準に拡大するため「top: -75px;」「left:-75px;」を指定します。そのままだと右下へ大きくなりますので、拡大する大きさの半分だけ上と左へずらします。

マウスを乗せたときの円を優先して表示するため「z-index: 100;」としています。通常時より大きい数字でしたらなんでもいいです。

#circle1{
  background: #490A3D;
  background: rgba(73,10,61,.7);
}

背景色はそれぞれ指定しています。rgbaカラーが使えないブラウザのために、先に6桁のカラーコードで指定しています。rgbaカラーにすると、マウスを乗せて他の円と重なったときに下の要素の透けて見えます。

さいごに

ということで、円の中心を基準に拡大するボタンを並べたメニューを作ってみました。なんてことはないですが、参考になることがあればうれしいです。

個人的にサンプルの配色はレトロな感じでなかなか気に入っているのですがいかがでしょうか。評判がよさそうでしたら、今回おこなったWebツールを使った配色の決め方を紹介したいと思います。