できればこの処理が並列で行われると良いのだが、現状はSafariやIE8でしか並列処理は実装されていないらしい。そのうち段々と実装されていくらしいけど。

とりえあず、全体的に実装されるまでは何らかの対策を講じようというわけで、その何らかの対策についてですけれど、javascriptを動的にロードすることで、並列処理を可能にする方法がある。

通常、javascriptファイルを読み込む場合は

headタグの中に↑こんな感じで記述するけれど、これ自体をjavascriptで行うことで、動的な読み込みが可能になる。

同様にcssもこの方法で読み込むことも可能っぽい。

参照サイトはこちら。実際に並列処理している様子が分かるますです。

このボタン、Firefoxだとsubmitが既定値になっているらしいのだけど、IEとかだとsubmitの属性がついていない状態が既定値になっているっぽい。

なので

みたいな感じでボタンを設置しておくと、IEでは何のアクションも起こらない。

こうやってちゃんと属性を自分でセットしてやらないと、何の役目も果たしてくれないボタンがぽつんと配置されるだけになってしまうようです。

つい最近のことですが、このことを知らなくて、普通にFirefoxでテストしたときにメールの送信ができていたから問題ないな～と思っていたらIEで何のアクションも起こらないよ的な指摘を受けまして……調べてみたらこれが原因だったと。

いやはや……。

ちょっと言葉での説明は難しいのですが

• 大元の横幅は可変
• 大元はセンター揃え
• 画像+テキストのセットが横にずらーっと並ぶ
• はじっこまで来たら、折り返す
• テキストは画像の下に表示

こんな感じです。

で、仕様するHTMLはこんな感じにしました。

dlを使ってのマークアップでも出来るかなーって思ったんですが、どうもうまく行かないので、divで囲う事にしました。単純に考えて、このdivをfloatしてあげればいいのかなーって思ったんですが、それだと大元のセンター揃えが外れてしまいました。

あくまでセンターに揃えたまま、画像とテキストのセットを横に並べたい。

どうしたもんかなーと思い、調べた結果見つけたやり方がコチラ。

こんな感じで書いてあげると、センター揃えを維持したまま、画像+テキストのセットが横にずらーっと並びます。

divをdisplay:inline;でインライン要素にして横並びにしてあげて、その中を囲うspanにdisplay:table-cell;とdisplay:inline-block;でインライン要素の中での横幅を指定してあげる事によって、テキストが画像の下に回りこむって訳です。

ギャラリーサイトなんかで使えそうな手法ですね。

大元のセンター揃えと可変っていう条件が無かったら、他にも方法はあるんですけどね。

初めてそういったレイアウトをしたのですが、まず単純に考えて

■左側の幅200px
■右側の幅100％

って感じに書けばいいと思ったのですが、これだとまったくうまくいかない。

つまり、右側の幅は「全体の幅（100％）-200px」にならないといけないんですが、こういった書き方がCSSでは出来ません。ではどうするか。

こんな面倒な書き方をしてあげるとうまくいきました。

右側のｄｉｖを入れ子にして、一回ネガティブマージンで-200pxしてあげて、さらにその中のdivでマージンを200pxとってあげると、意図したようなデザインになりました。IE6、IE7、FF、Operaでは動作確認しましたが、なんか気持ち悪い書き方だなぁ・・・。

こんな感じ。

でも、これってHTMLできれいにマークアップするの大変じゃね？テーブル使いまくりだよなぁ・・・って思ってたんですが、そんな事なかった。よくよく考えたら、CSSのpositionで指定してあげれば出来ますね。

HTMLの方はこんな感じ。

で、あとは各地域のID毎に

こうやって位置を設定してあげれば、オッケー。

これで綺麗に実装できました。

個人的に position:absolute;　で何かをするのが嫌いだったのでほとんど使った事が無かったのでぱっと出てきませんでしたが、こういう使い方ならこれからもしていきたいと思いました。

この都道府県選択の問題点

結構わかりやすいとは思うのですが、やはり微妙なポジションの県が探しにくいですね。

東海４県、東海３県の定義や、関西、近畿といった表現など、その辺がバラバラなので、ぱっとみでわかりづらい県もありますね。

で、例えば日本地図を正確に表現して、実際の都道府県の位置をクリックするとそこに飛ぶっていう形をFLASHで作ろうかなとも思ったのですが、それだと面積の小さい県、例えば東京都や神奈川県なんかが押しづらくなっちゃうんですよね。

あと、それだと東北地方を選択っていうのも実装しにくい。

そういう理由もあって、結局上記のような形にとりあえずは落ち着きました。

上記の様なボタンを、CSSで作りました。

HTMLのソースは以下。

これのaタグに色を付けて、上下左右にパディング取って、ボーダーを付けるだけのシンプルなやつ。

で、上記のボタンはfirefoxで見た時なんですが、なんの問題もありません。

ところが、IE6で見ると・・・

英語のボタンだけ縦幅が大きい・・・。

微妙にずれてる・・・。

原因は、

vertical-align:middle；が必要だったみたいです。

これを入れたらIEでも・・・

ちゃんと揃いました。

うーん、 以後気をつけよう。

送信フォームの内容確認画面に、「送信」ボタンと「戻る」ボタンを設置して、戻るを押すとhistry.back（）で前のページに戻すというページを作りました。

で、動作確認の為戻るを押したところ、ページが戻らないでフォームが送信されてしまいました。

なんで？？？

ソースを見ると、ちゃんとhistry.back（）と書いてあります。ん？でもちょっと待てよ？よーく見ると、こんなソースでした。

 おお、戻るのtypeがsusbmitになっている・・・！！

でも、ちゃんと動いたぜ？

挙動がおかしいよって旨を、担当の某プログラマに伝えたところ、

「え？俺の方ではちゃんと動いたよ？」

との事。

う、嘘だろ承太郎！？

原因はブラウザ

上記ソースを試してみたところ、FireFoxだとsubmitが優先され、opera、IE7ではhistory.back()が優先されるみたいです。

submitはフォームを送信する為にあるんだから、FireFoxの解釈の方が正しい気がするが、どうなんでしょう？

正しくは・・・

input typeはbuttonですね。

やはりzuyaごときにHTML部分を任せたのが間違いでした。

HTML部分は簡単な部分でもちゃんと俺がやらないと駄目ですね。

次回から気をつけよう。