Zoom Layout
Zoom Layoutなるものを最近海外のWeb Developerなサイトでちらほらみかけるようになったのだけれど、いろいろ見てるとどうやらアクセシビリティスタイルな機能（ズーム機能や各種ユーザースタイルシートの選択機能など）の無いUAでもアクセシビリティーを考慮してデカ字でハイコントラストなコンテンツを提供するCSSを用意しようぜ！的ノリっぽい。加えてlink要素にrev="zoom"なんて具合にアトリビュートを指定してmicroformatsっぽい。
先日とある人からWebブラウズに関するお話を伺った時に一番印象に残っているのは私はいつもインターネットの文字を最大にしている。それでもみにくい時はそこには欲しい情報がなかったんだと諦めている。
という言葉。僕自体フォントサイズに関しては、デザインとして扱えばいいと思うし。固定サイズでもサイト自体のターゲットに対してや、目的にかなっているのであれば問題ないと思っているのだけれど（といいつつこのサイトでは本文部分は指定せずユーザーの設定しているフォントサイズでの表示にしていますけれど。）、やっぱりやたらちいさくてさらに色が背景と区別つきにくいサイトとかは正直読むのはつらい。せっかくウェブサイトをはじめよう！と決めてコンテンツを発信しているのだから、それでもみにくい時はそこには欲しい情報がなかったんだと諦めている。
なんて思われたくないなあ。と思う訳です。
そんな事もあってZoom Layoutは100%サンセー！というわけではないけれど、なんだかちょっと良い動きじゃない？なんて思ったりもします。まめ文字反対！とかいう意思ではなく、決してでかい訳ではないサイズ指定していないだけのフォントを、『デカ文字。かっこわるい。（ゾノ）』なんて具合も少しは緩和されるとよいなあ。とすこし思うのです。
そんなわけで、ニペケもZoom Layoutを用意してみた
どのようなスタイルかによるとおもうけれど、現在指定しているCSSをインポートし、さらにハイコントラストで文字サイズを大きくするように書き足せば、簡単に作れてしまうものだと思います。簡単な例は以下。
@charset "UTF-8";
@import "default.css";
* {
background-image: none ! important;
background-color: black ! important;
color: white ! important;
}
body {
font-size: 150%;
}ニペケでもおなじような方法でzoom.cssとして用意してみました。それを代替えスタイルシートとして外部読み込みし、以下のブックマークレットを使って優先スタイルシートにするっちう方法。
<link rev="zoom" rel="alternate stylesheet" href="zoom.css" media="screen" type="text/css" title="Zoom Layout" />ブックマークレットは以下のZoom Layout This!をドラッグ&ドロップなどでBookmarkバーなどに追加。
このBookmarkletだとニペケだけでなく、他のサイトでもzoom.cssさえ用意すればZoom Layoutが導入できるわけです。Bookmarkletだという時点でアレだとかっていうのはまた今度にしたいと思います。