2012年8月18日土曜日

画面デザインの改善

はじめに

おはようございます。当ブログにアクセス頂き、ありがとうございます。
ダイエットを続けて半年、やっと2キロの減量に成功したものの、気がつけば1キロリバウンドしてしまい、意気消沈のたなけんです。
本エントリではTwitter Bootstrapを利用した、Webページのデザイン改善について記載します。

Twitter Bootstrapとは

Twitter社が提供しているCSSフレームワークです。
デザインが苦手なプログラマでも、見栄えの良いWebサイトが作れるとの評判なので、今回作成中のWebアプリケーションに組み込んでみました。

ナビゲーションの追加

今回の要件では、画面そのものがシンプル極まりないため、デザインを取り入れる要素があまりありません。そこで、機能毎に画面遷移するためのナビゲーションを追加することにしました。
実装方法として、ナビゲーションとiframeからなるindex.htmlを作成し、ナビゲーションのクリックイベントをにより、iframe内のベージがそれぞれの機能のページ(例dictionary.html、spelling.html)に切り替わるようにしました。

実装結果


未だ地味な感じは否めませんが、無味乾燥だった画面が、少しまとまった気がします。

ソースコード



  • 6行目: ダウンロードしたBootstrapのCSSを利用
  • 9-10行目: ナビゲーションへのクリックイベントに対応した動作(jQuery使用)
  • 14-30行目: ナビゲーションの描画
  • 32行目: iframeに各機能のページを割り当て(初期値はdictionary.html)


今回の作業は以上。最後までお読み頂き、ありがとうございました。
たなけん(作業時間45分)

0 件のコメント:

コメントを投稿