CSS Tips

クロスブラウザ対策

あなたはどんなブラウザをつかってこのページをみていますか？

InternetExplorer？ FireFox？Netscape？Safari？それともGoogleChrome？

あなたのつくったサイトは横組み、余白などをしっかり設定してますか？

あなたの環境ではマトモにみえたWEBデザインも、他人の環境でみたときには醜くバラバラに崩れているかもしれません。

IEのユーザーは60% , FireFoxのユーザーは15% …のようにそれぞれCSSに対する解釈が異なります。

どんなブラウザでみても同じようにみせる。それがクロスブラウザ対策です。

以下のTipsではできるだけクロスブラウザを意識した記述をしています。

それではどうぞ。

主なブラウザ

firefox

http://mozilla.jp/firefox/

IEtester

IE5.5, IE6, IE7, IE8 の表示テストができる

http://www.my-debugbar.com/wiki/IETester/HomePage

Reset CSS

クロスブラウザ対策。

初期状態の表示差異をリセットする。

http://developer.yahoo.com/yui/reset/

<link rel="stylesheet" type="text/css"
 href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css"> 
<link rel="stylesheet" type="text/css"
 href="http://yui.yahooapis.com/2.5.2/build/reset-fonts/reset-fonts.css">

webデザイン

リセットCSS

クロスブラウザ用の準備を行います。

初期設定の余白解釈がブラウザによって違うので、まずは一切合切を統一します。

全体の余白や、h1タグやformタグの上下の余白、リストの段組などが無くなります。

* で全指定

すべてのタグに適用

乱暴ですが、わかりやすい。


*{
  margin:0px;
  padding:0px;
  border:0px;
  font-size:100%;
}

各タグごとに適切な指定

こちらの方法のほうがブラウザへの負荷が軽い。（ほんの少しですが）


/* reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td,img{
  margin:0;
  padding:0;
  border:0;
}
b,i,em,strong,small,address{
  font-weight:normal;
  font-style:normal;
}

table{
  border-collapse:collapse;
  border-spacing:0;
}

CSSハック

ブラウザごとに違うCSSの解釈を逆手にとって、特定のブラウザのみにCSSの指定を行う小技です。

はやくこういうバグ技がなくなるといいですね。

IE6以下のみに適用

スターハック

「* html セレクタ」と指定することによってIE6以下のブラウザのみにcssを設定できます。

*の形からスターハックと呼ばれています。


* html body{
  font-size:12px;
}

アンダースコアハック

プロパティをアンダースコア (_)からはじめることによって、IE7のみに適用する設定ができます。

アンダースコアハックと呼ばれています。


* html body{
  _font-size:12px;
}

IE7のみに適用

セレクタの頭に「*:first-child+html」をつけることによって、その子要素以下をIE7のみに適用します。


*:first-child+html li{
  font-size:12px;
}

IE6とIE7に適用

プロパティをスラッシュ(/)からはじめることによって、IE6とIE7に適用させます。


ul li{
  /font-size:12px;
}

参考URL:

http://d-lover.com/css/hack.shtml

HTML側で条件分岐する

IE7未満のブラウザにie7_hack.cssという外部CSSを適用させる。


<!--[if It IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7_hack.css" media="screen" />
<![endif]-->

clearfix

その他の小技

リンク色の変更

通常時(未訪問)、訪問済、マウスがのっているとき、クリックした瞬間、に分けて設定できます。


a{
  color:#0000ff;
}
a:visited{
  color:#ff00ff;
}
a:hover{
  color:#ff0000;
}
a:active{
  color:#ffff00;
}

リンクの邪魔な線を消す

画像リンクの紫の枠線やテキストリンクの下線を非表示にします


img{
  border:0px;
}
a{
  text-decoration:none;
}

リンクをクリックしたときの点線を消す


a{
  outline: none;
}

画像の周りのズレを修正

画像と並べて文字を置くと、文字の位置が画像から離れていたりとズレて表示されますので、位置を修正

(g,j,p,q,yなどの文字のせいです)


img{
  vertical-align:bottom;
}

マウスホバー時などのロールオーバー背景画像切り替え

a:hoverの記述でbackground-positionをマイナス座標指定して実装。

メリットは

・JavaScriptを使わないので、JavaScriptOFFでも機能する

・一枚画像で補うので切り替え時の時間差がない

このような方法をCSS Spriteと呼ぶ。

こんな画像を用意。上半分は通常時、下半分はマウスホバー時。

↓マウスを乗せてください。

追記：この方法をリンクに使いたい場合は aタグにtitle属性指定でポップアップ文章の記述。
CSSでtext-indent:-9999em;とすることで、aタグに文字を書いても文字が表示されないようになり、さらにCSSをOFFにしてもリンクとして機能させることができます。

ブロック要素の水平中央揃え

子要素に margin:0 auto; で中央にセンタリング配置。

親要素に text-align:center;　はインライン要素用だが、IE6用のクロスブラウザ対策。

ただ、子要素の幅を可変にする、とか言われるととても困る。

ブロック要素の垂直中央揃え

あきらめろ。

tableタグを使えば一応できるが、文法的ではないのであまりオススメしない。

絶対値を使って指定する方法は行数などの可変の内容に対応できません。(強引な手段としてはjavascriptで絶対値を随時変更する。)

cssの今後のバージョンアップと更なるクロスブラウザ対応に期待。

tableで垂直中央

テキストの場合はline-height設定で垂直センタリングされる。


p {
  line-height:40px;
}

ul, ol, li リスト要素の横組み

ヘッダーのメニューなどに多用される横組みのメニュー

子要素に float:left; でブロック要素でも横並びに(回り込み)。
親要素の最後に clear:both; でfloat指定を解除する。
zoom:1; はafter指定ができないIE6用のクロスブラウザ対策。
この方法だとhtmlソースで改行しても要素間に空白が生まれないので、見やすいソースになる。

商品情報
更新履歴
企業概要
採用情報
問い合わせ

両端に揃うリスト

本来のリストで余白をつくると、全ての要素に余白指定ができてしまい、左右に偏る。

親要素にネガチブマージンを指定することで、右端の余白を打ち消す。

(IE6の場合はmarginが2倍に指定されるので別途スターハックでネガティブマージンを多く取る。)

dl, dt, dd 定義要素の横組み

dt要素にclearとfloatを付ける

下線を付けるときはddのみに。paddinf-left:-7em; のようなネガティブパッディングを使う。

2000-12-25: クリスマス
2000-01-01: A HAPPY NEW YAER
2000-02-14: バレンタインデー
2000-04-01: エイプリルフールエイプリルフールエイプリルフールエイプリルフールエイプリルフール

firefoxだと配置がズレる

ちなみにFIREFOXのほうがCSSの解釈は正しいのだが、正しいのと便利なのとは別。

「一般人」と呼ばれる人々はInternetExplorerが標準なので、大勢の設定にも合わせてあげよう。

paddingの解釈が違う

widthとpadding,borderを同時に指定しないようにする。

子要素を追加して幅を調整する。

listだとデフォルトで解釈が違うのでpaddingを消してmarginでレイアウトする


*{
margin:0px;
padding:0px;
}

block要素を指定する

IEだとただwidthを指定するだけで幅を持たせられるが、firefozの場合はインライン要素にwidthを指定するだけでは幅の意味を持たない。 width指定と同時にブロック要素に変更する


a {   
    width:200px;
    display:block;   
}

スクロールバーの幅でセンタリングズレる

スクロールバーを強制表示させる


html {   
    overflow-y:scroll;   
}

スクロールバーの色が変わらない

Firefoxだとスクロールバーの色のカスタマイズができない。


body {   
    scrollbar-base-color:#000000;   
}

ページ送りの横組み

perlやphpを使った動的なサイトでよく使う、複数ページに渡るページナビゲーターのデザイン。

aタグにpaddingを適用させることでリンク領域が四角い枠に合うように調節しています。（破線がズレるのはご愛嬌）

paddingが嫌いな人は上記の「リスト要素の横組み」の応用でも可能ですが、ブロック要素だと可変幅に対応しにくいので、左右寄りになります。

こちらのインライン要素を使った方法だと、ページ数が可変でもセンタリングが可能です。

<< 前のページ 1 2 3 4 5 次のページ >>

ホバー時にボタン押した感じに位置をズラす

リンクにマウスを乗せたとき、画像の位置がズレることで立体的にボタンを押した感を与える。

position:relativeを応用する。

文字サイズ以下の指定時に高さの余白を消す

divなどのブロック要素を使うと一部のブラウザで１文字分の高さの余白が発生してしまう。

overflow:hidden; で余白を無くそう。

まぁ、全部消したければ display:none;　で非表示にしてしまおう。

例：ここと

ここの間には高さ1pxのブロック要素が隠れているよ

絶対座標・相対座標を使ったレイアウト

画像やテキストを重ね合わせたり、背景画像に合わせた自由な配置が可能。

半透過にすることでわかりやすくしています。

まず先にposition:;relative;で中に入れる絶対座標の基点を設定します。（これがないと、bodyの左隅が基点になります)

流動的なレイアウトが美徳のhtmlにはそぐわないので、あまりこの方法にハマらないように (^^;

や

ら

な

い

か

ページ内でスクロールバーを表示する

幅、高さを指定してサイズを固定し、overflow-y:scroll;　でスクロールバーを表示させます。

textarea内ではタグが使えないし、iframeではページを分離してしまうので、無理矢理に画面サイズに押し込みたいときに便利。

ああああああああ
いいいいいいいいいいい
うううううう
改行
改行
改行
改行

aaaaaa