2013年1月4日 : してログ

Boeing 747 flight!

GoogleMaps 201314

Google Maps V3 で少し遊んでみました。ボーイング747が Google マップ上を飛行するだけのものです。九州あたりを離陸した飛行機は新潟空港へ向かいます。目的地のマーカーはドラッグでき、移動させればどこへでも飛んで行くことができます。

Boeing 747 flight! (Google Maps)

久しぶりに算数をしたので、あんまりスマートな書き方にはできませんでした。加速度を入れていないので、旋回しても速度は落ちず常に一定の速度で飛行します。あと、日付変更線の付近をまたぐと、遠い反対側へ向かおうとしてしまいます。

このB747のイメージは、HDD の整理をしていて見つけたもので、今回は15°毎に回転イメージを作ってみました。もう少し細かくしても良かったかも知れません。

メインコンテンツが少ないときに、不恰好になってしまうサイトデザインになってしまうこと、ありませんか? このサイトもそうでした。メインコンテンツが長く詰まっているページだとイメージどおりでも、数行程度の短いコンテンツでは、広告ばかりが目立ち、コンテンツの終わりの枠が、赤ちゃんの“よだれかけ”のように捲れ上がってしまいます。

そんなときに便利なのが、min-height です。これを div などに指定すると内容が少なくてもそれ以下のサイズにはなりません。これを使えば、フッタにゴテゴテ入れた広告が必要以上にせり上がることも無くなり、非常に見た目がよろしくなります。マージン取るのに <br /> たくさん入れるのは止しましょう。

<div class="contents_outer" style="min-height:100em;">
  <div class="contents" style="min-height:40em;">
    ... メインコンテンツ ...
  </div>
  <div class="ad"> ... 広告のコード ...</div>
</div>

この例は、広告がトップから 40em 以下に上らないようにし、コンテンツの枠自体も 100em を切らないように制限した、当サイトの CSS の指定です。

YUI reset した後の CSS でいつもネックだったフォーム要素のデザインについて少し調べてみました。ここで言うデザインとは、グラフィックを使ったリッチなやつではなく、標準の要素の文字サイズのばらつきや、ボタンの高さについてです。文字サイズについては CSS で単に font-size 指定すれば揃えられます。

ボタンの高さ指定はなぜか無視されます。結論から言うと、ボタンが inline 要素として定義されているためのようです(インライン要素は高さ指定が無視されます)。これは、下記のように display: inline-block として定義しなおして解決できました。

input[type="button"],
input[type="submit"],
input[type="clear"],
input[type="file"] {
	display:		inline-block;
	height:			2.5em;
	padding:		0.2em;
}

ただし、file タイプだけは残念な表示(ブラウザによっても異なる)になってしまいました。また、Firefox のみ半角英数字だけのボタンと、全角文字入りのボタンで1ドット違っています。これは半角英数字を日本語フォントで表示させてみても解決できず、課題として残ってしまいました。しかし、遠目で見れば、その違いは分からず違和感がある程度です。今のところ、ボタンの中に全角文字を入れる、くらいしか解決方法は無いようです。