ブロックレベル要素の高さを揃えるjsライブラリー
2008.5.20
商品一覧ページなどをコーディングするときに、
のように表示されてほしいのに

のようになってしまったことはありませんか?
この場合の解決策は、一番高い要素の高さにワクの幅をそろえることで解決できるのですが、高さが一定じゃないときってありますよね?
そんなときに使えるjsライブラリーをご紹介。
- Permalink
- by 谷 春樹
- at 11:47
- in CSS
- Comments (0)
- Trackbacks (0)
縦方向のセンタリング
2008.4. 7
縦方向のセンタリングで思いつくのがテーブルを利用してセルにvalign="middle"を当てること。でも、縦にセンタリングするためだけにテーブルつかうのもスマートじゃないし。。。ってときに使えるテクニック。
有名なテクニックで1行の場合のみできるCSSテクニックがあります。
記述方法は下記のようになります。
- Permalink
- by 谷 春樹
- at 19:36
- in CSS
- Comments (0)
- Trackbacks (0)
hrで1pxの線を引く
2008.2. 9
1pxの線を引く方法はいろいろありますが、今回はCSSでスタイル指定したhrを利用してみます。
毎回テンプレートとしてCSSにいれておくと便利かも?
- Permalink
- by 谷 春樹
- at 16:04
- in CSS
- Comments (0)
- Trackbacks (0)
モダンブラウザ用CSSハック一覧
2008.2. 4
個人的にハックは好きじゃないので、1つも使わないコーディングを心掛けていますが、使用したほうがすっきりとしたコーディングになる場合もあるので、リファレンス代わりにメモ。
- Permalink
- by 谷 春樹
- at 21:40
- in CSS
- Comments (0)
- Trackbacks (0)
IEでimgにpaddingが反映されない
2007.12. 5
imgにスタイルシートで
img {
border:1px solid #ccc;
padding:2px;
}
などのスタイルを当てたときにFirefoxやSafariでは正常に反映されるのに、IEでは反映されないときがあります。
問題はIEの互換モードにあるのでその記述をはずせばOK。
- Permalink
- by 谷 春樹
- at 12:58
- in CSS
- Comments (0)
- Trackbacks (0)
CSSでロールオーバーを実現
2007.9. 3
画像のロールオーバーの際には、明るくしたロールオーバー後の画像を用意し、Javascriptで制御したり、CSSで座標をずらしてロールオーバーを実現したりしますが、元画像とCSSだけでも簡単なロールオーバーを実現することができます。
- Permalink
- by 谷 春樹
- at 21:07
- in CSS
- Comments (0)
- Trackbacks (0)
IE で div の高さを 1px にする方法
2007.8. 4
普通にdivに対し「height:1px」を設定しても上手く反映されません。
上手く反映させるためのテクニックです。
- Permalink
- by 谷 春樹
- at 18:16
- in CSS
- Comments (0)
- Trackbacks (0)
height:100%を適用する方法
2007.8. 4
CSSにてheightを%で指定すると反映されないと思われた人がいるかと思います。しかし、その場合再現方法は間違っておらず、指定の認識に誤りがあることが多々あります。割合が何に対して適応されるかを知る事はデザインを意識する以外にも大きな意味を持ちます。
- Permalink
- by 谷 春樹
- at 18:05
- in CSS
- Comments (0)
- Trackbacks (0)

