[CSS] 動画の再生・一時停止アイコンをCSSだけで描きたい
- フリー素材もフォントアイコンもあるので、あえてCSSで描く必要性はあまりない（表示速度は一番速いはず？）ですが、動画コンテンツの再生・一時停止のアイコンをCSSで描いてみます
- 各要素の色指定に「currentColor」を使うことで、親クラスの「color」を変更するだけでアイコン全体の色を変えることができるようにしています
- サイズ指定に「em」を使うことで、親クラスの「font-size」を変更するだけでアイコン全体の色を変えることができるようにしています
再生アイコンのサンプルコード
html
<span class="video_play"></span>
CSS
.video_play {
display: inline-block;
position: relative;
width: 1em;
height: 1em;
border: 0.05em solid currentColor;
border-radius: 50%;
color: #000;
font-size: 200px;
}
.video_play::before {
position: absolute;
top: 50%;
left: 30%;
transform: translateY(-50%);
width: 0px;
height: 0px;
border: 0.3em solid transparent;
border-left: 0.5em solid currentColor;
box-sizing: border-box;
content: "";
}
一時停止アイコンのサンプルコード
html
<span class="video_pause"></span>
CSS
.video_pause {
display: inline-block;
position: relative;
width: 1em;
height: 1em;
border: 0.05em solid currentColor;
border-radius: 50%;
color: #000;
font-size: 200px;
}
.video_pause::before,
.video_pause::after {
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 0.1em;
height: 0.5em;
box-sizing: border-box;
background-color: currentColor;
content: "";
}
.video_pause::before {
left: 40%;
}
.video_pause::after {
left: 60%;
}
クリックしたときに再生⇔一時停止を表示切り替えするアイコン
- labelタグとチェックボックスを活用することで、クリックしたときにアイコンの表示切り替えができるようになります
- 「:checked」セレクタが無効なときに再生ボタン用のスタイルを適用し、「:checked」セレクタが有効なときに一時停止ボタンのスタイルを適用させています
- 「:checked」セレクタが無効な状態を判定するために「:not」を活用しています
html
<label class="video_play_pause">
<input type="checkbox">
<span></span>
</label>
CSS
.video_play_pause {
display: inline-block;
position: relative;
width: 1em;
height: 1em;
border: 0.05em solid currentColor;
border-radius: 50%;
color: #000;
font-size: 200px;
}
.video_play_pause > input {
display: none;
}
.video_play_pause > input:not(:checked) + span::before {
position: absolute;
top: 50%;
left: 30%;
transform: translateY(-50%);
width: 0px;
height: 0px;
border: 0.3em solid transparent;
border-left: 0.5em solid currentColor;
box-sizing: border-box;
content: "";
}
.video_play_pause > input:checked + span::before,
.video_play_pause > input:checked + span::after {
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 0.1em;
height: 0.5em;
box-sizing: border-box;
background-color: currentColor;
content: "";
}
.video_play_pause > input:checked + span::before {
left: 40%;
}
.video_play_pause > input:checked + span::after {
left: 60%;
}
CSSでアイコンを描いてみるシリーズ
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。