はじめに
こんにちは！@70days_jsです。
普段qiitaの記事を見ていて気になっていたcodepen。ついに今日使い方を知りました。
結論を言うと、めっちゃ簡単でした。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は32日目。(2019/11/19)
よろしくお願いします。
サイトURL
やったこと
今日はcodepenの使い方を学びました。
といってもとても使いやすくてすぐに終わってしまったので、オマケ的に、クリックしたらcodepenが見えるみたいなサイトにしました。↓
クリックしたあとにcodepenが2つ並んでいますよね。
1つ目はソースコードがすでにでています。
2つ目はrun penを押したらソースコードが見えるようになっています。
この設定は簡単で、codepenのこのページで↓
このようにチェックを入れるだけで簡単に設定を変更できます。
ちなみにcodepenを使うときはgithubアカウントやfacebookアカウントで簡単に使えます。
僕はこのサイトを管理しているgithubのアカウントを使いました。
ちなみにちなみに、codepenと関係ないですが、gifに載せたクリックして画面が変わるやつはjsを使わずに全てcssで実装しています。
<body><inputtype="checkbox"id="click"><labelclass="start-click"for="click">クリック here...
</label><divclass="contents-body-wrapper">
//codepenのソースコード
</div></body>htmlはこんな感じです。
cssは隣接（間接？）セレクタを多用して実装しました。肝はここです。↓
.contents-body-wrapper{display:none;}#click:checked+.start-click+.contents-body-wrapper{display:block;background-color:black;width:100vw;height:100vh;}#click:checked+.start-click{display:none;}#click{display:none;}htmlでクリックの検知をcheckboxで行なっているので、checkされたらクリックボタンのdisplayを見えなくして、隠してあったcontents-body-wrapperクラスのdisplayを表示します。
感想
cssだけで色々やってみようという縛りを設けてみたら、javascriptの偉大さが少し分かってきた気がしました。
同時にhtmlの書き方も大事だなぁと思えたり、なんというかhtmlとcssとjavascriptは3つとも絡み合ってできているんだなと実感しました。
最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。
##参考
1. codepenでウェブ開発入門 (https://qiita.com/InoueDaiki/items/1ee988d8e1f43bc205de9)
大変参考にさせていただきました。ありがとうございます！