格納しているウィンドウを開く
- FABにしたシェアボタンに各アイコンを格納したい。
- ウィンドウを開くアクションを設定したい。
ココがポイント
結論：
input要素の「チェックボックス」を使用することで、クリックすると格納してあるウィンドウが開いたり閉じたりするアクションを、CSSのみで設定ができる。また、動きをつけたいときは、CSSの「animation」を使用する。
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。
皆様は、シェアボタンをに、それぞれのシェアアイコンを格納したいと思ったことはございませんか？
JavaScriptのtoggleClassメソッドを使う方法もございますが、今回はCSSとHTMLだけでウィンドウの開閉をする方法をご紹介しようと思います。
目次
1.「FAB」とは
「FAB」とは、フローティングアクションボタンの略であり、UIの上に浮く丸いアイコンのような形でデザインします。製品ストーリーの重要な部分を表現するためのツールとしてよく使われます。
もっと詳しく
FABは、CSSで簡単にデザインできるので、是非目立たせたいアイコンに使用してみてください。
2.シェアボタンをFABにして、アクションを追加
3.チェックボックスを利用して格納してあるウィンドウを開閉する方法
See the Pen
share-button by 三好雄介 (@yusuke5028198)
on CodePen.
type属性を「checkbox」の値にした「input」要素を、残りの「label」要素で囲んでいる項目をクリックすることで、checked属性の切り替えを行っています。
「input」要素の「id」属性の値を、「label」要素の「for」属性の値に入れることで、「label」要素で囲んだ要素からも、チェックボックスの属性を変化させることができるようになります。
この仕組みを利用して、シェアボタンや閉じるボタンをクリックすることでウィンドウの開閉を行っています。
HTMLの「<!--格納用シェアアイコン群↓--><!--格納用シェアアイコン群↑-->」内にシェアアイコンを追加していけば、お好みの数だけウィンドウにアイコンを格納できます。
参考
