2012年8月18日土曜日

画面デザインの改善

はじめに

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

Twitter Bootstrapとは

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

ナビゲーションの追加

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

実装結果


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

ソースコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="./js/bootstrap.js"></script>
<link rel="stylesheet" href="./css/bootstrap.css" type="text/css">
<script>
$(function(){$("#dictionary").click(function(){$("#main").attr("src", "./dictionary.html");});});
$(function(){$("#spelling").click(function(){$("#main").attr("src", "./spelling.html");});});
</script>
</head>
<body>
<nav>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">my-dictionary-client</a>
<div class="container">
<ul class="nav">
<li class="active">
<a id="dictionary" href="#">Dictionary</a>
</li>
<li>
<a id="spelling" href="#">Spelling</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="content">
<iframe id="main" src="./dictionary.html" scrolling="no" frameborder="0" width="100%" height="960px"/>
</div>
</body>
</html>
view raw index.html hosted with ❤ by GitHub


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


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

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)