スタイルシートメモ

ブラウザごとのスタイルシート選定

いろいろなブラウザがある中で、古いインターネットエクスプローラーやネットスケープ4のスタイルシートの表示はには頭が痛くなる一方で。

だいたいスタイルシートオンリーでページを作成している人は、ネットスケープ4は読み込まないように設定しているようです。

ページ全体の中央寄せ

ページの中味を全てセンタリングしたい場合です。
ちなみにこのブログもこれでセンタリングしています。

リストタグの中央寄せ

リストでメニューを横に作成したものの…リスト自体を中央寄せにしたい！
そんなときはこれです。

画像に隙間が出来る（firefoxなど）

firefoxなどモジラ系のブラウザは、ドキュメントタイプをFull Standardモードにすると、なぜか画像の下に隙間が出来ます。
それを回避するには、画像に以下をいれてください。

ブラウザのデフォルトスタイルを決定する

bodyやhのマージンやパディングをひとつずつ設定するのは結構面倒なもの。
最初に一括でブラウザのデフォルトスタイルを決めておくととても楽です。

floatしたときの注意

floatを使うと、よく思いもしない表示になったりする事があります。
特にWin IE5.0や5.5あたりは…(--,)

というわけで、floatをするときに注意点です。

ボックス関連の注意

borderやpadding、margin、width、heightに関連するバグです。
覚えておかないとたまに痛い目をみます(^。^;)

floatの解除の仕方

floatを解除するのに、「clear:both;」を指定するのが一般的です。
でも「clear:both;」を指定するためにdivタグを追加するのが嫌だ…という場合は、「セレクタ:after」が便利です。

スタイルの優先順位

CSSは基本的に下に書いたものが優先されます。
イメージとしては上で書いたものが下で書いたものに上書きされる感じです。
たとえば、同じ要素に違った形でスタイルを設定してたらどうなるのでしょう？

全体を縦に中央配置

全体を横に中央配置するには、ページ全体の中央寄せで説明したように、スタイルシートで簡単に表現できるのですが、ページ全体の縦を中央寄せする場合は一苦労です(^^ゞ

float時の表示バグ対策

flat…便利といえば便利なのですが、これを使うといろいろと問題が起きる事が…(^^ゞ
中でも解除がうまくいかないときに便利なのが以下の方法です。

対応ブラウザのみに対応させるハック

このブラウザにだけスタイル設定を対応させたい、このブラウザ以外にスタイルを設定させたい。
そのときに便利なのがこれらのハックです。
ただし…このハックはこれからのブラウザでどうなるのかわかりませんので…できるだけ使わずに、ハックしなくても良いデザインを考えることが大切だといわれています。

inputの見え方サイズの違い

書き込みが出来るinputのテキストエリアなど「size」で一見大きさを設定できるように思えますが、ブラウザによって表示される長さが違ったりします。
特にMacのサファリだと、驚くくらい長さが違って見えたりします。
※1.5倍くらいに見えるかも…(^_^;)

inputの長さを全てのブラウザで統一したい場合は、スタイルシートで長さを指定したほうが良いです。

IE6　iframeに横スクロールが出る時の対処

iframeを使用したときに、なぜかスクロールが出てしまう…
そのときの対処方法です。

フッターをページの一番下にいつも置く

ページの内容が短いと、フッターがページ中央などにきたりしてすごく見栄えが悪い…
ページの内容が短くてもフッターがページの一番下に表示される方法です。