小粋空間: アンダースコア・ハック

Top ＞ CSS ＞アンダースコア・ハック

2005年6月25日

アンダースコア・ハック

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

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

Lucky bag::blog：アンダースコアハック WellStyled.com：The 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 によるプロパティ値修正も策としては妥当ではないかと思います。

Posted by yujiro

« サイドメニューの折りたたみに画像を使用する | Main | テクノラティジャパン・バージョンアップ »

人気エントリー

トラックバックURL

このエントリーのトラックバック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

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

でも、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

コメントする

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

お知らせ：2008年5月現在、多忙のため、7月頃までコメントを速やかに回答できない状態が続きます。ご質問の内容によっては回答が7月以降になる可能性がありますので、予めご了承ください。

コメント（C）:

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

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