今夜はロールバック!

毎週火曜に1冊、オススメ小説を紹介していきます。

TOP

CodePenで良デザインなパーツを探す方法

f:id:momogaaaa:20170609234921j:plain

クールなデザインのボタンやテキストボックスというのは見ているだけでもテンションが上がってくる。

今回は良いデザインをCodePenで探す方法を備忘録として残すことにする。

 

 CodePenとは

codepen.io

 

CodePenでできることは、

  1. 自分で作ったHTML/CSS/JSのコードを作成・公開することができる。
  2. コードをその場で動かすことができる。
  3. 人が作ったコードを見ることができる。

というサービスだ。

もちろん人が書いたものも見て、動かすことができる。

 

CodePenでかっこいいデザインを探してみる 

f:id:momogaaaa:20170609234941p:plain

まずは、トップページへいって Collections をクリック。

 

f:id:momogaaaa:20170609234947p:plain

そうすると、誰かがストックしてある量デザイン集が一覧ででてくる。

今回はこのマウスオーバーとクリックエフェクト集を見ていくことにしよう。

 

f:id:momogaaaa:20170609234952p:plain

かっこいいデザインがズラッとでてきた。適当なものをクリック。

 

f:id:momogaaaa:20170609234958p:plain

クリックするとコードと、そのコードを実行した結果がでてくる。

もちろん動作(クリックしたときのエフェクトとか)も下部分の実行結果で動いているものが表示される。

 

codepen.io

先程選択したデザインはこちら。

RunPenをクリックすると動かすことができる。

 

検索して探してみる

f:id:momogaaaa:20170609235006p:plain

先程の探し方は、誰かがストックしたコレクションから辿って行くというやり方だったが、それに対してこちらの検索方法は、自分でキーワードを指定して検索するいう方法だ。

まずは、画面右上の虫眼鏡アイコンをクリック。

 

f:id:momogaaaa:20170609235011p:plain

検索したい文字を入力。

ボタン系のCSSを探したいときは「Button」と。チェックボックス系のCSSを探している時は「check box」という具合に検索していく。

日本語での検索もOKだが、英語表記で検索した方がヒット数が多い。

 

f:id:momogaaaa:20170609235015p:plainButtonという文字で検索したので、ボタン系のデザインが続々ヒット。どれもよいデザインだ。

 

codepen.io

 

ボタン系のデザインのサンプルだ。とても良いデザインで気に入っている。

 

さいごに

クールなデザインというのを自分で一から作るのは大変だ。そんな時はCodePenを使えば参考となるものが必ず見つかる。

簡単なUIのモックを作る時にもお世話になっているサイトだ。世の中には素晴らしいものを作る人がいて、自身の業務の助けにもなっている。素晴らしいデザインを作って公開している人に感謝。

それでは今日はこのへんで。