自社アドベントカレンダー実施中です
よろしければこちらもご覧ください
はじめに
自分は普段、業務システムのバックエンド担当で、HTML,CSSはシンプルなものしか実装したことがありません。今までCSSをがっつりと書いたことがなく、CSSではレイアウトの調整、JavaScriptで動きを付けるものだと思って過ごしてきました。
ある日、CSSだけでJavaScriptで書いたように動いているボタンを見て、どうやって書いてあるのか気になったので、コードを調べ、書いてみました。
WEBページを作ったことがある方には基本事項ばかりの、ゆるい記事です。
自分の備忘録、そして実務には向かない内容ですのでご了承ください。
CSSで書いてみたもの
早速ですが、こちらが動作のデモです。
デフォルトではボタンを押せませんが、「同意する」にチェックを入れると遷移できるようになります。JavaScriptは書いていません。
See the Pen チェック＆クリック by 春 (@harusaku) on CodePen.
作成時、こちらを参考にさせていただきました
本家様は、同意するチェックやリンクにも制御が付いて、
レイアウトもきちんと指定されています。美しいです。
疑似クラス、ＣＳＳアニメーション
今回調べて、初めて書きました。便利なクラスがあるんですね～。
さらにググって解読
参考元の、お手本CSSをググりながら作成。書いた内容は、以下のとおりです。
1. リンク要素の手前に、「次のページへ」という要素を表示する
⇒「次のページへ」要素が邪魔して、リンクは押せなくなる
.next::before{
content : '次のページへ' ;
position : absolute ;
width : 100% ;
height : 100% ;
/* 色、文字位置なども指定する(略) */
}
.next{
position : relative ;
/* 色、文字位置なども指定する(略) */
}
2.「同意する」にチェックがあれば、リンクを最前面に出す
⇒リンクがクリックできるようになる
#check:checked ~ .next{
z-index : 2 ;
}
3. 「次のページへ」の押せないボタンにアニメーションを付ける（ゆっくり消す）
#check:checked ~ .next::before{
animation: animation 1s;
animation-play-state: running;
animation-fill-mode: forwards;
}
@keyframes animation {
/* アニメーションの設定を書く(略) */
}
です。やっていることはシンプル。
あとは各要素の位置を調整すれば完成で、冒頭のデモの動きになります。
おわりに
練習のために、コピペせずに組み立てながら書いたため、これだけのコードに思いのほか時間がかかってしまいました。自分のようなCSS初心者は、少し難しいことをやろうとすると、書きたいものが全然違うところに表示されたりして、思い通りのレイアウトが中々完成しません。
今回書いたものは、（JavaScriptや、JQueryを使えば一瞬で書けるし）全く実用的ではありませんが、動きを想像しながら実際に書いてみることでCSSの知識が深まり、良い練習になりました。基本の動作を組み合わせてやりたいことを実現するというのは、開発と同じだなのだと思いました。
あと、codepenなどに公開されている、色々な方のカラフルな動くサンプルは、見ているだけで楽しかったです。メモ帳一つあれば表示確認ができるので、機会があればいろいろ動かしてみようかなと思いました。
（余談）達人になると、CSSだけでマリオが作れる。
今回調べている途中で知りました。画像も無し、HTMLとCSSだけだそうです。Aボタンでジャンプができ、実際にプレイできて驚きました。
最後まで読んでいただきありがとうございました。