jQueryの練習 -4つのボタンによるコンテンツ表示の切り替え-

はじめに

WebのUIを作成する機会がもうすぐあるので、事前練習のために、4ボタンによる
コンテンツ表示の切り替えを作成しました。
今迄、CSSを簡単にいじった程度で、jQueryを使っていなかったので簡単に
どう書けばいいのかを試しながらのものです。最終的には、自分でTwitter Bootstrap
のようなUIライブラリを作るところまで行きたいです。

動作

動作としては、シンプルで上部に表示されているボタンを押すと対応する
コンテンツのみが表示されます。

デモ

参考

ここで生成した結果を変更して少し勉強しました。
http://grad2.ecoloniq.jp/

最終的に結果には反映されてませんが、参考にしました。
http://coliss.com/articles/build-websites/operation/css/css-tutorial-patterned-buttons-by-red-team-design.html

おわりに

今迄やってなかったツケは大きく、CSSとjQueryを使って試すだけだったのに
予想以上に時間がかかってしまいました。練習になったし、自分の作業時間の
目安が分かったことが収穫でした。今迄は、UIライブラリに頼り過ぎてたのが
個人的な印象です。次回は、jQueryのanimateを使ってみたいと思います。
最終的には、tomoyaさんがおっしゃっているように、「これからウェブ制作を学習する人は、Twitter Bootstrap を自分で作ろう。」自分でUIライブラリを作りたいです。