line-height: 1でセルから文字がはみ出して見えない。

掲示板用のデザインで、
スレタイトルテキストの下部に少し余白とボーダーをつけ、
その下側に10pxほどの空白、
で、カテゴリー名や投稿日時などの細かい文字を
で並べるレイアウトをしていました。

が、

なぜか内のテキストの上部1〜2pxだけ
削れたように見えなくなる事例が発生。

（確認 windows IE6）


...続きを読む

posted by CSSベースでのHTML（XHTML）レイアウト入門講座＜polka＞ at 10:02 | Comment(1) | TrackBack(0) | CSSベースのHTMLコーディング | |

2009年12月17日

全称セレクタ「*」がコンマつなぎで利かない〜

スタイルシートを記述する際に、
セレクタといわれる、スタイルシートがかかる範囲の指定部分があります。


▽セレクタ例

.style01{
color: #ff0000;
}
この場合「.style01」がセレクタです。
「color: #ff0000;」部分は任意のスタイルシートが入ります。

div#box01 .style02{
font-weight: bold;
}
この場合「div#box01 .style02」がセレクタです。
（「div#box01」をセレクタ1、「.style02」をセレクタ2と
区別する場合もあります）
「font-weight: bold;」部分は任意のスタイルシートが入ります。



このセレクタで、全称セレクタという、
全てのタグを指し示す「*（アスタリスク）」を記述する場合があります。


...続きを読む

posted by CSSベースでのHTML（XHTML）レイアウト入門講座＜polka＞ at 10:29 | Comment(2) | TrackBack(0) | CSSベースのHTMLコーディング | |

2009年11月13日

フォームパーツのタイプ別にCSSを利かせる

フォームパーツの<input>は、
目的別のタイプがいくつかあります。


●テキスト入力…type="text"
●チェックボックス…type="checkbox"
●ラジオボタン…type="radio"
●送信ボタン…type="submit"
●リセットボタン…type="reset"
●パスワード…type="password"


スタイルシートで、
このフォームパーツにデザインの味付けをする時、
タグ自体に設定する他、classやidを付与する方法もありますが、
ざっくりと、タイプで分類して設定したい場合、
便利なCSS記述方法があります。


...続きを読む

posted by CSSベースでのHTML（XHTML）レイアウト入門講座＜polka＞ at 14:55 | Comment(0) | TrackBack(0) | CSSベースのHTMLコーディング | |

2009年10月08日

xml宣言でスタイルシートがIE6で剥がれる

XHTMLで、ドキュタイプ宣言と並んで
<?xml version="1.0" encoding="utf-8"?>
のようにxmlの宣言が付いてるファイルがあります。


XHTMLはxml文書の一派なので、
本来ならこの宣言は必要なハズ、
なのですが、


@importで複数のCSSファイルを読み込んでいるとき、
IE6では一部のスタイルシートが無視される時があります。


ページのほとんどの箇所には利いているのに、
フッターの一部のタグに利いていない、とか、
妙な間隔がついてセンタリングされないとか。


そんな風に、
スタイルシートが妙に利かない時には
他に必要がなければ、
この
<?xml version="1.0" encoding="utf-8"?>
を削除して様子をみてください。


あっけないくらいに改善するかも、です。

posted by CSSベースでのHTML（XHTML）レイアウト入門講座＜polka＞ at 21:43 | Comment(2) | TrackBack(0) | CSSベースのHTMLコーディング | |

2009年10月02日

2行以上だとline-heightで余計な上アキ

文章の行間を調整する
line-heightは、本文を読みやすくするために、
なくてはならないものですが、

本文ブロックとその横に画像を配置している場合、
上のツラをあわせたいときに、
意図しないアキができるときがあります。


...続きを読む

posted by CSSベースでのHTML（XHTML）レイアウト入門講座＜polka＞ at 08:32 | Comment(0) | TrackBack(0) | CSSベースのHTMLコーディング | |

<< 1 2 3 4 5.. >>

Seesaaブログ