たった3つの CSS3 プロパティで Tag Cloud をオシャレにする方法

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

ブログなんかでお馴染みの Tag Cloud. これを少しオシャレにする方法について紹介しようと思います.

どうオシャレになるかというと, このブログの右上にある Tag Cloud のようになります. マウスを乗っけるとホワっとなってジュワっとなってピっとなります.(「ダセェ~じゃん!」なんて意見はあなたの心のなかに留めておいて下さい)

『右上のあのぼかすやつってどうやるんですか?』なんて質問を受けることが何度かあったので, ざっくりとまとめた次第です.

Demo Download

Flow

流れ

  • マウスを乗せると .tagcloud:hover a:not(:hover) が反応して文字がぼやける
  • マウスが乗っている a タグは上のセレクタが適応されないので強調して表示される
  • .tagclound a で transition を指定しているので変化が補間されてアニメーションする

Code

HTML

タグクラウドの HTML コードです. 右上にある Tag Cloud のコードをコピペしたのもです.

Word Press の Widget の機能として出力したコードですが, どのブログでも似たようなコードになるかと思います.

<h1>Tag Cloud</h1>
<div class="contents">
    <div class="tagcloud">
        <a href="http://tmlife.net/tag/about" class="tag-link-24" title="1件のトピック" style="font-size: 8pt;">About</a>
        <a href="http://tmlife.net/tag/ajax" class="tag-link-8" title="4件のトピック" style="font-size: 11.027027027pt;">Ajax</a>
        <a href="http://tmlife.net/tag/apache" class="tag-link-14" title="1件のトピック" style="font-size: 8pt;">Apache</a>
        <a href="http://tmlife.net/tag/aptana" class="tag-link-46" title="1件のトピック" style="font-size: 8pt;">Aptana</a>
        <a href="http://tmlife.net/tag/arctic-js" class="tag-link-57" title="1件のトピック" style="font-size: 8pt;">arctic.js</a>
        <a href="http://tmlife.net/tag/audio" class="tag-link-42" title="8件のトピック" style="font-size: 12.9189189189pt;">Audio</a>
        <a href="http://tmlife.net/tag/binary" class="tag-link-33" title="2件のトピック" style="font-size: 9.36216216216pt;">Binary</a>
        <a href="http://tmlife.net/tag/canvas" class="tag-link-10" title="16件のトピック" style="font-size: 15.0378378378pt;">Canvas</a>
        <a href="http://tmlife.net/tag/chrome" class="tag-link-23" title="1件のトピック" style="font-size: 8pt;">Chrome</a>
        <a href="http://tmlife.net/tag/coffeescript" class="tag-link-65" title="5件のトピック" style="font-size: 11.6324324324pt;">CoffeeScript</a>
        <a href="http://tmlife.net/tag/css" class="tag-link-26" title="8件のトピック" style="font-size: 12.9189189189pt;">CSS</a>
        <a href="http://tmlife.net/tag/css3" class="tag-link-21" title="26件のトピック" style="font-size: 16.5513513514pt;">CSS3</a>
        <a href="http://tmlife.net/tag/csv" class="tag-link-44" title="1件のトピック" style="font-size: 8pt;">CSV</a>
        <a href="http://tmlife.net/tag/dart" class="tag-link-49" title="1件のトピック" style="font-size: 8pt;">Dart</a>
        <a href="http://tmlife.net/tag/dvd" class="tag-link-16" title="1件のトピック" style="font-size: 8pt;">DVD</a>
        <a href="http://tmlife.net/tag/edge" class="tag-link-45" title="1件のトピック" style="font-size: 8pt;">Edge</a>
        <a href="http://tmlife.net/tag/enchant-js" class="tag-link-38" title="50件のトピック" style="font-size: 18.6702702703pt;">enchant.js</a>
        <a href="http://tmlife.net/tag/entertainer" class="tag-link-15" title="1件のトピック" style="font-size: 8pt;">Entertainer</a>
        <a href="http://tmlife.net/tag/game" class="tag-link-34" title="1件のトピック" style="font-size: 8pt;">Game</a>
        <a href="http://tmlife.net/tag/gl-enchant-js" class="tag-link-56" title="17件のトピック" style="font-size: 15.2648648649pt;">gl.enchant.js</a>
        <a href="http://tmlife.net/tag/google-api" class="tag-link-6" title="3件のトピック" style="font-size: 10.2702702703pt;">Google API</a>
        <a href="http://tmlife.net/tag/html" class="tag-link-11" title="4件のトピック" style="font-size: 11.027027027pt;">HTML</a>
        <a href="http://tmlife.net/tag/html5" class="tag-link-7" title="41件のトピック" style="font-size: 17.9891891892pt;">HTML5</a>
        <a href="http://tmlife.net/tag/iphone" class="tag-link-12" title="7件のトピック" style="font-size: 12.5405405405pt;">iPhone</a>
        <a href="http://tmlife.net/tag/javascript" class="tag-link-4" title="139件のトピック" style="font-size: 22pt;">JavaScript</a>
        <a href="http://tmlife.net/tag/jquery" class="tag-link-9" title="1件のトピック" style="font-size: 8pt;">jQuery</a>
        <a href="http://tmlife.net/tag/json" class="tag-link-39" title="1件のトピック" style="font-size: 8pt;">json</a>
        <a href="http://tmlife.net/tag/latex" class="tag-link-54" title="1件のトピック" style="font-size: 8pt;">LaTeX</a>
        <a href="http://tmlife.net/tag/links" class="tag-link-52" title="2件のトピック" style="font-size: 9.36216216216pt;">Links</a>
        <a href="http://tmlife.net/tag/mocha" class="tag-link-67" title="2件のトピック" style="font-size: 9.36216216216pt;">mocha</a>
        <a href="http://tmlife.net/tag/node-js" class="tag-link-66" title="5件のトピック" style="font-size: 11.6324324324pt;">node.js</a>
        <a href="http://tmlife.net/tag/objective-c" class="tag-link-13" title="1件のトピック" style="font-size: 8pt;">Objective-C</a>
        <a href="http://tmlife.net/tag/other" class="tag-link-17" title="1件のトピック" style="font-size: 8pt;">Other</a>
        <a href="http://tmlife.net/tag/programming" class="tag-link-3" title="6件のトピック" style="font-size: 12.1621621622pt;">Programming</a>
        <a href="http://tmlife.net/tag/python" class="tag-link-36" title="9件のトピック" style="font-size: 13.2972972973pt;">Python</a>
        <a href="http://tmlife.net/tag/review" class="tag-link-31" title="3件のトピック" style="font-size: 10.2702702703pt;">Review</a>
        <a href="http://tmlife.net/tag/seminar" class="tag-link-59" title="2件のトピック" style="font-size: 9.36216216216pt;">seminar</a>
        <a href="http://tmlife.net/tag/svg" class="tag-link-32" title="3件のトピック" style="font-size: 10.2702702703pt;">SVG</a>
        <a href="http://tmlife.net/tag/tips" class="tag-link-53" title="4件のトピック" style="font-size: 11.027027027pt;">tips</a>
        <a href="http://tmlife.net/tag/tmlib" class="tag-link-55" title="3件のトピック" style="font-size: 10.2702702703pt;">tmlib</a>
        <a href="http://tmlife.net/tag/tools" class="tag-link-5" title="4件のトピック" style="font-size: 11.027027027pt;">Tools</a>
        <a href="http://tmlife.net/tag/unity" class="tag-link-51" title="9件のトピック" style="font-size: 13.2972972973pt;">Unity</a>
        <a href="http://tmlife.net/tag/web" class="tag-link-25" title="17件のトピック" style="font-size: 15.2648648649pt;">Web</a>
        <a href="http://tmlife.net/tag/webgl" class="tag-link-35" title="12件のトピック" style="font-size: 14.1297297297pt;">WebGL</a>
        <a href="http://tmlife.net/tag/wordpress" class="tag-link-40" title="2件のトピック" style="font-size: 9.36216216216pt;">WordPress</a>
    </div>
