CSS コンポーネント化計画第一弾!! Button コンポーネント
CSS コンポーネント化計画第一弾!!(第一弾で終わるかもw) っということでボタンをコンポーネント化したいと思います. 作る前にコンポーネントについて少しだけ.
コンポーネント化に至るまで
みなさん, 毎回 Web ページを作るたびに HTML と CSS の同じようなコードを毎回書いていませんか? 私は書いていました. 同じコードを書くということはゲームプログラマにあるまじき行為です. いつも, もどかしさを感じながらコーディングをしていました.
速度を考えるとそのページに最適化されて最小限のコードであるにこしたことはありません. しかし, このハイスペック化の進んだこのご時世, 本当に速度を重視した作りである必要があるのでしょうか?
少なくとも私には必要ありません. CPU は i7, 16GB のメモリと SSD を搭載した私の PC ではちょっと重い程度のサイト ではビクともしません.(軽く自慢.スイマセン) まぁ通信速度の問題はありますがそのへんも最近は高速化が進んでいるので…
そこで, これからはスピードよりもユーザビリティの時代が来るのでは?. っと思い CSS のコンポーネント化をしていくことにしました. コンポーネント化とは構成要素という意味で, それ自体が独立していてそれらを組み合わせることで色々なモノを作ることができるもののことを指します.
簡単にいうとプログラミングでいうライブラリ化のようなものです. コンポーネントを使い回して楽して楽しい Web サイト創りをしましょう!!
今回は第一弾ということで頻繁に使用するボタンコンポーネントを作ります.
CSS3 をバリバリ使用しているので一部のブラウザ(IE)では正常に動作しない可能性があります. Chrome, firefox は確認済みです.