webサイトに画像を表示させるときに、HTMLやCSSで画像ファイルのパスを指定してを呼び出すのではなく、画像ファイルをテキスト形式にエンコードしてそれを直接ソースに記述するという方法があります。
たとえばCSSで画像を追加したいとき、普通は
h2::before { content:url(../images/file.png) }
のように、CSSファイルから挿入したい画像のファイルのパスを指定しますが、画像データをbase64という形式でテキスト化することにより以下のように書くことができます。
h2::before { content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALBJREFUeNpiZACCyorK/9LS0gzo4P379x/evn3rMGHihIsoEpMmTvr/588fDLx+/fr/3V3d7/Ny8/RhaplAxL9//xj+//+PgTk5ORmysrMEZGSkD+RkZ+sjafiLVcP3798Zdu7cySAtIyPAzMx8AKSWBdkGdODs7AyWA4Enjx8LENTAxsYGZzMyMjIQ1IAMYDYNUg2ijx4+ZOjp7sarARhKIEoc5HVxIOZnIA58AQgwABZHliIIeBqFAAAAAElFTkSuQmCC) }
これで、この場合は file.png という画像データをテキスト形式で記述したことになり、これ以上サーバに file.png のファイルを上げる必要もありません。
CSS/HTMLファイルに直接画像も記述してしまえばそこから"画像ファイルを呼び出す" というトラフィックがなくなるので、サーバ負荷の軽減・表示速度の向上に繋がる、というテクニックです。大きい画像はテキスト化するとえらいことになるので、リストのマーカー画像や繰り返しの背景素材のような小さな画像データに向いています。
まぁ、詳しくはその辺を丁寧に解説してるサイトを検索して読んでください(雑)。
CotEditor
本題は、「それをCotEditorでやるマクロを書いたから配布するよ」っていう方です。CotEditorのスクリプトメニューから実行するとファイルを選択するダイアログが出るので、挿入したい画像ファイルを選ぶとカーソル位置にbase64にエンコードされた画像データが挿入されます。Terminalを触ったりオンラインプログラムに頼ることなく、CotEditorだけで作業が完結するので、画像のテキスト埋め込みが気軽にできるようになるのではないでしょうか。
![[screen shot]](./_dat/image/2012/0414_topic)
screen shot: ダイアログから選択した画像をbase64エンコード
当サイトのCotEditor用マクロ配布ページからダウンロードできるようにしました。
画像データのbase64化というのは実はSVGでラスター画像を扱う上で重要な要素で、このスクリプトもSVG Suite用に書いたものが元なのですが、多分SVGをCotEditorで書くより画像のCSSファイル埋め込みの方が需要があると思われるので、単発の選択画像をbase64にエンコードするだけの版を作成しました1。良ければお使いください。
- SVG Suiteに入っている版は画像の縦横のサイズも拾った上で
<image>タグを生成します。
使用例
ふと思いついたのだが、figureとfigcaptionの使い方で、順序でセレクタを分ければうまいことCSSで矢印が付けられるのでは。
こんな風に。
CSS
figure figcaption:first-child:before { content:'▼' }
figure * + figcaption:before { content:'▲' }
つまり、figureの直後にfigcaptionが出てきたらその下に本体があるので▼、直後じゃなかったらその前に（つまり*のところに）本体があると判断して▲。今日日このくらいならどのブラウザでも表示できるはず。便宜上書くのに楽なので▲にしたがもちろん画像でも何でも良い。contentが嫌いなら、background + 画像 で。
うん、これは理にかなってていいな。気が向いたら採用しよう。
先日ドイツに行ったときに書店で見かけた本。要はオライリーが出してるHTMLとCSSのポケット・リファレンスなのだが、これがかなり良さそう。kurz & gut ってのはつまり short " good ってことです。小さくて薄い。サイズはA5変形くらいでしょうか？ 100ページ強。
別にドイツ語スラスラ読めるわけでもないし、パラパラっと見ただけですが、印象としてはなかなか。ギュっとまとまってる印象。別にプレビュー画面とか入らないし、要素とか属性とか、それとそれに対する数行の説明さえ書いてあればいい。あとは必要なことが全部載ってて且つ嘘が書いてないかだよなぁ。オライリーってこと考えると期待していい気もするけど。
リファレンスで一番大事なのは正しいこと、必要な情報の取りこぼしがないこと。あたりまえだけど、これがなかなか無い。
W3Cの仕様に沿った、内容の正しいHTMLやCSSのポケットサイズのリファレンス本って日本語のはないんですよ。結構探してるんだけど。
大藤本
もちろん大藤幹氏の『詳解 HTML & XHTML & CSS辞典』が最強なのですが、いかんせんデカい。持ち歩く気にはならないし、机の横に置いておいても結構スペースを取る。
ちょっと調べるときはこういうリファレンス本で、じっくり見たいときは大藤幹氏の『詳解〜』、というのが理想か。いや、本当にkurz & gutシリーズが内容的にも良かったら、『詳解〜』読まなくなっちゃうかもなぁ。
Oreillyの本はその堅苦しい雰囲気とともにカバーデザインが好き。載ってる動物もちょっとその本の内容と関係あるのだったり（なかったり）。
同じシリーズでPHPやらJavaScriptやらPerlやら色々あるみたい。日本語版も出ればいいのに。
別に先日買った『HTML&CSS ビジュアル・リファレンス』に不満があるからというわけではないが、機会があったので、『詳解HTML&XHTML&CSS辞典』の最新版を手に入れてみた。しかも、嬉しいことに今年の1月に改訂版が出たばかりらしい。
もちろん、これの数代前の旧版にあたる 『HTML&スタイルシート辞典』（2000年）は持っているのだが、流石にそろそろ5年前だ。新しいのに変えてもいいだろう。
考えてみるとこの『詳解 HTML/CSS辞典』シリーズはヴォルフロの前身サイトが1999年の9月にスタートした当時から使っている（そのときはHTML&JavaScriptだったけど）。ヴォルフロは『詳解〜』シリーズのおかげと言っても過言ではない。事実Strictなサイト作りに目覚めたきっかけはこの本だったし。最初に手にしたHTMLの教本が最高の良書だったことは今でも幸運だったと思っている。
さて改訂版。単純に自分が今まで持ってるのと比較して、一番感じるのはDTDが増えてること。前のはHTML 4.01とXHTML 1.0だったけど、それにXHTML 1.1とXHTML Basicが加わってる。XHTML 1.0もSecond Editionになってるらしい。あとHTMLパートの章末リファレンスが増えた。この辺の丁寧さは特にMdNのリファレンスをレビューした後のせいか感心する。というかこの仕様書への誠実さがこの『詳解〜』の魅力の全てとも言える。MdNのとか超適当だったもんなー。
あとは対応ブラウザが増えてるのが何気に便利。HTMLはそうでもないけど特にCSSはね。前のは流石に情報が古くて、もう最近は辞典見たときに対応ブラウザを確認することもなくなっちゃったんだけど、この最新データはやっぱり使える。text-shadowプロパティのブラウザ欄がSafariだけなのが誇らしい。改めてXHTMLだのCSSだのの実装状況見るとInternet Exproler酷すぎ。セキュリティー対策のIE7とか出してる場合じゃない。むしろ闇に葬って欲しい。
カニとオレンジとヒラメはフィッシュイーター
は健在w。
CD-ROMがなくなったのは良いと思う。値段もちょっとだけ安くなったみたいだし、本も広げやすいしね。単純にCD-ROM入ってても使わないだろうし。
別に根こそぎ作り直されてるわけじゃないけど着実に改良されていってる。解説丁寧だし。単なるHTML/CSSリファレンスとしての性格だけじゃなく、さり気に標準仕様のHTMLへの移行（とうかアクセシブルなサイト構築）を促してるのが好感（実際私はそれでいつの間にか啓蒙された）。且つ、それを認識した上でのブラウザのバグを使った裏ワザとかブラウザ独自拡張のCSSの使用には目くじらを立ててるわけではないし。いい本だなー。
しかし、もう少し、デザインが良くならないものか。今回表紙のデザインが大幅に変わったけど、この変わり方もよく分からない。この辺は（小手先だとしても）MdNの方が上手い。内容とか使い勝手に全く不満はないのでまぁいいのですが。やはりMdNの『HTML&CSS ビジュアル・リファレンス』とこの本を足して2で割ったリファレンスが出れば……。
あと、個人的な希望としてはこれのハンディー版が出て欲しい。『プチリファレンスHTML』ではなくて。"詳解" のハンディー版。画像とExampleのソースをけずってフォントサイズ下げて字を詰めたようなのくらい。しかしこれもこの本今でももう十分情報密度は濃いのでこれ以上は高望みな気がしますね。
この大藤氏の "詳解〜" シリーズは間違いなく良書です。前から言ってるけど、これと神崎氏の『ユニバーサル HTML/XHTML』さえあれば、HTMLとCSSでサイトつくる上で恐いものはない。
机の中を片付けてたらどうでも良さそうな図書カードが1,000円分出てきたので、それを足しにしてこれを機会に前に気にしていた『HTML&CSS ビジュアル・リファレンス』を購入してみる。
しつこいけど、大藤 幹氏の『HTML&スタイルシート辞典』があるのでリファレンスとして必要があるわけではなく、全くの興味本位で購入する。
で、感想。
やはりMdN。MdNにしてみりゃ頑張ってるんだけど、いまひとつピリッとしない。おしい。メイン使用にはできない。
marqeeとかブラウザ独自拡張要素を一部、他の要素と同列に載せてるのが気に入らない。一応 "ブラウザ独自" というアラートは付いてるし、カテゴリーも "etc..." に載っけてるけど（"etc..." がブラウザ独自だけのわけではない）。DTD別で定義されてるか否かとか書いてないし。というかそもそもXHTMLのことは書いてない。XHTMLの存在すら書いていない。HTML 4.01 Strict（とTransitional?）のことしか考えてません。このご時世XHTMLについて触れてないのはマズいと思うんだけど。そのくせrubyまわり載せてるし。DTDに関する説明も触り程度にしかないし。HTML 4.01 Framesetの説明も殆どない。さらにそれぞれの要素の説明も最低限しか書いてない。あと解説とか例にあんま非推奨属性使わないで欲しい。
逆に『詳解〜』にない良い所。非推奨属性に代わるCSSがある場合、代替プロパティとそのページが書いてある。これはStrictなコーディングを目指し始めた人には親切設計なのではないだろうか。それぞれの要素のページに要素の種類（ブロック/インライン）と包含要素がそれぞれの属性のページに書いてあるのも便利。でもタグの省略可能かどうかは個人的にはいらない。
CSSまわりに関しては、一番の不満はCSS Level.2全部のプロパティを同列に扱っていないこと。実質どのブラウザも実装していないようなプロパティのいくつかが巻末に押しやられてる。音声スタイルシートとか印刷まわりに関してはそれでもいいと思うけど、text-shadowなんかはSafari実装してるんだし、そうじゃなくてもちゃんと1ページ取って載せるべきだと思う。そしてCSSの方も各プロパティに関する説明文が殆どない。
不便なのはCSSが1つのチャプターにまとまっちゃってる。ページを開く時に検討がつけにくいです。
HTMLとは逆にCSSの方はブラウザ独自拡張を載せていない。量が多くて把握しきれないからか？filterとかいかにも載せそうなのにね。どうせブラウザ独自拡張載せるならブラウザ独自拡張はHTMLよりCSSの方を載せてくれた方が便利だった。もちろん両方なくていいけど。
全体的に、悪くはないんだけどツメが悪い、W3Cによるweb標準化以前の旧式レイアウト法から抜けきれてない、といった印象。頑張ってるのは分かるんだけど。結局現時点でHTML/CSSのリファレンスは秀和システムの大藤 幹氏の『詳解 HTML&XHTML&CSS辞典』のに敵うものはないのか。『詳解〜』に比べてこっちの方が良い面もあるけど、リファレンスの性格を考えると中の情報の正確さに信用が置けない（書いてないデータがある）ものを使う気には慣れない。大藤 幹氏への愛もあるけど。
本そのもののつくりについて言うと、紙面レイアウトが独特で情報量は多いんだけど見づらい。字も小さいし。けどこれは逆に慣れれば使いやすいのかもしれない。デザインは良い。カッコイイ。特に表紙。あとはこれに限らずリファレンス系でいつも思うんだけど、せっかくだからブラウザ表示例で表示されるサイトのデザインももっと良いのにすればいいのに。
ひたすらおしい本だ。
『詳解 HTML&XHTML&CSS辞典』と『HTML&CSS ビジュアル・リファレンス』のいいとこ取りをしたリファレンスが出れば最高。
時間があったので本屋のパソコンコーナーをうろうろしてたら、こんな本を見かける。いわゆるHTML（&CSS）辞典だ。
岡蔵 龍一（=大藤 幹）氏の『詳解 HTML&スタイルシート辞典』と神崎氏の『ユニバーサルHTML/XHTML』で間に合ってるし、基本的にあんまりHTMLモノの本は期待してないんだけど、パラパラっと見たら、これがなかなか良書かもしれない。細部まで読んでないので断言はできないのだが、W3Cの非推奨要素や属性はちゃんとアラートが付いてたり、それぞれの要素の属性になりうるモノのリストと説明がしてあったりと使い勝手は良さそう。DTDで内包可能な要素のリストは……あったかな？
出版元がMdNだといういのが気に入らないが（MdNって下らないTip集ばっかり出してません？）、MdNにしては書いてあることはマトモそうだ。デザインも奇麗だし（ページレイアウトはいささか癖があるが）扱いやすいと思う。
ちょっと欲しいが良かったとしても内容の質としては岡蔵 龍一氏の『詳解 HTML&スタイルシート辞典』と同程度だと思うので、わざわざ新しいページレイアウトを覚えるだけ無駄な気がする。プラス・アルファが欲しい。『詳解〜』より少々薄いのとあのデザインは確かに魅力的ではあるが……。
そろそろ、さらにもう1歩先を行って、W3C非推奨要素は載ってないHTML辞典が欲しい。だって自分使う限りfontだのbigだのの説明は必要ない。ちゃんとした本でもけっこうそういうのの解説が場所とってるし。XHTML 40.1 Strict 〜 XHTML 1.1までが理想。もちろんCSSもブラウザ独自拡張は載せない（いや、CSSのブラウザ独自拡張は載ってたら載ってたで便利なんだけど）。
あれかねぇ、XHTMLが2.0になってCSSが3になる頃じゃなとそういうのは望めないのかなぁ。実際現時点でこんな辞典需要少なそうだもんな。
いらないけどお金ある時に目についたら買っちゃいそうだなー。単純に本当に良書か調べてみたいってのもある。新しくHTML辞典買う人にはいいのかも……しれない。わかんないけど。
それ以上に『XHTML+CSSで書くホームページ構造デザインガイド』が気になる。大藤 幹著となるとね、気になっちゃうよね。
最近ずっとこれから逃げてきたのだが、そろそろ本気で戦わないといけないんじゃないだろうか。ブラウザ間におけるフォントサイズの違いである。
前から良く言っているようにヴォルフロはSafariを基準にサイトデザインを行っているが、Safariはフォントサイズを相対指定すると、他のブラウザよりちょっとデカく表示される気がするのだ。なので、Safariで丁度いいな、と思ってるっていうことは、実は、他のブラウザから見るとちょっと小さいのだ。Safariは細かくサイズ調整をしてくれるからそのせいかな？とも思うんだけど、それにしても小さい気がする。なんだかよく分からん。最近ちょっとブラウザごとのフォント指定についてこんがらがってるので、考えをまとめるためにちゃんと検証してココに書いてみよう、と。
今回は、
- Safari 1.2
- Internet Explorer 5.2.2（以下、MSIE 5.2）
- Opera 7.5
- Firefox 0.8
の4つのブラウザについて比較をしてみる。一応現在のMacの主要ブラウザではないだろうか。Windowsまでは手が回らないので割愛。
現在、ヴォルフロでは、標準テキストのフォントを、
font : 80%/1.3 'Hiragino Kaku Gothic Pro','Osaka','ＭＳ Ｐゴシック',sans-serif
と、指定している。つまり、フォントサイズは
font-size : 80%
である。んで、DTDはXHTML 1.0 Strictにしてxml宣言は省いているので、どのブラウザでも標準モードで表示されているはずだ。
さらに、私は、ブラウザ側の表示設定は極力デフォルトのままにしている。この状態でサンプルテキストを各ブラウザで表示、ついでにブラウザ側の設定サイズもチェック。以下結果。ブラウザ名の右側のカッコ内がブラウザのデフォルト指定。
- Safari 1.2（ヒラギノ明朝 Pro 16）
- MSIE 5.2（ヒラギノ角ゴ Pro W3, 16/96dpi）
- Opera 7.5（Times, 16）
- Firefox 0.8（ヒラギノ角ゴ Pro W3, 14px）
改めて見てみたら意外とFirefox以外はみんなデフォルトが16px。Firefoxだけが14pxだったみたい。そこで、一時的にFirefoxの標準フォントサイズを16pxに変えてみると、MSIE、及びOperaと全く同じになった。
これだけだと分かりにくいので、"東京"部分だけを拡大して比較。ちなみにこの「東京発信情報が日本のオピニオン」ってのは昔やってたテレバイダーってTV番組のスローガンです。
やっぱりSafariがデカイ。しかし、それ以外は意外とみんな同じじゃないか。てことは、単純にSafariの計算の仕方の違いらしい。
先にも書いた通り、SafariはOS Xのフォントのアンチエイリアス力を活かしてか小数点以下まで正確にフォントサイズを調整してくれる。対してMSIEなんかは小数点以下は切り捨てて考える。他のブラウザもMSIEと同じになったということは、彼らも小数点以下は切り捨てスタイルらしい（Netscapeはそうでも無かった気がするんだけどなぁ。
ヴォルフロは今80%なんていう大雑把なサイズ指定をしている。もしや、と思い正確に計算すると
16px x 0.80 = 12.8px
となり、ほぼ13px。で、且つ13px未満。これだ。これのおかげでSafariは普通に12.8pxのサイズで表示され、他のブラウザだと小数点以下を切り捨てて12pxで表示されていた。12.8pxなら13pxの方が近い。っつーこで、13pxで揃えよう。13pxを超えるには、
16px x 0.82 = 13.12px
つまり、82%にすれば良いらしい。ってことでやってみる。
MSIEは相変わらずだけど（MSIEは12pxの次が14px）、OperaとFirefoxは13pxにしてくれた。これでSafariとOperaとFirefoxは同じフォントサイズになった様だ。
しかし、他のブラウザに比べてSafariは明らかにフォントが細い。これもOS Xの素敵アンチエイリアス効果か？ これのおかげで同じ13pxでもSafariの方が大きく見える。ムムム、こんなところにも視覚的トリックがあったとは（？。
まぁ、MSIE（特にMacの）は相手にしてないんで、それ以外の3つで同じくらいに見えるなら許容範囲。Firefoxはデフォルトが14pxっぽいから同じに見えるわけじゃないけど、他のMozilla系ブラウザの中にはデフォが16pxのもあるし。これ以上はめんどくさいし。
やたら色々やった割には、結果はすごくまっとうってか当たり前だった……。しかも汎用性に欠ける内容。まぁ、考えがまとめられたんだから良いんだけど。The 自己満足。しいていうなら、13pxくらいに見せたいならfont-size:82%にするといいよっていうくらいでしょうか？ これでさえWindowsではどうなのか知らんし。ここまで律儀に文章を読み進めた人はガッカリだ。長い割に内容がない。
そもそも相対指定の%なのにpxで比較する事自体がおかしいっつー話もあるしね。
それにしてもSafariのテキスト表示はキレイです。特にボールドがかかった文字。Safariに馴れるとホント他のブラウザが使えない。Safariすごい。Safari偉い。
っつーことで、ヴォルフロは今日からフォントサイズ82%になります。4649。
Safari以外のブラウザで字が太いのは、ヒラギノじゃなくてOsakaで表示されてるからでした。分かっててやってたはずなのに忘れてた。自分がアホすぎる orz...
あまりにもダサイのでしばらく晒しときます。
CSSで組んであるW3C信者のサイトっていかにもなヤツが多くてあんましすきじゃなかったんですよ。某のじﾀﾝとか、ムダに多いCSS切り替えとか。
が、ちょっと私的にかなりクるサイトを見つけちゃいました。URLはちょっとあれなんで伏せときますが、…へこみます。美しいレイアウト、ユーザビリティの良さ。畜生、これはもうヴォルフロもフレーム廃止するっきゃない。
いや別にさぁ、自分が大して趣味いいわけじゃないのは分かってるし、そんなよく分からない机上の空論より対象ブラウザのヴァージョン下げた方がよっぽどアクセシビリティの理にかなっているのは分かってるのだけど。でも何かCSSレイアウトに惹かれるのです。理屈っぽいところかなぁ？ 実際やろうと思ったら、非常にめんどくさいのと、SSIとか、どうせやるなら自作CGIプログラムとか、対応ブラウザとか色々問題・課題がでてくるのですが。それより自分のデザインセンスがイマイチなんだよなぁ。自分であらためてヴォルフロとか見ると、WebデザインだCSSだと言ってる割に、このダサさはなんなんだろう？と言いたくなる。線引きゃいいってもんじゃないのだよ。あー、もう、どうしたらいいんでしょう？（答：先にへっぽこコンテンツをどうにかしなさい）
ところで、そういうサイトのソース見ると、結構皆さんxml宣言してるんですけど、…大丈夫なんですか？ あの、「文頭でxml宣言をすると、win IE 6.0では後方互換モードと解釈される」ていうのは。あれなのかなぁ、標準モードでも後方互換モードでも問題なく見られるようにCSSもちゃんと組んでるんかなぁ。不思議。Macで見てる分には標準モードだからいいんだけど。
いやでも、最近はCSSで美しいサイト増えてきてますねぇ。ほえー。こーゆーの見てるとさっさとヴォルフロも模様替えしたくなる。