画像を表示して、その下にテキストを入れた物を１セットとして考え、それをずらーっと表示させる方法ってのを考えました。
ちょっと言葉での説明は難しいのですが
こんな感じです。
で、仕様する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で見ると・・・
送信フォームの内容確認画面に、「送信」ボタンと「戻る」ボタンを設置して、戻るを押すとhistry.back（）で前のページに戻すというページを作りました。
で、動作確認の為戻るを押したところ、ページが戻らないでフォームが送信されてしまいました。
なんで？？？
ソースを見ると、ちゃんとhistry.back（）と書いてあります。ん？でもちょっと待てよ？よーく見ると、こんなソースでした。
おお、戻るのtypeがsusbmitになっている・・・！！
