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

意外とやり方載ってなかったりするよね。で、円の直径を決め打ちすると全部の直径を打ち直さなきゃいけないから、直径を変えたら柔軟に対応してくれるCSSをSassで書いてみた。と言うかSassが書きたかっただけ。でもSassって便利よねー。

HTMLはまんまパクった。

<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>

続いてSass。$circle-diameterの値を変えてやると、円の直径と、基準点が変わる。

@charset "utf-8";

$circle-diameter: 150px; //円の直径
$horizon-margin: 10px;   //円の横マージン
$font-size: 16px;        //フォントサイズ

//円の数によって横幅を変える
@mixin box-width($box-num) {
    width: ($circle-diameter + ($horizon-margin * 2)) * $box-num;
}

@mixin default-circle($value) {
    width: $circle-diameter * $value;
    height: $circle-diameter * $value;
    line-height: $circle-diameter * $value;
}

#box {
    @include box-width(5);
    text-align: center;
    margin: ($circle-diameter / 2) auto;
}

.boxin {
    @include default-circle(1);
    float: left;
    margin: 0 $horizon-margin;
    position: relative;
}

a {
    position: absolute;
    display: block;
    border-radius: 50%;
    text-decoration: none;
    color: #FFF;
    -webkit-transition: 0.5s;
       -moz-transition: 0.5s;
            transition: 0.5s;
    @include default-circle(1);
    font-size: $font-size * 2;
    top: 0;
    left: 0;
    z-index: 10;
    &:hover {
        @include default-circle(2);
        font-size: $font-size * 3;
        top: $circle-diameter - ($circle-diameter * 1.5);
        left: $circle-diameter - ($circle-diameter * 1.5);
        z-index: 100;
    }
}

#circle1 {
    background-color: rgba(73, 10, 61, 0.7);
}

#circle2 {
    background-color: rgba(189, 21, 80, 0.7);
}

#circle3 {
    background-color: rgba(233, 127, 2, 0.7);
}

#circle4 {
    background-color: rgba(214, 174, 0, 0.7);
}

#circle5 {
    background-color: rgba(138, 155, 15, 0.7);
}

View Demo: Relative Center Circle Transition

expandedでの出力結果は以下。

#box {
  width: 850px;
  text-align: center;
  margin: 75px auto;
}

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

a {
  position: absolute;
  display: block;
  border-radius: 50%;
  text-decoration: none;
  color: #FFF;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  transition: 0.5s;
  width: 150px;
  height: 150px;
  line-height: 150px;
  font-size: 32px;
  top: 0;
  left: 0;
  z-index: 10;
}
a:hover {
  width: 300px;
  height: 300px;
  line-height: 300px;
  font-size: 48px;
  top: -75px;
  left: -75px;
  z-index: 100;
}

#circle1 {
  background-color: rgba(73, 10, 61, 0.7);
}

#circle2 {
  background-color: rgba(189, 21, 80, 0.7);
}

#circle3 {
  background-color: rgba(233, 127, 2, 0.7);
}

#circle4 {
  background-color: rgba(214, 174, 0, 0.7);
}

#circle5 {
  background-color: rgba(138, 155, 15, 0.7);
}

やーSass楽しいなぁ。

崇拝するhail2u.netをクソパクりまくってリスペクトして、CSSをいくつかのモジュールに分けて、SCSS(Sassy CSS)形式で書き直してみた。そしてそれをGitHubで公開してみた。

CSSを各モジュールに分けて、SCSS形式で書き直して、@mixinをちょこっと使っているぐらいなので、本当の意味でのSCSSの恩恵はまだ受けられていないような気がする。と言うか前より見難くなったような…書き方の問題？慣れてくれば見やすくなってくるのかなー。

とりあえずの変化としては、compressedで書き出すようにしているので、ファイルサイズが35.605KBから29.926KBまで縮められたことかな。無駄な記述が多いのは自覚しているので、SCSS形式にしたことで、その問題が分かりやすくなって(現に書き直してる途中で「ここまとめられんじゃね？」ってところがいくつかあった)、効率的な書き方ができるようになると思う。25KBぐらいまでは縮めたい。

SassとかSCSSについて調べていたときのメモ

自動書き出し

$sass --watch hoge.scss:hoge.css

Windowsだったので、コマンドプロンプトでの操作。

通常のCSSのような表示で自動書き出し

$sass --style expanded --watch hoge.scss:hoge.css

圧縮して自動書き出し

$sass --style compressed --watch hoge.scss:hoge.css

Sassでの@charsetの扱い

• @charsetで指定された文字コードに従って出力を変換する
• ASCII文字しかなかった場合は@charsetがどのような値でも出力から削除される

ので、多くの場合@charsetを書いていても出力から消える。

contentプロパティやコメントなどで日本語が含まれている場合以外(半角英数字だけの場合)は、@charsetは削除されるらしい。

SCSSでの隣接セレクタの書き方

以下通常のCSS。

#hoge h1 {
    color: black;
}

#hoge h1 + p {
    color: red;
}

これをSCSS形式で書きたいとき。2パターンある。

#hoge {
    h1 {
        color: black;
    }
    h1 + p {
        color: red;
    }
}

#hoge {
    h1 {
        color: black;
        & + p {
            color: red;
        }
    }
}

お世話になったサイト

• プライマリSCSSファイル – Weblog – hail2u.net
• Rubyダウンロード及びインストール – Rubyインストール
• web帳 | CSSライブラリ化？ Sass(scss)のインストール方法 mac
• Sassでの@charset – おれ ここ めも かきなぐる おまえ ここ よむ なぐる – subtech
• TEST CORDING » Sass：隣の要素をまとめるCSSの書き方（ + ）と比較してみた

まとめ

SassもといSCSS面白い！

これをSublime Textで書き出しとかを調整できたらさらに楽しくなりそう。あとはWeb上じゃなく、コマンドだけでGitHubにコミットできるようになればいいな。これは単にやり方を知らないだけなんだけど。