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

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

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

今回のお題は,スイッチで電灯をつけたり消したりするサンプル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;
}

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入