TopCSS > 2005年6月
2005年6月25日

アンダースコア・ハック

June 25,2005 11:57 PM
Tag:[, , ]
Permalink

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 によるプロパティ値修正も策としては妥当ではないかと思います。

Comments [8] | Trackbacks [8]
2005年6月20日

html 要素に lang 属性・xml:lang 属性を追加

June 20,2005 11:59 PM
Tag:[, , , ]
Permalink

XHTML では html 要素に対し、拡張要素である xmlns 属性が続きます。

<html xmlns="http://www.w3.org/1999/xhtml">

xmlns 属性は「XML名前空間」で、当サイトを彷彿とさせるネーミングです。The Web KANZAKIXML名前空間の簡単な説明が大変参考になります。

この後に、書かれている言語の種類と書かれているXMLの言語の種類を追加することがXHTML1.0に記載されています。いずれも日本語であることを明示する場合は下記のようになります。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

ただし The W3C Markup Validation Service ではこの記述がなくても valid になります。

Comments [0] | Trackbacks [0]
2005年6月14日

リストマークの画像のずれを修正する

June 14,2005 11:59 PM
Tag:[, , ]
Permalink

サイドバーメニュー等の先頭のマーク(マーカー)表示に画像を使われている方は少なくないと思いますが、img タグをテンプレートに直接記述するのは、ウェブスタンダードでいうところの「構造とデザインの分離」という面よりあまりお勧めできません。またリストの量が増えると img タグの指定も増えることになり(テンプレートでは数ヶ所の指定で済みますが)、ページサイズにも影響します。

ということで、マーク表示にはCSS・リスト形式(li)の画像指定で表示すること好ましいですし、リスト先頭のマークに画像を使われている方も大勢いらっしゃると思いますが、list-style-image プロパティで

li {
    list-style-image: url(hogehoge.gif);
}

と画像を指定した場合、下のようにマークが微妙にずれて表示されてしまうのが悩ましいところです(サンプル1)。

サンプル1

サンプル1

これを背景画像で表示させる方法に変更すれば位置を揃えて表示させることができます。

li {
    padding-left: 12px;
    background: url(hogehoge.gif) no-repeat 10px 0.5em;
    list-style: none;
}

padding-left は画像を配置する分の余白です。
url の後ろの指定は順に

background-repeat(画像の繰り返し表示)
background-position-x(X軸方向の開始位置)
background-position-y(Y軸方向の開始位置)

です。サンプル2が background 指定で表示した場合です。

サンプル2

サンプル2

ちなみに左上の「最近のエントリー」で使っている地味な画像のHTMLとCSSは下記のような指定を行っています。

HTML

<ul class="list">
    <li>~</li>
      :
    <li>~</li>
</ul>

CSS

ul.list {
    list-style: none;
    margin: 0px;
    margin-left: 0px;
    padding: 0px;
}
 
ul.list li {
    margin: 0px;
    padding: 0px 0px 0px 12px;
    background: url(hogehoge.gif) no-repeat 3px 0.4em;
    list-style: none;
}

HTMLの ul 要素に class 属性を与えているのは、ul - li を適用する場所によって異なるスタイルを与えることを想定しています。全ての ul - li 要素に同じスタイルを与える場合、HTMLの class 属性や CSS の class セレクタは不要(ul.list → ul)です。

2005.08.21 追記
サンプルのHTMLを追加しました。
Comments [13] | Trackbacks [2]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3