デザインパターンを集めたサイト「Design Patterns on CodePen」

htmlとCSSとjavascriptで作れるUIのデザインパーツが集まった、便利なサイトを発見しました。


「ボタン」「メールフォーム」「ページング」「タブ」などのUIパーツごとにカテゴライズされています。



「ボタン」を選択。

クリックすると、ボタン一覧がサムネイル表示されます。

少し気になったのが、1画面内に一覧が収まるように作られていること。
こういうサイトは「スクロール」すると読み込まれる形式が多いようにかんじたのですが、
このサイトは「遷移」させて次を見せる形となっています。
また状況が変わってきたのでしょうか。
他の海外サイトも見てみます。



気になるボタンを選択。
下部に実際のボタン、上部にHTML、CSS、javascriptが表示されています。



こんな感じに。


CodePenはいろんな人が気軽にコードを共有できるサイトです。
世の中ギブアンドテイク。もらうなら人にもあげなきゃけませんね。