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

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

この記事を読むのに必要な時間:およそ 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 擬似要素と変形を加える前のナビゲーションバー

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入