こんばんわ
週末、うまい棒大量購入してこようかしら・・・
コータローです。

さてさて今回はフォームに纏わるCSSです。

皆様、フォームのコーディングって得意ですか？
僕は若干苦手です。特にテキスト部分とフォーム部分が微妙にズレたりしますよね。ムッキー！！！

僕も最近まできっちり合わせることができなくて仕様です。って言ってたりしたのですが
解決できたので、ご紹介

特にずれが気になるのがラジオボタンですよね。
普通に書くとこんな感じ

inputに

vertical-align: middle;

を当ててあげるとこんな感じ

何も無しよりはマシだけどちょっとズレてますよね。
そして今回の解決策
意外と知られておりませんが実はこのvertical-alignのプロパティ
middleとかbottomだけでなく、数値での指定が可能なんです。
ざっとリファレンス載せてるサイト見ましたが、載っていないところが多い
僕が持ってるタグ辞典にも記載がありませんでした。

あとは文字サイズに合わせてemで指定してあげればぴったり並べることが出来ます。
今度は-0.2em当てた画像

ブラウザ間で若干見え方が異なるので厳密に全部のブラウザでぴったり合わせるには
ハックを駆使しなければならないが、初めのズレズレよりはマシですよね。

こんばんわ
devjamのコータローです。

今回はマークアップに役立つサイトをご紹介！

fontSizeの計算って入れ子になっていたりすると
かなり面倒ですよね？
僕がアホなだけ？

そんな時は『Em Calculator』が便利です。
bodyのfontSizeをpxで指定してあげれば
eｍに変換してくれます。
入れ子になっている場合もAdd childボタンで
追加できます。

emでのsize指定はバグがあるので
100倍して%指定してあげるとさらによいかと・・・
emのsize指定のバグの話はまた今度・・・

たまにしか使わない、HTMLタグって使い方忘れてしまったりしませんか？
僕がアホなだけ？

そんな時は『XHTML タグ一覧表示ツール』が便利です。
このタグって

の中で使えたっけ？とかいうときに
ここでサクっと調べられます。

CSSのclass名やid名って結構悩みませんか？
僕がアホなだけ？

そんな時は『CSS HappyLife』の
『もう、class名やid名で悩まないんだからっ！！』というエントリーが便利です。

そのタイトル通り、いろいろなclass名やid名が
纏められています。
使う場所ごとに分類されていますのでとっても便利です。

DD_belatedPNGとiframeの同時使用はIE6でiframeの中が真っ白になる。
PNGFix使う時は、iframeを使わないこと。

text-indet: -9999px で背景を表示させようとしたところIEでtext-indetが効かなかった。

発生条件　text-indet が指定されている親要素に text-align: right が指定されていると発生。

対処法　text-indetと text-align: center;を指定する。

1．IE8 をインストール

2．Internet Explorer 7 running side by side with IE6. (standalone) | TredoSoft の IE7 Standalone をインストール

3．Install multiple versions of IE on your PC | TredoSoft の Multiple IE をインストール