Home > CSS

「CSS」カテゴリーの記事一覧

col／colgroup 要素で有効なスタイルと無効なスタイル。

「ある列だけを改行なしにしたい」というときが結構あります。
確実なのは「その列のすべての td タグに class を付けていく」という方法ですが、あまりスマートとは言えません。
ソースの見栄え的にもいただけない感じ。

そこで、col や colgroup が使えるんじゃないかと思い、事あるごとに試していました。
が、どうしてもうまくいきません。
col と colgroup の組み合わせ方を変えてみたり、CSS の設定を工夫してみたり、いろいろ試しましたが結果は同じ。
ただ、設定したスタイルの中でも適用されるものと適用されないものがあり、その違いがよく分からないままだったので、どうもしっくりこない状態なのでした。
この記事の続きを読む

floatとline-heightを一緒に指定すると、文字が欠ける。

ときどきWindowsのIEで、文字が数ピクセル欠けて表示されることがあります。
その原因の一つが、floatとline-heightを一緒に指定していること。

とりあえず同じ要素に指定しなければ発生しないので、line-heightを親要素に指定するなどの方法で回避できます。
%やemなどの単位を付けずに、line-height:1.2;というふうに数値のみで指定すれば解決することもあるそうですが、別々に指定する方が確実だと思います。
いちいち検証する手間も省けますし。

原因はおそらく、floatした要素を表示する範囲は前に（別の箇所で）指定されたline-heightのままで、中身の文字だけに新しく指定したline-heightが効いてしまってるんだと思われます。
例）全体にline-height:150%を指定して、floatした要素にline-height:100%を指定した場合、表示範囲は150%で文字だけが100%なので、上にずれて表示されてしまう（＝文字の上側が欠ける）。

あくまで推測ですけど。

上付き（下付き）の設定は(X)HTMLタグかCSSか。

「m3」や「CO2」など、上付き・下付き文字を設定する場合にいつも悩みます。

上付き（下付き）にすることに意味があるような気がするので、(X)HTMLで問題ないとは思いつつ。
でもやっぱり見た目をコントロールしているようで何となく気持ちが悪い。

調べてもどうやら非推奨タグではなさそうなので、今のところ(X)HTMLでの設定を採用しています。
ただ、CSSでもvertical-alignで設定できるということは知っているので、こういう場面に遭遇するたび悩むのです。

まぁCSSを使う場合でもspanタグを使ったりしないといけないので、結局ソースはあまり変わらないんですけど。

ケースバイケース、なんでしょうかね。

3 / 3123

ホーム > CSS

書いてる人
コバヤシ
サラリーマンデザイナーやってます。

Facebook：kbysbtmup
検索
最近の記事
カテゴリー
スポンサードリンク
Facebook ページ
タグクラウド
リンク
フィード
メタ情報

このページのトップへ