アンダースコア・ハック

アンダースコア・ハック

Posted at June 25,2005 11:57 PM
Tag:[CSS, CSSHack, Underscore]

CSSで設定したプロパティ(width/font-color等)の前にアンダースコア "_" を付与すると、WinIEではそれを正常なプロパティとして読み込み、他のブラウザでは無視される(=定義されていないプロパティとして認識される)ことを利用した「アンダースコア・ハック」を紹介します。Mozilla 系のフォントサイズが小さくなる問題で、以前 JavaScript によってサイズを変更するエントリーを公開しましたが、それをCSSで実現することができます。
参考サイトは下記です。ありがとうございました。

Lucky bag::blogアンダースコアハック WellStyled.comThe Underscore Hack

ということで、利用方法です。公開テンプレートのサイドバーのフォントサイズを、IEではデフォルトのサイズ(9px)を、NetScapeやFirefox等、WinIE系以外のブラウザで 10px を指定する例を挙げておきます。

.side {
    font-family: Verdana, Arial, sans-serif;
    color:#666666;
    background: none;
    font-size:10px;
    _font-size:9px;
    font-weight:normal;
    line-height:150%;
    padding:2px;
    margin-bottom:25px;
}

動作の仕組みですが、まず上の「font-size:10px;」を全てのブラウザが読み込みます。そして次の「_font-size:9px;」で、WinIE系のブラウザだけが正常なプロパティとして読み込みます(つまりこちらが有効になる)。結果としてWinIE系とそれ以外のブラウザで異なるサイズを指定することができます。記述の順番を間違えないように気をつけましょう。

いくつかのサイトを見てまわるとこのハックを利用した場合、CSSが valid にならないことが問題として挙げられているようですので、JavaScript によるプロパティ値修正も策としては妥当ではないかと思います。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

アンダースコア・ハックためしてみました。 from 私立大学職員の情報オフィス
小粋空間さんのエントリーにあるCSSのカスタマイズを早速行ってみました... [続きを読む]

Tracked on June 26, 2005 11:15 AM

アンダースコア・ハック from いろんなことが起こる
オリジナルのテンプレートでは、サイドメニューのタイトルはボックスのセンター揃えで... [続きを読む]

Tracked on October 31, 2005 8:04 PM

MovableTypeのfontのサイズはブラウザによって表示のされ方が違う from MovableType幼稚園
以前、インターネットエクスプローラー(以下IE)とFirefoxのフォントの大きさの表示のされ方違う、という事を嘆いておりました。いろいろ調べてみると、や... [続きを読む]

Tracked on March 10, 2006 10:55 AM

WinIE5.5/5.0用のスタイルをこう書いてみる from ナチュ日記。
たまに Win IE5.5/5.0 対応的な案件が来るといつもと勝手が変わってき... [続きを読む]

Tracked on May 21, 2006 5:08 AM

スタイルシート from np's BLOG
 普段このサイトを管理しているときはFirefoxでチェックしているんですが、今日たまたまInternet Explorer 6でこのサイトを見る機会があ... [続きを読む]

Tracked on February 21, 2007 12:43 AM

IE6.0とFirefoxの見た目を同じにするために(アンダースコアハック) from のんびり前進じたばた生活
「小粋空間」のyujiroさんのテンプレートのソースを見ていますと padding: 6px 3px 0px 3px; _padding: 5px 3... [続きを読む]

Tracked on March 3, 2007 2:09 PM

Underscore Hack from PARADISE CLUB
Mozilla 系のブラウザにて、観覧された場合では WinIE 系ブラウザの時... [続きを読む]

Tracked on April 21, 2007 11:02 AM

アンダースコアハック from Hermit Purple
いま、CSSの勉強をしていて始めて知ったのですが、「アンダースコアハック」という... [続きを読む]

Tracked on August 21, 2008 12:04 PM
コメント

知らんかった・・・。楽そうだし、やってみるかなぁ。

でも、ie7でどうなるんでしょうねぇ。より厳密にCSSをきちんと解釈するようになるのなら、こういうの通用しなくなりそうな気が・・・。

[1] Posted by Border. : June 27, 2005 2:22 AM

>Border.さん
こんにちは。
ちょこっと手を加えればいいので結構便利です。

IE7、中途半端に良くなると困りますね。(笑)
Win2000が対象外というのもなんだか。

[2] Posted by yujiro : June 27, 2005 1:06 PM

yujiro様、
テンプレートのスタイルシートの「_」の意味について質問した者です。
こちらの記事を読んで、理解できました。

自分は「アンダーバー」で検索していて、
解答にたどり着けませんでした。
「アンダースコア」と言うのですね。
改めて「アンダースコア」で検索したところ、
こちらのエントリーがヒットしました。

お忙しいところ、ご回答いただきありがとうございましたm(__)m

[3] Posted by カンカン : May 9, 2006 7:14 AM

>カンカンさん
こんにちは。
ご連絡ありがとうございました。
ではでは!

[4] Posted by yujiro : May 10, 2006 1:18 PM

こんにちは、yujiroさん
何時も、お世話になっています。

記事を参考に、CSSを修正して見ました
普段は、IEを使っているので気が付かない事が多いです。

前日 Firefox2.0 をインストールして見たのですが
Firefoxにて観覧すると、ブログの外枠が消えてしまうのは何が原因でしょうか?

テンプレートのヘルプ等を、拝見しましたが同じ現象が見つからなかったので
見落としていたらすいません。

現在、CSSには以下の様に、記載しています。

/* 2カラム用 */
.layout-two-column-left #box,
.layout-two-column-right #box {
width: 680px;
margin-right: auto;
margin-left: auto;
padding: 0;
border-bottom: 1px solid #9B937B;
border-left: 1px solid #9B937B;
border-right: 1px solid #9B937B;
text-align: left;
background-color: #ffffff;
}

/* 2カラム用 */
.layout-one-column #container {
margin-bottom: 0;
}

/* 2カラム(右サイドバー) */
.layout-two-column-right #content {
float: left;
width: 478px;
margin: 0;
border-bottom: 1px solid #9B937B;
border-right: 1px solid #9B937B;
}
.layout-two-column-right #links-right-box {
float: left;
width: 200px;
}
.layout-two-column-right #links-right {
padding: 13px 15px 0;
color: #ffffff;
}

お手数お掛けしますが宜しくお願いします。

[5] Posted by mituru : April 21, 2007 12:29 PM

>mituruさん
こんばんは。
お世話になります。
ご質問の件ですが、右サイドバーのバナー表示部分に div 終了タグが抜けているようです(下記青色)。

<!-- バナー開始 -->
<div class="bannerlist">
  :
</div>
<!-- バナー終了 -->

それではよろしくお願い致します。

[6] Posted by yujiro : April 24, 2007 6:16 PM

こんばんは、yujiroさん
お忙しい中を、ご確認して頂きましてありがとうございます。

初歩的なミスで、お手数お掛けしてすいませんでした
テンプレートを修正して、Firefoxでも同じ様に表示されるようになりました。

ありがとうございます。

[7] Posted by mituru : April 26, 2007 1:36 AM

>mituruさん
こんばんは。
ご連絡ありがとうございました。
無事に直ったようで良かったです。
ではでは!

[8] Posted by yujiro : April 29, 2007 12:56 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)