明けましておめでとうございます。制作担当のI.Sです。
今年も宜しくお願い致します。
今回はコンテンツをクリックで表示させる動きをご紹介します。
（正式名称はわかりませんでした）
目次
1.実装例
2.解説
3.カスタマイズ
4.まとめ
1.実装例
See the Pen
B クリックして表示 by ハスキーに会いたい (@yfpgqlgd-the-builder)
on CodePen.
※右下の「Rerun」で何度も再生できます。
「画像を表示する」をクリックすると、ハスキーが表示されると思います。
再度クリックすると非表示になります。
2.解説
それではCSSでどのように制御しているのか、解説していきます。
今回はチェックボックスを使います。
クリックして表示させる記述
まず、チェックボックスと表示させる写真を「display:none;」で非表示にします。
そのあと、「input:checked + img」に「display:block;」を入れて完成です。
checkedの疑似要素を使うことによって、「display: block;」と「display: none;」の切り替えを指定します。
これで完成です。
———————————
※inputクラス（#checkのとこ）を非表示にしないと、下記のようになります。
（気にならないのならこのままでもいいですが、実際にサイトに運用するときは、ほとんど非表示にします。）
表示させる写真の数も変更できる
See the Pen
B クリックして表示 2 by ハスキーに会いたい (@yfpgqlgd-the-builder)
on CodePen.
少しコードを追加すれば、写真の表示数も簡単に変更できます。
もちろん、写真だけではなくテキストも変更可能です。
ハスキーいいですね。
3.カスタマイズ
「クリックしたら表示させる」という動きはそのままで、デザイン性を持たせてみました。
See the Pen
B クリックして表示 3 by ハスキーに会いたい (@yfpgqlgd-the-builder)
on CodePen.
基本的に外観に関するところしか触れていません。
ある意味カスタマイズ性が高いと言えるかもしれませんね。
正直、デザイン面のコードの内容が大半を占めています。
4.まとめ
少し工夫すれば、ゆっくりと表示させることもできます。
解説でも言いましたが、動き自体は簡単にできます。あとはデザイン次第です。
ではまた.
