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

第13回　電灯をつけたり消したりする

CSS, アニメーション, スイッチ

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

今回のお題は，スイッチで電灯をつけたり消したりする（サンプル1⁠）⁠。デザインとアニメーション表現は「lamp」を参考にさせてもらった。この連載の主題である「インターフェイス」としては，応用の幅が少し狭いかもしれない。けれど，おもしろい素材なので，採り上げることにした。ただ，スイッチがさびしいので，「⁠CSS3 Checkbox Styles」からひとつ使わせてもらった。複数のCSSを組み合わせる場合は，設定がかぶらないようにできるだけクラスを用いるのがよい。そこで，構成は大幅に手直しした。もちろん，コードは絞り込み，わかりやすく組み立て直している。

サンプル1　CSS3: Lamp with switch

見える要素がない<body>要素の記述

今回，HTMLドキュメントの<body>要素には，見える要素がない（コード1⁠）⁠。細かくいえば，type属性が"checkbox"の<input>要素（class属性"check"）はある。だが，CSSでvisibilityプロパティをhiddenにして隠す（コード1参照⁠）⁠。つまり，電灯もスイッチもすべてCSSでつくるということだ。なお，<label>要素のfor属性に<input>要素のid属性値（"status"）を与えたので，この要素のクリックでチェックボックスのオンとオフが切り替えられる。また例によって，ベンダープレフィックスを省くため，<script>要素で-prefix-freeを読み込んである（第1回の「ベンダープレフィックスと-prefix-free」の項参照⁠）⁠。

コード1　<body>要素には見える要素がない
<head>要素

<style>
.check {
    visibility: hidden;
}
</style>
<script src="lib/prefixfree.min.js"></script>

<body>要素

<div class="container">
    <input type="checkbox" id="status" name="check" class="check" />
    <label for="status" class="button"><div><!--button--></div></label>
    <div class="lamp">
        <div class="light"><!--light--></div>
    </div>
</div>

消えている電灯を静的に表現する

まず，<div>要素（class属性"lamp"）で，つぎのように電灯が下がる線を描く（図1⁠）⁠。background-imageプロパティには，linear-gradient()関数を3つ定めた。ところが，色（rgba(0, 0, 0, 0.7)）はすべて同じだ。これは3つにそれぞれ異なる大きさ（background-sizeプロパティ）と位置（background-position）を与えることで，3つのパーツを表示している。

body {
    background: #2f323c;
}
.container {
    position: relative;
    width: 100vw;
    height: 100vh;
}
.lamp {
    position: relative;
    margin: -19px auto;
    width: 0.7rem;
    height: 10rem;
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
    background-repeat: no-repeat;
    background-size: 0.15rem 8rem,
        0.4rem 0.8rem,
        0.7rem 2rem;
    background-position: 50% 0,
        0.19rem 8rem,
        0 8.8rem;
}

図1　電灯が下がる線

図1　電灯が下がる線

消えている電灯は<div>要素（class属性"lamp"）に，つぎのような::before擬似要素で加える（図2⁠）⁠。円形にして，box-shadowプロパティで内側（inset）に縁を与えた。

.lamp::before {
    content: '';
    position: absolute;
    left: -1.65rem;
    bottom: -4rem;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(255,255, 255, 0.03);
    box-shadow: inset 2px -2px 10px rgba(255, 255, 255, 0.07);
}

図2　消えている電灯

図2　消えている電灯

電極の細長い部分は，つぎのように別の<div>要素（class属性"light"）でつくる。もうひとつの丸いパーツは，::before擬似要素で加えた（図3⁠）⁠。消えている電灯のCSSの定めは，以下のコード2にまとめた。

.light {
    position: absolute;
    top: 10.05rem;
    left: 0.25rem;
    height: 1.5rem;
    border-right: 0.2rem solid rgba(255, 255, 255, 0.05);
}
.light::before {
    position: absolute;
    box-sizing: border-box;
    content: '';
    top: 1.5rem;
    left: -0.35rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    border: 0.2rem solid rgba(255, 255, 255, 0.05);
}

図3　電極を加える

図3　電極を加える

コード2　消えている電灯の静的なスタイル

body {
    background: #2f323c;
}
.container {
    position: relative;
    width: 100vw;
    height: 100vh;
}
.lamp {
    position: relative;
    margin: -19px auto;
    width: 0.7rem;
    height: 10rem;
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
    background-repeat: no-repeat;
    background-size: 0.15rem 8rem,
        0.4rem 0.8rem,
        0.7rem 2rem;
    background-position: 50% 0,
        0.19rem 8rem,
        0 8.8rem;
}
.lamp::before {
    content: '';
    position: absolute;
    left: -1.65rem;
    bottom: -4rem;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(255,255, 255, 0.03);
    box-shadow: inset 2px -2px 10px rgba(255, 255, 255, 0.07);
}
.light {
    position: absolute;
    top: 10.05rem;
    left: 0.25rem;
    height: 1.5rem;
    border-right: 0.2rem solid rgba(255, 255, 255, 0.05);
}
.light::before {
    position: absolute;
    box-sizing: border-box;
    content: '';
    top: 1.5rem;
    left: -0.35rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    border: 0.2rem solid rgba(255, 255, 255, 0.05);
}
.check {
    visibility: hidden;
}

CSS, アニメーション, スイッチ

著者プロフィール

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

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

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

著書