My Color　「ダンクハーツ-谷春樹Blog-」

メニューや見出しなど、text-indent:-9999pxでテキストを外に飛ばす方法をよく利用しますが、時々効かないときがでてきます。

そんなときの解決策です。

商品一覧ページなどをコーディングするときに、


のように表示されてほしいのに




のようになってしまったことはありませんか？
この場合の解決策は、一番高い要素の高さにワクの幅をそろえることで解決できるのですが、高さが一定じゃないときってありますよね？
そんなときに使えるjsライブラリーをご紹介。

縦方向のセンタリングで思いつくのがテーブルを利用してセルにvalign="middle"を当てること。
でも、縦にセンタリングするためだけにテーブルつかうのもスマートじゃないし。。。ってときに使えるテクニック。

有名なテクニックで１行の場合のみできるCSSテクニックがあります。
記述方法は下記のようになります。

1pxの線を引く方法はいろいろありますが、今回はCSSでスタイル指定したhrを利用してみます。
毎回テンプレートとしてCSSにいれておくと便利かも？

個人的にハックは好きじゃないので、１つも使わないコーディングを心掛けていますが、使用したほうがすっきりとしたコーディングになる場合もあるので、リファレンス代わりにメモ。

imgにスタイルシートで

img {
border:1px solid #ccc;
padding:2px;
}

などのスタイルを当てたときにFirefoxやSafariでは正常に反映されるのに、IEでは反映されないときがあります。
問題はIEの互換モードにあるのでその記述をはずせばOK。

画像のロールオーバーの際には、明るくしたロールオーバー後の画像を用意し、Javascriptで制御したり、CSSで座標をずらしてロールオーバーを実現したりしますが、元画像とCSSだけでも簡単なロールオーバーを実現することができます。

普通にdivに対し「height:1px」を設定しても上手く反映されません。
上手く反映させるためのテクニックです。

CSSにてheightを%で指定すると反映されないと思われた人がいるかと思います。しかし、その場合再現方法は間違っておらず、指定の認識に誤りがあることが多々あります。割合が何に対して適応されるかを知る事はデザインを意識する以外にも大きな意味を持ちます。