IE6.0とFirefoxの見た目を同じにするために(アンダースコアハック)
2007年03月03日
「小粋空間」のyujiroさんのテンプレートのソースを見ていますと
padding: 6px 3px 0px 3px;
_padding: 5px 3px 2px 3px;
のような記述がところどころにありました。
「_」って何だろう？？？(^・ω・^).....ンニュニュ?
ということでいろいろ調べてみることにしました。
すると同じく「小粋空間」のyujiroさんの
アンダースコア・ハックにて書いてありました。
「_」で記述するとIE(Internet Explorer)ではこちらの方が有効になるのだとか!!
padding: 6px 3px 0px 3px;
_padding: 5px 3px 2px 3px;
のような記述がところどころにありました。
「_」って何だろう？？？(^・ω・^).....ンニュニュ?
ということでいろいろ調べてみることにしました。
すると同じく「小粋空間」のyujiroさんの
アンダースコア・ハックにて書いてありました。
「_」で記述するとIE(Internet Explorer)ではこちらの方が有効になるのだとか!!
padding: 6px 3px 0px 3px;
_padding: 5px 3px 2px 3px;
この記述だと
padding: 6px 3px 0px 3px;
を全てのブラウザが読み込み、その後
_padding: 5px 3px 2px 3px;
をIEが読み込むわけですね!!
_padding: 5px 3px 2px 3px;
この記述だと
padding: 6px 3px 0px 3px;
を全てのブラウザが読み込み、その後
_padding: 5px 3px 2px 3px;
をIEが読み込むわけですね!!
私はIE6.0とFirefoxを併用しているのですが、
見た目があまりにも違うので困っていました。
右のサイドバーの各プラグインタイトルの部分ですが、
その高さをheightにて設定しています。
height:22px;
と設定してあるだけだとIE6.0とFirefoxでは下のような見た目の違いがでました。
↓IE6.0
Firefox2.0↑
IE6.0の方は高さが足りず、
アイコンの画像が全て表示しきれていません。
見た目があまりにも違うので困っていました。
右のサイドバーの各プラグインタイトルの部分ですが、
その高さをheightにて設定しています。
height:22px;
と設定してあるだけだとIE6.0とFirefoxでは下のような見た目の違いがでました。
↓IE6.0
Firefox2.0↑
IE6.0の方は高さが足りず、
アイコンの画像が全て表示しきれていません。
ここでアンダースコアハックを使い
height:22px;
_height:30px;
(書く順番に注意してくださいね。)
のように設定してみるとほぼ同じ見た目になりました。
これでIE用とFirefox用のCSSを設定できることになります。
height:22px;
_height:30px;
(書く順番に注意してくださいね。)
のように設定してみるとほぼ同じ見た目になりました。
これでIE用とFirefox用のCSSを設定できることになります。
ちょうどW3C CSS 検証サービスというものを見つけたので
早速うちのCSSをチェックしてみました。
確かにアンダースコアがついているものはアウトです。Σ(;￣□￣Ａ アセアセ
警告も１０８も出た!!(苦笑)
まだ分からないことだらけなのですが、CSSについてももっと勉強していかなければ。
ただ私にとってはブログの見た目も大事なので、
しばらくはこのアンダースコアハックを使っていきたいと思っています。
出来るだけ他の方法で回避できるものはしていきますけどね。
早速うちのCSSをチェックしてみました。
確かにアンダースコアがついているものはアウトです。Σ(;￣□￣Ａ アセアセ
警告も１０８も出た!!(苦笑)
まだ分からないことだらけなのですが、CSSについてももっと勉強していかなければ。
ただ私にとってはブログの見た目も大事なので、
しばらくはこのアンダースコアハックを使っていきたいと思っています。
出来るだけ他の方法で回避できるものはしていきますけどね。
ちなみにIE7.0だとFirefoxと同じ見た目になっておりました。
ということはIE7.0が主流になればアンダースコアハックも無用になるわけですね。
ところが今の段階では、まゆびのブログを見てくださってる方の主流はまだまだIE6.0みたいです。
BlogPetのアクセス解析でもこんな結果が出ていました。
やっぱり。ということはやっぱりしばらくはアンダースコアハックのお世話になりそうですわ。
ハックについてはCSSバグ回避 CSS辞典に書かれていますので
興味のある方はぜひどうぞ♪
ということはIE7.0が主流になればアンダースコアハックも無用になるわけですね。
ところが今の段階では、まゆびのブログを見てくださってる方の主流はまだまだIE6.0みたいです。
BlogPetのアクセス解析でもこんな結果が出ていました。
やっぱり。ということはやっぱりしばらくはアンダースコアハックのお世話になりそうですわ。
ハックについてはCSSバグ回避 CSS辞典に書かれていますので
興味のある方はぜひどうぞ♪
ハックを使う必要のないデザイン（サイト設計）を心がけることは、どのような環境でも正常に閲覧できるデザインへとつながります。適度に前方・後方互換の両方を備えたデザインを目指してください。ヽ( ´ ▽ ` )ノ ハーイ 頑張ります～!!
↓ポチっとしてくれると嬉しいです♪d(*⌒▽⌒*)b ﾆｺﾆｺｯ 
スポンサーサイト
コメント
＞アンダースコア・ハック
(□。□-) ﾌﾑﾌﾑ そんな風に呼ぶのですね。しかもIE6.0用の記述だったのですか！
以前(CSS勉強開始のころ)に調べたときには、よっくわからなかったよーな・・・(＞▽＜;; ｱｾｱｾ
こちらの記事だと、とってもよくわかりますよ。(o*｡_｡)oﾍﾟｺｯ(o*｡_｡)oﾍﾟｺｯ
＞IE6.0とFirefoxでは下のような見た目の違いがでました。
おお！ってことは、yozoはyujiroさんのCSSがベースだから、見た目の違いがなかったわけですね。あらためてyujiroさんに感謝でっす♪そして、解説してくれたまゆびさんにも大感謝♪(^○^)
＞しばらくはアンダースコアハックのお世話になりそうですわ。
⊂((〃￣ー￣〃))⊃ ふふふ とても説得力ある記事ですね。まだまだIE6.0が主流のようですから、yozoんちもアンダースコアハックはそのままにしておきまっす♪大変勉強になりました。ありがとーございまっす♪m(_ _)m
Posted by yozo at 2007.03.03 16:11 | edit
私もこのアンダースコアハックは長い間謎でした。
なんという名前なのかも分からなかったですしね。
この名前を知ってから、いろいろ検索してやっとなんとなくですが、
この記述の意味が分かるようになりましたー。
＞yozoはyujiroさんのCSSがベースだから、見た目の違いがなかったわけですね。
確かにyozoさんのテンプレはIEで見ても、Firefoxで見てもほとんど違いがないです。
私は画像を入れたりいろいろしちゃっていますからね。
このアンダースコアハックのおかげでなんとか見た目も調整することが
出来ました♪(*'ー'*)ふふっ♪
BlogPetのアクセス解析を見るとやっぱりIE6.0がほとんどなんですよね。
なのでこのアンダースコアハック。エラーがあっても手放せません。(笑)
しばらくはこれで様子をみたいと思っています♪(*^-^)
Posted by まゆび→yozoさんへ at 2007.03.03 18:38 | edit
アンダースコアハック・・・φ(･ω･*)ﾌﾑﾌﾑφ(｡_｡*)ﾒﾓﾒﾓ
初めて知りますタ～（*´ω｀*）ﾃﾚﾃﾚ
勉強になります、うん。
よくσ(･ω･*)がCSSについて書かれてるブログで読ませていただいているところなのですが
http://www.lucky-bag.com/archives/2005/08/default_style.html
これは全く関係のないことですかね？？
なんだかブラウザによって差異を無くすための呪文だと書かれてます（笑
全く見当違いでしたらごめんなさい～ﾋｭｰﾝ ε=ε=ε= (o-ω-)o
Posted by モンビッケ at 2007.03.04 10:07 | edit
アンダースコアハックは私もこのテンプレートに変えたときに知ったのですが、
エラーは出てくるものの、見た目は同じになるのでいいかな？なんて思っています。
細々と設定しなくてはいけないのでちょっと面倒なんですけどね。(^^;;
モンビッケさんがご紹介してくださったページにもお邪魔してみました!!
なるほど!!こちらの方がいいかも!!＿〆ヾ(￣(エ)￣ メモメモ・・・
ちょっとよく分からない部分もあるのでちょっと勉強してみます!!
素敵なページを教えてくださってありがとうございました♪(*- -)(*_ _)ペコリ
やっぱりブラウザによっての見た目の違いはないほうがいいですものね。(*^-^)ニコ
Posted by まゆび→モンビッケさんへ at 2007.03.04 16:05 | edit
おぉぉ。これは勉強になる記事ですね～ ( ..)φメモメモ。
アンダースコアハック･･･初耳でしたが、以前どこかでこれそのものは見たことがありました！！
なるほどね～。ブラウザ間の差異をなくすものだったんですね～☆
たしかにうちもIE6で見に来てくださっている方がかなり多いので、
ちょっとテンプレートの記述を少しずつ見直してみようかと思います。
モンビッケさんご紹介のリンク先もしっかりメモして、勉強し直して来ますー(*`･ω･)ゞ
Posted by mio at 2007.03.04 17:05 | edit
さすがｍｉｏさん!!見たことがあったのですね～。
私は何これ？って感じでした。(笑)
調べて使ってみるととりあえず見た目はよくなったので
何箇所かで使っております。エラーなんですけどね。(^^;;
まだまだIE6.0が主流のようなのでそちらで綺麗に見えるように
私も記述をしていこうと思っています。お互い頑張りましょう♪(笑)
モンビッケさんの紹介してくださったところは本当にためになりますね～!!
モンビッケさんに感謝です～!!(*^-^)ニコ
Posted by まゆび→ｍｉｏさんへ at 2007.03.04 18:11 | edit