CSSのactive疑似クラスでクリック時にアイコンを変える

技術情報

2017.05.162017.05.17

最近疑似クラスを少し調べることがあったので、勉強がてらactive疑似クラスでクリック時にアイコンを変えるようなCSSを作ってみました。

ソースコード
1. html
2. css
サンプル
1. カンマ区切りでまとめたcss
2. 「.moon-active」クラスを付けたhtml
スマホの時
まとめ

ソースコード

html

div要素のみで作っています。

<div class="sun-moon">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

css

通常時は太陽、active疑似クラスでクリック時に三日月の形になるようにしています。マウスを押し上げると太陽に戻ります。

/* 太陽 */
.sun-moon {
    position: relative;
    margin: 40px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border-radius: 10px;
    background: #E2264D;
    transition: 0.5s;
}

.sun-moon div {
    position: absolute;
    border-style: solid;
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent #E2264D transparent;
    transition: 0.5s;
}

.sun-moon div:nth-child(1) {
    transform: rotate(45deg) translate(0, -14px) rotate(-45deg) translate(-50%,-50%);
}

.sun-moon div:nth-child(2) {
    transform: rotate(85deg) translate(0, -20px) rotate(-45deg) translate(-50%,-50%);
}

.sun-moon div:nth-child(3) {
    transform: rotate(115deg) translate(0, -24px) rotate(-25deg) translate(-50%,-50%);
}

.sun-moon div:nth-child(4) {
    transform: rotate(148deg) translate(0, -25px) rotate(-18deg) translate(-50%,-50%);
}

.sun-moon div:nth-child(5) {
    transform: rotate(182deg) translate(0, -20px) rotate(-2deg) translate(-50%,-50%);
}

.sun-moon div:nth-child(6) {
    transform: rotate(227deg) translate(0, -19px) rotate(-10deg) translate(-50%,-50%);
}

.sun-moon div:nth-child(7) {
    transform: rotate(270deg) translate(0, -11px) rotate(5deg) translate(-50%,-50%);
}

.sun-moon div:nth-child(8) {
    transform: rotate(333deg) translate(0, -11px) rotate(-15deg) translate(-50%,-50%);
}

/* 三日月 */
.sun-moon:active {
    width: 20px;
    height: 40px;
    border-left: 10px solid #FFCD00;
    border-radius: 120px 0px 0px 120px / 90px 0px 0px 90px;
    background: none;
    transform: rotate(-36deg);
    transition: 0.5s;
}

.sun-moon:active div {
    display: none;
    transition: 0.5s;
}

サンプル

サンプル

状態を維持しつつ太陽や三日月の形をクリックするたびに変えたい場合は、active時のスタイルをコピーした「.moon-active」といったクラスを作り、JavaScriptなどでクリックするたびに「.moon-active」を付与、削除を繰り返すような感じになります。active用のプロパティが全く同じなのであれば、カンマ区切りでまとめた方がすっきりすると思います。

カンマ区切りでまとめたcss

.sun-moon:active,
.moon-active {
    width: 20px;
    height: 40px;
    border-left: 10px solid #FFCD00;
    border-radius: 120px 0px 0px 120px / 90px 0px 0px 90px;
    background: none;
    transform: rotate(-36deg);
    transition: 0.5s;
}

.sun-moon:active div,
.moon-active div {
    display: none;
    transition: 0.5s;
}

「.moon-active」クラスを付けたhtml

<div class="sun-moon moon-active">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

スマホの時

スマホはactive疑似クラスが反応しないので、要素に「ontouchstart」を記述して反応させます。

<div class="sun-moon" ontouchstart="">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

まとめ

active疑似クラスはクリック時にのみに適用される。
スマホではactive疑似クラスは反応しないので「ontouchstart」を使う。

太陽と三日月アイコンはCSSで作ったのですが、太陽の周りにある三角マークもクリック時の三日月の表示場所も適当に指定しているので、active疑似クラスでこんなことができるんだ、程度に考えていただけると助かります。