画面デザインの改善

はじめに

おはようございます。当ブログにアクセス頂き、ありがとうございます。
ダイエットを続けて半年、やっと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分)