CSS3アニメーションでつくるインターフェイス表現

第3回 選択項目以外がぼけるメニュー

この記事を読むのに必要な時間:およそ 4 分

今回のお題は,サンプル1のように項目を並べたメニューだ。マウスポインタをメニュー項目に重ねると,他の項目のテキストがぼける。また,ポインタを重ねたメニュー項目は浮き上がったり,マウスボタンを押すと凹むようにアニメーションする。CodePenに公開されたBlurry Menuを参考に,HTMLとCSSのコードの構成を改め,簡潔にした。

サンプル1 CSS3: Blurry menu

メニューのもとになる静的スタイル

まず,<body>要素に書くコードの構成だ。メニューは,つぎのようにclass属性が"menu"の<ul>要素でリストとして組み立てる。メニュー項目をclass属性"item"の<li>要素とし,その中の<a>要素にテキストを加えた。そして,メニューの<ul>要素全体を,class属性"container"の<div>要素で包んでいる。

<div class="container">
<ul class="menu">
    <li class="item"><a href="#">HTML</a></li>
    <li class="item"><a href="#">CSS</a></li>
    <li class="item"><a href="#">JavaScript</a></li>
    <li class="item"><a href="#">XML</a></li>
</ul>
</div>

この<body>要素の記述に対して,つぎのような<style>要素を加える。今のところ,メニューは動きのないただのバーで図1),マウスインタラクションも加えられていない。なお,CSSにベンダープレフィックスをつけなくて済むように,<script>要素で-prefix-freeを読み込んだ(第1回のベンダープレフィックスと-prefix-freeの項参照)。

<script src="lib/prefixfree.min.js"></script>
<style>
body {
    font-family: Arial, Helvetica, sans-serif;
    background: dimgray;
}
.container {
    height: 50px;
    margin: 40px 0;
    padding: 50px 0;
    text-align: center;
}
.menu {    
    display: inline-block;
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    background: linear-gradient(ghostwhite, gainsboro);
}
.item {
    float: left;
    font-size: 14px;
    line-height: 50px;
    padding: 0 35px;
    cursor: pointer;
}
.item a {
    color: gray;
    display: block;
    text-decoration: none;
    text-shadow: 0 1px 0 white;
}
</style>

図1 メニューのもととなるスタイル

図1 メニューのもととなるスタイル

メニューの背景色とテキストの影

今回のお題は,さほど目新しい機能は使っていない。細かい使い方の発想や,それらの組み合わせで表現を組み立てている。しかし言われないと気づかないところも少なくない。前掲の<style>要素の定めでは,メニューバーclass属性"menu")backgroundプロパティに,linear-gradient()関数で線形のグラデーションを加えている。おそらく気づきにくいだろうから,つぎのようにはっきりとした白から黒のグラデーションに変えてみよう図2)。実は,少し丸く膨らんだような表現にしてあったのだ。

.menu {    

    /* background: linear-gradient(ghostwhite, gainsboro); */
    background: linear-gradient(white, black);

}

.item a {

    text-shadow: 0 1px 0 white;

}

図2 メニュー背景のグラデーションと項目テキストの影

図2 メニュー背景のグラデーションと項目テキストの影

もうひとつ気づくのは,テキストが凹んで見えることだ(前掲図2)。そのためには,下方向に明るい影を入れればよい(第1回のマウスポインタを重ねたときのボタンの表現参照)。テキストの影は,text-shadowプロパティに影の水平・垂直のずれとぼけ幅および色を与えて定める。前掲コードでは,下に1ピクセルのくっきりとした白い影を加えていた。

text-shadow: 水平のずれ 垂直のずれ ぼけ幅 カラー

なお,linear-gradient()関数の第1引数には,グラデーションの向きが与えられる。これを省くと,デフォルトで上から下のグラデーションto bottomになる。

linear-gradient([to 方向,] 始まりの色, 終わりの色)

メニュー項目の間に区切り線を入れる

メニューバーの項目class属性"item")の間には区切り線を入れる。ここでも小技を加えて立体的に見せたい。そのためには,プロパティborder-leftborder-rightで明暗の差をつければよい。まずは,わかりやすく白と黒で太めの線を加えてみた図3)。

.item {

    border-left: 4px solid white;
    border-right: 4px solid black;

}

図3 メニュー項目の左右に区切り線が入る

図3 メニュー項目の左右に区切り線が入る

効果が確かめられたところで,改めてつぎのように線は細くし,明暗差をグレーで和らげた。そして,両端の線は擬似クラス:first-child:last-childで指定してなくすnoneことにする図4)。

.item {

    border-left: 1px solid white;
    border-right: 1px solid gainsboro;

}

li.item:first-child {
    border-left: none;
}
li.item:last-child {
    border-right: none;
}

図4 区切り線により少し膨らんで見えるメニュー項目

図4 区切り線により少し膨らんで見えるメニュー項目

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入