ところでみなさん、最近よいデザインには出会えましたか？
どうも、ももがです。・ω・
クールなデザインのボタンやテキストボックスって見ているだけでもなんだかテンション上がってきますよね。
ちなみに、僕はエンジニアなのですが、簡単なサンプル画面を作って欲しいと依頼があったらCSSはちょっとだけ手を加えて見た目をよくしようと少しだけ努力するようにしています。だって見た目って大切ですからね。
今回はクールでかっこいいデザインがつまったCodePenでかっこいいCSS/JSのコードを探す方法を紹介していきます！
CodePenって何？？
ではまず最初ですが、CodePenを知らないっていう人のためにCodePenについて紹介していきますね。
百聞は一見にしかず。まずはこちらのサイトを見て下さい！
CodePenでできることは、
- 自分で作ったHTML/CSS/JSのコードを作成・公開することができる。
- コードをその場で動かすことができる。
- 人が作ったコードを見ることができる。
といったことがメインでできることです。
すっかりメジャーになったこのWebサービス、GitHubのGistよりも市民権は得ていると思います。
CodePenでかっこいいデザインを探してみよう！
今回はデザインを探すといことをやっていきますので、会員登録してコードを登録する。といった手順の解説はしていません。
これより以降はデザインの探し方について書いていきます。
ではまず、トップページへいって Collections をクリックして下さい。
そうすると、誰かがストックしてある量デザイン集が一覧ででてきます。
今回はこのマウスオーバーとクリックエフェクト集を見ていきましょう！
かっこいいデザインがズラッとでてきましたね！(・∀・)
気になるデザインをクリックしていきましょう。
クリックするとこのようにコードとコードの実行結果がでてきます。
このデザインかっこいいですね。気に入りました！(・∀・)
画面の上部分がコードで、下部分がそのコードをブラウザ上で実行した結果ですね。
もちろん動作（クリックしたときのエフェクトとか）も下部分の実行結果でみることができます。
先程選択したデザインはこちらです。
RunPenをクリックすると動かすことができますよ。
検索して探してみよう！
先程の探し方は、誰かがストックしたコレクションから辿って行くというやり方でしたが、それに対してこちらの検索方法は、自分でキーワードを指定して検索するいう方法です。
まずは、画面右上の虫眼鏡アイコンをクリックしましょう。
検索したい文字を入力します。
ボタン系のCSSを探したいときは「Button」と。チェックボックス系のCSSを探している時は「check box」という具合に検索していきます。
日本語での検索もOKですが、英語表記で検索した方がヒット数が多いですよ。
Buttonという文字で検索したので、ボタン系のデザインが続々ヒットしました。
これなんてかっこいいんじゃないですか？
今度使ってみようっと。
さいごに
クールなデザインって自分で一から作るのって大変ですよね。そんな時はCodePenを使えば絶対にお気に入りのデザインに出会えるはずですよ！
人は見た目が９割という本が昔ありましたが、Webツールも見た目の印象が大切です。デモ段階でもちょっとした気遣いで採用される率があがるのかもしれないというのが僕の信条なのでCodePenにはいつもお世話になっています。
ここまで読んで頂いてありがとうございました。
それでは！