本書の179ページでJavaScriptを使わないでマウスオーバーをする方法を解説しましたが、本書ではテキストの背景に画像を貼付ける方法をとっていました。アクセシビリティやメンテナンスのしやすさを考えるとこういったテクニックは非常に使えるのですが、場合によっては画像の文字を使ってビジュアル的によりおもしろいデザインにしたいときもあります。そういった場合だと本書で紹介したテクニックでは少し物足りないということになります。そこで今回は本書のように＜UL＞でテキストリストを保持しつつ画像を使ったナビゲーションの作り方を紹介します。
SSSB：マウスオーバーデモ
デモではCSSもダウンロード出来るので詳しくはそちらを見てほしいですが、キーポイントになるのは以下の部分になります。
ul#navigation li a {
height: 26px;
position: absolute;
overflow: hidden;
padding: 26px 0 0 0;
text-indent: -100em;
text-decoration: none;
top: 0;
width: 130px;
}動作確認はWindows版IE5.5+, Mozilla, Opera7.5, Mac版IE5.2, Safariで行っています。今回はpositionを使ったテクニックを紹介しましたが、他にも方法はあるのでいろいろ試行錯誤してみると良いかもしれませんね。また、今回のテクニックはCSSがONにしてあって、画像を表示させないというケースではナビゲーションが表示されなくなるので、高いアクセシビリティが要求される場合は他の方法を考えるか、テキストで表現したほうが良いと思います。
Douglas BowmanさんといえばWired Newsのリデザインから始まり、最近リニューアルされたBlogger.comにも携わり、さらにAppleのCSS化のコンサル業にもあたっている正にCSSデザイナーの代名詞と言える方だと思います。彼のBlogであるStop Designは要チェックサイトであるわけですが、彼はBlogエントリーとは他にときどきWebデザインに関する記事も執筆・公開しています。
先月、Bowman氏はThrowing Tables Out the Windowという記事をサイトに公開。TableデザインのデメリットとCSSデザインにする意味を改めて提示したわけですが、どうやら日本語訳も公開されているみたいです。和訳を担当されたMinuteDesignさん、ご苦労様です。
MinuteDesign：テーブルは窓から投げ捨てろ
英語だから読む機会がなかったという方はぜひ読んでみると良いと思います。これから大手企業もどんどんCSSサイトになっていくと思いますが、企画書にこういったアイデアを盛り込むと良い切っ掛けを生むかもしれませんね。
CSSで定義するスタイルが多くなるとどうしてもファイルサイズが大きくなるのは止む終えないことだと思います。このエントリーで紹介した方法でファイルサイズを小さくすることは可能ですが、ある意味裏技みたいな方法なので実用性が高いとは少し言い難いと思います。
CSSのファイルサイズを減らすのでまず出来るのは、プロパティの記述方法を短くすることだと思います。例えば、フォントの記述方法も
font-size: 90%;と、切り分けて書かなくても
line-height: 180%;
font-family: arial, "Lucida Sans", "Futura", sans-serif;
font: 90%/180% arial, "Lucida Sans", "Futura", sans-serif;というふうに１行で書くことが可能です。その他「list」や「background」も１行で短く書くことが可能です。こういう積み重ねがファイルサイズを小さくすることもあります。 今回紹介するのは長くなってしまったCSSをクリックひとつで短く最適化してくれるサイトです。
現存のCSSを最適化してくれます。サーバーに置いてあるCSSファイル又はCSSを直接書き込んで最適化をします。日本語は文字化けしてしまいますし、ハックがあるとハックのコードまで最適化してしまいますが。使えないことないですね。CSSのコードの確認としても使えますし、まだ「１行書き」に慣れてない方はここでサクッと変換してしまえば良いのではないでしょうか。
以前このエントリーで、FirefoxのWeb Developer Toolに匹敵する IE 専用のツールバーを紹介しました。どうやら、先日アップデートされたみたいなので再度紹介したいと思います。
AIS：Web Accessibility Toolbar
日本語版はこちらからダウンロードしてください。
以前はBookmarkletの集合体というイメージが強かったツールバーでしたが、今回は安定性も増ししていますしインターフェイスも良くなっているような気がします。また、ホットキーを設定出来るようになったのでキーボードショートカットでサクッとCSSをオフにする・・・なんて出来るようになりました。ActiveXのオン／オフのようなIEの環境設定画面でしか出来なかったこともツールバーから出来るようになったみたいですね。名前から分かるようにCSSのツールというより、アクセシビリティチェックのソフトとしても使えるので IE ユーザーはぜひダウンロードしてみてはいかがでしょうか。
フォントは相対。アクセシビリティを考慮するのであれば、それはある意味『鉄則』だと思います。とはいうもののOperaやMozillaを使えばたとえ「font-size: 12px」のように絶対値（この例ではピクセル）を使って定義してあってもシッカリ拡大／縮小してくれます。それに対して Windows版IE は絶対値の拡大／縮小がサポートされていません。シェアの多い IE を無視してまで絶対値は使えない・・・というのが相対を勧める一般的な理由だと思います。
しかし、絶対値でも拡大する方法があるみたいです。IEにはIEでしか動作しない独自のCSS属性がありますが、その中にZoomというのがあります。これは文字通りサイトをズームしてくれる機能で、絶対値で設定した文字でも関係なく拡大してくれます。これのユニークなところは文字だけでなく画像やスクロールバーまで拡大してしまうところでしょうか。
書き方は簡単。スタイルシートの一番最初に以下のコードを記述します。
* {zoom: 1.0;}単位はパーセントでもOKで、1.0とはつまり100%のこと・・・つまり、通常サイズといったところでしょうか。この値を2.0にすればレイアウト全体が２倍表示されます。このzoom属性の数値をマニュアルなりJavaScriptなどで変えてあげることでレイアウトを拡大させることが可能になります。
サクッとBookmarkletが作りたい方は以下のコードをコピペ。こちらは使用したら全体が200%になります。
javascript:(function(){document.body.style.zoom="200%";}())またはBookmarklet Blogさんが作ったZoom表示Bookmarkletを使えばお好みの倍率で拡大することが出来ます。
もちろん、これはW3Cの標準規格でもありませんしIEの独自規格ということで、激しくオススメ！というわけではありません。どちらかというと相対値を使うのが無難だといったらその通りだと思います。しかし、IEにある隠れたアクセシビリティ機能という意味では非常に興味深いですし、zoom属性を加えたことによって他のブラウザに支障が起こるというわけでもないので予備知識として知っておくのも良いかもしれませんね。