[ 通常表示 ]  [ 簡易表示 ]  [ シンプル表示 ]

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典イメージぴよ画像「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

CSSハック

pointこの用語のポイント

pointブラウザを名指ししてCSSを適用させるよ

pointブラウザによる見た目の差異を埋めるためにやるよ

pointあくまで裏ワザだから多用しない方が良いよ

スポンサーリンク

簡単に書くよ

CSSハックとは

ブラウザを名指しで指定してCSSを適用させるテクニックのこと
です。

image piyo

詳しく書くよ

「CSS」は「ホームページの見た目を指定するための技術」です。
よく分からなければ「HTMLの親戚」とでもお考えください。

ホームページを表示するときは、HTMLやCSSをWebブラウザさんが読んで、見た目を整えてから皆さんに表示してくれます。
白黒のお手紙と色鉛筆、どこに何色を置くかの指示書がまず届いて、Webブラウザさんが指示書に従って塗り絵をした後のお手紙を皆さんが見るイメージですね。

実はこの見た目の整え方がWebブラウザさんによって微妙に違うときがあるのです。
例えばIEだと隙間が空いて見えるけどFirefoxだと詰まって見えるとかですね。
同じホームページを見ても使用しているブラウザによって、見え方が異なる場合があります。
「ここは桜色に塗って」と指示書に書いてあったときに、IEさんは「ピンクで塗れば良いのね」と解釈するのに対し、Firefoxさんは「白と赤とオレンジを混ぜれば桜っぽい色になるな」と解釈するようなイメージです。

これではよろしくない。
作る人としてはできるだけ全部のブラウザで同じに見えて欲しいのです。

同じ指示を出しているのに勝手に違う解釈をするブラウザがいる。

どーする?

じゃあそいつには名指しで具体的な指示を出せば良いんじゃね?

そう考える人が出てきました。

前振りが長くなりましたが、そのためのテクニックが「CSSハック」です。
ブラウザによって個別の指示を出します。
「ここは桜色に塗って」と書いてあるのにFirefoxさんだけ変な色を塗るときは「ここは桜色に塗って。Firefoxさんへ:左から3番目の色鉛筆で塗ってください」のような指示書にするイメージですね。

CSSハック

ちなみにCSSハックはあくまで「裏ワザ」です。
どちらかと言うと苦肉の策ですので、可能であれば使わない方が無難だと思いますよ。

image piyo2

一言でまとめるよ

まぁ「CSSハック」って単語が出てきたら「ブラウザ間の見た目の差異を埋めるためのテクニックなんだな~」と、お考えください。

一番上に戻るよ
スポンサーリンク