フォームのテキストエリアなどにデフォルトを表示してフォーカスを当てると消えるやつ

フォームにデフォルト値を入れておいて、実際にフォーカスをあてて入力を行う際には、そのデフォルトが消えるというやつです。
jQueryのプラグインであるjQuery Watermark Pluginを使うと実現できます。

利用方法は、
http://www.skuare.net/2009/04/javascriptjquery_watermark_plu.html
を見ればよいです。

ポイントは、デフォルト文字の表示のされ方を指定するためにupdnWatermarkというクラスのcssを準備しておく必要があります。

jQuery Watermark Pluginからダウンロードするとサンプルがあるので、それをそのまま利用するのが簡単だと思います。

ただこのサンプルでは、CSSフレームワークであるBlueprintを利用していると気持ちのよい位置に文字が表示されませんでした。
なので私は、以下のような感じのcssを用意して使ってみました。

.updnWatermark label
{
 position: absolute;
 padding: 1em;
 padding-left: 0.5em;
 white-space: nowrap;
 color: #999;
}

Blueprint CSS

Google app engine patchには、Blueprint CSSなるものが入っています。

これは、CSSフレームワークなるものらしいです。
CSSフレームワークとは、なんじゃらほい？という感じだったのですが、
フレームワークで準備したcssのクラスとかをいい感じでつかうと
いい感じのサイトが簡単にできちゃいますというものようです。

Blueprintの場合ですが、グリッドレイアウトというものが簡単に出来るようになるようです。
グリッドレイアウトとは、画面上の各要素をグリッドにきちんとあわせることできれいなサイトができあがるというもののようです。
そして、そのグリッドにきちんとあわせるというのが、私のような素人には結構たいへんな気配がするのです。
Blueprintでは、グリッドレイアウト意外にもブラウザのデフォルトの見た目をリセットしてBlueprintのいい感じの見た目を設定してくれているようでもあります。
それをできるようになるということなので、私も使ってみることにします。

Blueprintに関しては、
http://www.ideaxidea.com/archives/2009/01/blueprint_css.html
で情報がまとまっていて参考になります。

Blueprintは、グリッドが24個（デフォルトで変えられるようです）に分かれており、それぞれの要素で何個のグリッドを使うかを指定していく感じです。

具体的な利用法は、以下のような感じです。

CSS指定方法

<link rel="stylesheet" href="/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

実際にBlueprintを適用する範囲は、classでcontainerで指定したdiv範囲となります。
一緒に指定してあるshowgridを指定すると背景にうっすらグリッドを表示してくれてテスト時のデザインの参考になります。

<div class="container showgrid">
</div>

24個のグリッドをいくつかにdiv要素で分割して指定するには、span-*というクラスを指定します。
そして、一行に配置するグリッドは、合計24になるようにします。
そして、一行の終わりとなる要素にはlastというクラスを指定します。

<div class="container showgrid">
 <div class="span-24 last">
   <p>一行目は、24個のグリッドを一つの要素で使い切ります。</p>
 </div>
 <div class="span-8">
   <p>2行目は3つの要素を配置します。</p>
 </div>
 <div class="span-8">
   <p>2つ目の要素です。</p>
 </div>
 <div class="span-8 last">
   <p>３つ目の要素です。行の最後なのでlastクラスを指定しています。</p>
 </div>
</div>

div要素は、入れ子にできます。入れ子で指定するときは、利用グリッドの合計を親要素で利用しているグリッドの合計にする必要があります。

<div class="container showgrid">
 <div class="span-12">
   <p>この中を入れ子で指定します。</p>
   <div class="span-5 colborder">
    <p>ここで親グリッド12のうち5個利用します。colborderを指定したことで、5個のグリッドの後にグリッド一つ分の空白をあけることになります。なので合計6個分のグリッドをココで指定しています。</p>
   </div>
   <div class="span-6 last">
    <p>入れ子でも、入れ子内で行の最後になった場合はlastクラスを指定します。</p>
   </div>
 </div>
 <div class="span-12 last">
   <p>行の最後なのでlastを指定しています。</p>
 </div>
</div>

グリッド配置するときには、必ずしも1個目のグリッドから利用するわけでなく、途中のグリッドから利用したいこともあります。
そのときは、prepend-*とappend-*を利用します。prependを指定すると指定グリッド前に指定した数だけグリッドをあけてから要素を配置することになります。appendは要素の後に指定グリッド分あけることになります。

<div class="container showgrid">
 <div class="span-8 prepend-4 append-5">
   <p>グリッド4つ分あけてからグリッド8個分確保します。そしてその後に5個分のグリッドをあけます。つまり17個分ここで指定したことになります。</p>
 </div>
 <div class="span-7 last">
   <p>隣の要素との間に5グリッド分の間が開いています。</p>
 </div>
</div>

ここまで書いた要素をすべて一つのcontainerの中に入れたとしたら、以下のようなイメージになります。
あくまでもこんな感じになるというだけで、実際に以下はBlueprintを利用したものではないです。

