line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
Lucky bag::blog: Re: CSSの謎
CSSの謎 CSS によるレイアウトで躓いたことを書かれていて、その中で下記の部分に注目してみた。 コンテンツの中に画像が入ったサンプル２をIEで見て下さい。ウインドを縮小していって画像の幅が入りきらなくなると・・・画像がメニューBOXの下の高さまで落ちてしまいます。 上記サイトでは float を使った 2 段組の可変レイアウトでの解決方法がまだ見つかっていないような感じだったので、ちょっとサンプルを作って解決方法を提示してみる。 サンプルを用意する メインコンテンツ部分が可変幅で、ナビゲーションが固定幅のレイアウトをサンプルとして用意した。構造としては下図のような感じで、ネガティブマージンを利用して左のメインコンテンツが可変幅、右のナビゲーションが固定幅を実現している。ちなみにやっつけで作ったんで、かなり粗があったりするっつうか、かなりテキトー。 メインコンテンツに画像がある際の IE
3 カラムレイアウトいろいろ - lucky bag
3 カラムのレイアウトにしたいけど、どうやったら良いか分からないって人は結構いるのかもしれない。一口に 3 カラムといっても、色々なパターンがあるわけで、それによって (X)HTML や CSS の書き方やテクニックも変わってくる。そこで、そういったことを参考に出来るサイトですよ。 Three Column Layouts - css-discuss css-discuss が様々な3カラムレイアウトのサンプルを一覧にしたリンク集みたいなのを公開している。 ヘッダありなし、フッタありなし、可変か固定か、NN4 への対応、さらに、31 個ほどの補足情報が notes に示されている。たとえば、番号 7 は、フッタがメインコンテンツの幅のみ、番号 9 は全て float を使用しているって事だったり、番号 25 を見てみると、メインコンテンツの (X)HTML コードは、左右カラムの前に記述し
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
