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

第17回　立体的なナビゲーションバーのアニメーション

CSS, アニメーション, ナビゲーションバー

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

今回のお題は，ボタンが立体的に並んだナビゲーションバーだ（サンプル1）⁠。マウスポインタを重ねると，ボタンが飛び出す。「⁠Navigation Bar by Jan Kaděra」のデザインとアニメーションをもとに，わかりやすく組み立て直した。3次元の動きで，ボタンの数も多い。少しやっかいそうに感じたかもしれない。ところが，思いのほかコードはたやすい。

サンプル1　CSS3: 3D style navigation bar

平面的なナビゲーションバー

まずは<head>要素にいくつか仕込みをしておこう。ボタンのアイコンにはFont Awesomeを使うので，つぎのようにCDNを読み込む（第15回の「アイコンWebフォントを使う」参照）⁠。おなじみの-prefix-freeも加える。そして，今回はリセットCSSを用いた。ブラウザによって異なるデフォルトをリセットすることで，表現が揃えられる。広く使われているのは，Eric Meyer氏のCSSだ（⁠「2016年で最もダウンロードされたリセットCSSランキングトップ5」⁠）⁠。CDNはcdnjsのmeyer-resetから読み込んだ。

<head>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>

HTMLのコードはつぎに示す簡素なつくりだ。<ul>要素（class属性"nav-bar"）の中にボタンを，要素<li>と<a>（class属性"list-item"）の入れ子で加えた。そこにFont Awesomeのアイコンが入っている。

<body>要素

<ul class="nav-bar">
    <li>
        <a class="list-item" href="#">
            <i class="fa fa-bars"></i>
        </a>
    </li>
    <li>
        <a class="list-item" href="#">
            <i class="fa fa-th-large"></i>
        </a>
    </li>
    <li>
        <a class="list-item" href="#">
            <i class="fa fa-bar-chart"></i>
        </a>
    </li>
    <li>
        <a class="list-item" href="#">
            <i class="fa fa-tasks"></i>
        </a>
    </li>
    <li>
        <a class="list-item" href="#">
            <i class="fa fa-bell"></i>
        </a>
    </li>
    <li>
        <a class="list-item" href="#">
            <i class="fa fa-archive"></i>
        </a>
    </li>
    <li>
        <a class="list-item" href="#">
            <i class="fa fa-comment"></i>
        </a>
    </li>
    <li>
        <a class="list-item" href="#">
            <i class="fa fa-sitemap"></i>
        </a>
    </li>
    <li>
        <a class="list-item" href="#">
            <i class="fa fa-thumbs-up"></i>
        </a>
    </li>
    <li>
        <a class="list-item" href="#">
            <i class="fa fa-tumblr"></i>
        </a>
    </li>
</ul>

これにつぎのCSSを割り当てると，2次元で影をつけた平坦なナビゲーションバーができ上がる（図1）⁠。擬似要素と変形を加えて立体的にしていく。

* {
    box-sizing: border-box;
}
html,
body {
    width: 100%;
    height: 100%;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f2;
}
li {
    list-style: none;
}
.list-item {
    background: #000;
    color: #575757;
    text-align: center;
    height: 2.5em;
    width: 4em;
    line-height: 2.5em;
    border-bottom: 1px solid #060606;
    position: relative;
    display: block;
    box-shadow: -2em 1.5em 0 #e1e1e1;
}

図1　擬似要素と変形を加える前のナビゲーションバー

図1　擬似要素と変形を加える前のナビゲーションバー

CSS, アニメーション, ナビゲーションバー

著者プロフィール

野中文雄（のなかふみお）

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

URL：http://www.FumioNonaka.com/

著書