テキストBOXと送信ボタンを１行で

type="text"のテキストフィールドと、送信ボタンを１行に表示する際、size指定する時が多いです。


が、端末によりsizeの幅が異なったり、なるべく目一杯横に広げたい場合は上手くいきません。



そんな時はちょっと一手間かけて"table"組みましょう。

ただし注意事項として…


『hiddenタグはsubmit側にしましょう』


テキストフィールド側にすると改行される端末があります。。

"select"が２行になる

■現象
au端末で"select"のプルダウンが２行で表示される。



■解決
"select"タグ内で"font-size"を指定する。
この際、"select"タグにかかっているサイズ以下にすること。



■原因
"select"タグより上で指定した"font-size"は、ボックスのみを小さくしてしまうため。

隙間を作らない"div"の使い方

例えばライン画像で上と下の背景色を変える場合の話…


通常は画像の直下で"div"を閉じ、すかさず"div"で背景色を指定します。


が、これをauの比較的最近の端末で見ると…
画像と背景色の間に1px程の隙間が出来るではありませんか！？

これは上記端末の場合、ブロック要素間に隙間を作る仕様なので、Web標準的にイマイチですが"div"を入れ子にするしかありません。


色を切り替えたい画像やブロック要素の手前で、"div"で背景色を上塗りするイメージです。


じゃあ"div"を閉じるのは？

"body"閉じ前にまとめて閉じる！


やらずともわかりますが面倒です。


一部とは言え、デザイン崩してまでSEOにこだわる必要はないので、ここでの"div"は閉じずにいましょう。