一行目は、24個のグリッドを一つの要素で使い切ります。

2行目は3つの要素を配置します。

2つ目の要素です。

３つ目の要素です。行の最後なのでlastクラスを指定しています。

この中を入れ子で指定します。 ここで親グリッド12のうち5個利用します。colborderを指定したことで、5個のグリッドの後にグリッド一つ分の空白をあけることになります。なので合計6個分のグリッドをココで指定しています。 　 入れ子でも、入れ子内で行の最後になった場合はlastクラスを指定します。

行の最後なのでlastを指定しています。

グリッド4つ分あけてからグリッド8個分確保します。そしてその後に5個分のグリッドをあけます。つまり17個分ここで指定したことになります。

隣の要素との間に5グリッド分の間が開いています。

他にも、見た目系をいじるクラスとかもあるようなのですが、そこまではまだ理解ができていません。

SOBARCOを作る時に参考にしたサイト

参考にしたサイトをメモ

Google App Engineのドキュメント
http://code.google.com/appengine/docs/
http://groups.google.co.jp/group/google-app-engine-japan

Pythonのドキュメント
http://www.python.jp/doc/release/index.html

iアプリのドキュメント
http://www.ep.u-tokai.ac.jp/~nakazato/API/504i/base/jguide504_apiref020517/javadoc/overview-summary.html

jQueryのドキュメント
http://www.openspc2.org/JavaScript/Ajax/jQuery_study/ver1.2.6/index.html

エンジニアのためのWebデザイン教室
http://itpro.nikkeibp.co.jp/article/COLUMN/20080214/293856/

WebプログラマのためのHTMLデザイン(その2)
http://fromnorth.blogspot.com/2008/08/webhtml2.html

HTMLタグ・CSS・JavaScript - Web制作のインデックスサイト
http://www.tagindex.com/index.html

Dynamic Drive CSS Library
http://www.dynamicdrive.com/style/

アイコン集
http://speckyboy.com/2008/07/28/96-best-ever-free-icon-sets-for-web-designers-developers-and-bloggers/

モバイルサイトをPCで見るためのツールやFirefoxアドオン
http://blog.livedoor.jp/ld_directors/archives/51079649.html

Firefoxでモバイル端末をシミュレートするアドオン「FireMobileSimulator」
http://ke-tai.org/blog/2008/09/04/firemobilesimlator/

cssでドロップダウンメニュー

とりあえず、

http://www.dynamicdrive.com/style/csslibrary/item/inverted-shift-down-menu/
http://blog.faro.main.jp/?eid=369489
にお世話になりドロップダウンメニューを作ってみました。

こんな感じ

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--ここからCSS-->
<style type="text/css">
body {
 margin: 0; /*ブラウザデフォルトの空白を除去*/
}

.menu {
 position: absolute; 
 top: 100px;
 width: 100%;
 padding: 0;
 border-top: 5px solid #D00;
 font: bold 12px Arial;
}

.menu_list {
 margin:0;
 margin-left: 40px; /*メニューの横の隙間*/
}

.menu dl {
 margin:0;
 padding: 0;
 float: left;
}

.menu dt {
 margin: 0 2px 0 0; /*メニュー間の隙間*/
}

.menu dd {
 display: none;
 margin: 0;
 padding: 5px 10px 5px 10px;
 border-left: 1px solid #000;
 border-right: 1px solid #000;
 border-bottom: 1px solid #000;
 background-color: #DDD;
}

.menu dl:hover dt {
 background-color: #DAA;
 padding-top: 9px;
 padding-bottom: 5px;
 color: #FFF;
}

.menu dl:hover dd {
 display: block;
}

.menu a {
 display: block;
 color: #000;
 text-decoration: none;
}

.menu a:hover {
 color: #FFF;
}

.menu dd a:hover {
 color: #D00;
}

.menu .current {
 background-color: #D00;
 padding: 9px 10px 5px 10px;
 color: #FFF;
}

.menu dl:hover dt.current {
 background-color: #D00;
}

.menu .menu_item {
 padding: 5px 10px 9px 10px;
}
</style>
<!--ここまでCSS-->
</head>

<body>
<div class="menu">
 <div class="menu_list">
 <dl><dt class="current">Menu1</dt></dl>
 <dl><dt class="menu_item"><a href="">Menu2</a></dt></dl>
 <dl><dt class="menu_item"><a href="">Menu3</a></dt></dl>
 <dl><dt class="menu_item">Menu4</dt>
  <dd><a href="">Menu4-1</a></dd>
  <dd><a href="">Menu4-2</a></dd>
  <dd><a href="">Menu4-3</a></dd>
 </dl>
 <dl><dt class="menu_item"><a href="">Menu5</a></dt></dl>
 </div>
</div>
</body>
</html>

FireFox3とIE7では動くみたいですが、IE6はひょっとしたら
http://blog.faro.main.jp/?eid=369489
に書いてあるjavaスクリプトも入れないといけないのかもしれないです。

そして関係ないですが、
色指定で
#D00
と書いたら
#DD0000
の意味になるらしいですね。