とりあえずCSS tipsということで。
前にも書いたような気もしなくもないけど、リストのお話。
普通、リストをfloatで横並びにしたとき、その中の文章量によって高さが変わります。
リストに背景色を付けたい場合とか、デザインによってはどうしても高さを揃えたいケースがあります。
当然、高さを固定値で指定すればOKだけど、可変したい場合のほうが多いと思うので。
ってことで、そんな場合の解消法を書いてみます。
【CSS】floatしたリスト（li）の高さを揃える
返信
カテゴリーアーカイブ: CSS
【CSS】BlueTripがなにやらすごいらしい
【まとめ読み】おさえておきたいCSSまとめサイト
というわけで、CSSのテクニックが紹介されているサイト達です。
特に目新しいものはないですが、意外と抜け落ちてたりするのではないでしょうか。
やっぱりコードは短くてわかりやすいものがいいです。笑
5. 擬似クラスと擬似要素
http://msugai.fc2web.com/web/CSS/pseudo.html
CSS擬似クラスを使うべき理由
http://journal.mycom.co.jp/news/2008/02/06/010/index.html
first-child疑似クラスと隣接セレクタ
http://www.lucky-bag.com/archives/2005/01/firstchild.html
俗に言う clearfix と言われるコードのバリエーション色々
http://www.lucky-bag.com/archives/2007/05/variation-of-clearfix.html
cssのテクニックなどを学びたい時に見ておきたい12サイト
http://kachibito.net/web-design/12-study-css-technique.html
CSS HappyLife
http://css-happylife.com/
CSS Lecture
http://www.css-lecture.com/
ゆっくりまとめ読みします・・・苦笑
【CSS】画像置換したときのリンクの点線を消す方法
グローバルメニューなどでよく見かける画像置換。
text-indent:-9999px; のようにマイナス指定して、そこの背景に画像を持ってくるという手法。
しかし、この方法ではもしそこにリンクを張っていたときに、点線が左端からその場所まで続くという非常にカッコ悪い状態になってしまう。text-indentをマイナスで指定してるから当たり前といえばそれまでだが。
そこで、この画像置換時に点線を正常表示させる方法があったので紹介。
overflow:hidden;
これをかけてやるだけでOKです。
overflowとは盲点だった・・・。
【CSS】リストを横並びにし、中央寄せする
CSSでかなりハマったのでメモ。
まず、作りたいものはこれ↓
一番外のul要素の外にはdivがあるというかなり複雑な構造。
試行錯誤の結果、このような構造になってしまった。
ピンクのul以下は横に可変するデータ。
構造を簡単に解説。
・ピンクのulはfloat:leftをかけている
・ピンクの中のli要素に対してもfloat:leftをかけている
・可変するピンクのul要素を一塊と考え、それをul-liでまとめている
いちばん問題だったのは、横に可変するということ。
一番外のulに対してdisplay:inline-blockをかけて、margin:autoをしてやれば万事うまくいくのだが、display:inline-blockはIE6,IE7で対応していないのでNG。
ここでinline-blockを簡単に説明します。
・CSS 2.1 で追加された display プロパティに指定できる値
・ブロック要素のように横幅/高さを指定できて、インライン要素のように改行されることなく同じ行内に並ぶ。
CSS 2.1 の仕様書には、”inline-block を指定された要素は置換要素と類似した振る舞いをする”という内容も書かれている。
inline-blockはIE 6, 7 では基本的に対応していないが、a や span など、インラインレベルの要素に対してのみ対応している。
ただし、特殊な方法を使うことで、ブロックレベルの要素に対しても使うことができる。
結論から言うと、以下のように指定してやるとうまく行った。
いちばん外のdiv{
text-align:center;
display:inline-block;
}いちばん外のul{
display:inline:
text-align:center;
zoom:1;
}
結局、偶然うまくいっただけで、根本はよくわからないのが現状だったり・・・。
まだまだです。