Oddwit

このCSSを

ul.menu   { list-style: none; }
ul.menu li { padding-left: 2em; }

こう書けたら？

ul.menu {
    list-style: none;
    li {
        padding-left: 2em;
    }
}

CSS Server-side Pre-processorを使えば、こんな風に見た目と意味が一致したCSSが書けてしまうようだ。

独自文法のCSSをサーバサイドでパースして、通常のCSSに落とし込もうというアイデアである。

このライブラリを使えば、ネスト記法の他にも定数を宣言したり、サーバサイドで別のCSSファイルをimportしたりできるようだ。

定数を使えば、色や幅など共通の値をいちいち置換してまわる手間が省ける。

@server constants{
    colorOne: #336699;
    colorTwo: #3366CC;
}

.foo { color:colorOne; background-color:colorTwo; }
.bar { color:colorOne; background-color:colorTwo; }

importはHTTPリクエスト数の大幅な削減につながる。

@server import url(stylesheetName.css);

普通のCSSと非常に近い文法で書けるのが良い感じだ。しかもmod_rewriteを使うので、あたかも普通のCSSであるかのようにHTMLからlinkするだけで使えてしまうようだ。

PHP、Apache、mod_rewriteで動くので、普段その周辺で開発しているなら試してみてもいいかもしれない。

FIRというテクニックがもてはやされたのは少し前のことだ。これは<h1>などの文字要素を、見た目をキレイにしたいがためにCSSを使って画像に置き換えるテクニックだ。音声読み上げソフトに読まれない、画像がOFFのときにまったく何も表示されないなどの問題を抱えていたためいくつかの派生版が登場した。

今回紹介するのは、そのような派生版のひとつだ。

僕の知る限りすべての派生版に共通して言えることは、CSSをOFFにすると画像が出ないということ。ロゴなどの画像ならばCSSのOn/Offに関わらず表示させたい場合もあるはずだ。

そこでこのプチテクの登場。

特徴

• CSSのOn/Offに関わらず画像が表示される
• CSSがOnの場合は文字が隠れる
• 音声読み上げOK
• z-index を使う

サンプル
→サンプル

HTMLコード

<div id="header">
    <h1>
        <a href="index.html">
            <img src="logo.jpg" id="mir_cover" alt="ロゴ" />
            Image Replacement
        </a>
    </h1>
</div>

CSSコード

#header { height:60px; position:relative; }

h1 { height:60px; width:300px;
       /* \*/ overflow:hidden; /* */ }

h1 a   { position:absolute; top:0px; left:0px; z-index:1; }
#cover { position:absolute; top:0px; left:0px; z-index:2; }

簡単に言うと画像とテキストを並べて置き、画像をずらして文字の上に重ねるだけだ。

まずロゴを包括する要素に position:relative を指定する。これによって、その中で position:absolute を指定したときの基準位置が #header の四隅になる。

次に h1 だが、これは画像と同じ幅・高さを指定しておく。overflowは文字が画像の下から見えてしまわないようにするためだ。なお、MacIEでoverflow関連のバグがあり、要素がまったく表示されなかったりするらしいので、MacIEにだけ読ませないようハックしてある。

最後に h1 a と画像 #cover を重ね合わせてできあがり。

こういうテクニックを扱っているサイトを見ているとHTMLに手を加えずに実現するのが良いことだとされているようだが、残念ながらこのやり方ではその嗜好にはそぐわない。CSSが無効なときにどうこうしようという趣旨だからそこは勘弁してほしい。

関連リソース
アクセシビリティを更に高めるFIR
背景画像の上にテキストリンクを載せるFIR。

Image Replacement Tests
CSS画像置換テクのサンプルがイパーイ。

Image replacement decision grid
CSS画像置換テクの比較表。