</div>

CSS

CSS のコードになります.

body {
    background-color: #ffffff; font: 30px sans-serif;
    font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif;
    line-height: 1em;
}

.tagcloud a {
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -o-transition: 500ms;
    -ms-transition: 500ms;
    transition: 500ms;
}

.tagcloud:hover a:hover {
    text-shadow: 0px 0px 1px hsla(230, 100%, 70%, 0.5);
}

.tagcloud:hover a:not(:hover) {
    color: transparent;
    text-shadow: 0px 0px 3px hsla(230, 100%, 70%, 0.5);
}

Tips

transition プロパティと擬似クラス :hover でアニメーション

CSS3 で追加された transition プロパティと擬似クラス :hover を組み合わせることで マウスを乗せたときにアニメーションさせることができます.

color: transparent; と text-shadow で文字をぼかす

意外と知られていない transparent. これを color に指定することで文字を透明にすることができます.

color: transparent; を指定して更に text-shadow で影を表示することで 文字をぼかしたように見せることができます.

これを .tagcound に hover した際に, hover されていない aタグ全てに適応させてぼかすことで hover 中の a タグのみを強調することができます.

hsl, hsla を使った色指定

hsl, hsla を使えば視認性を意識した色指定を簡単に行うことができます.

指定方法は

hsl(色相, 彩度, 輝度)
hsla(色相, 彩度, 輝度, アルファ)

今まで rgb で Web サイトの色調整を行なっていた方は, hsl に置き換えるだけでもだいぶ楽になるかと思います.

hsl について詳しく知りたい方は 『CSS3 で追加された HSL の使い方』をどうぞ

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT