©マークを実体参照で記述することの必要性の話。
思想があってCreative Commonsを使ってる場合なんかを除き、慣例として、サイトのフッターにはコピーライト表記を入れることがほとんどだろう。その際コピーライトマーク © は実体参照で入れることになっている。
例えばこんな風に。
<p>©2013 1024jp</p>
もしくは、XMLで書いている場合、文字実体参照が使えないことに気付き、数値文字参照で©マークを呼び出しているかもしれない。となると、こう。
<p>©2013 1024jp</p>
いずれにせよ、文字参照だ。
しかし、そもそもなぜ©は文字参照で書かれるのだろう。「それは、©が機種依存文字だから」である。まぁ、そう覚えたよね、最初にHTML勉強した頃。丸付き数字①を使って知らない人に怒られたり。あぁ、機種依存文字って、なんてマナー違反。けどさ、機種依存文字ってなんだっけ？
機種依存文字 ©
たとえば©という文字はShift_JISという文字コードに定義されていない。でも©使いたいよ！ってことで各OSが勝手にShift_JISに©を押し込めてマッピングしたわけなんだけど、それぞれ独自にやったもんだからその位置が異なる。だからMacで©で入力したつもりでもWindowsではそこに違う文字があるもんだから文字化けしたりする。これが機種依存文字と呼ばれるゆえんである。このような、コンピュータ上では普通に使えるけどweb上で他の人とやり取りするときには気をつけるべき記号というのが当時沢山あり、その一つが©であった。
つまりこれは、文字コードに依存した話なのである。それはShift_JISやLaten-1みたいな過去の標準化が進む前の領域の少ない文字コードでは問題であった。
UTF-8における ©
しかし、月日も世紀も変わり、なんらかのしがらみやこだわりを引きずってない場合、今日ほとんどのHTMLはUTF-8で書かれていると思う。UTF-8なら以前はわざわざ実体参照を使う必要があったウムラウト文字なんかも直接記述できる。便利な時代である。でも©マークは依然として参照文字。
で、そんなことがふと気になって調べたらこんなやり取りを見つけた。
要点としてはここ。
If you are using UTF-8 as the character encoding for your document, you can, within the raw HTML source, write a copyright symbol just as-is.
ですよねー。
つまり、きょうび UTF-8 でコンテンツを記述してるなら、わざわざ参照なんてしなくても直接 © を書けばいいじゃん、って話なのだ。これで十分なのだ。
<p>©2013 1024jp</p>
もちろん引き続き文字参照を使っても困ることはないのだが、特に数値文字参照はソースの可読性が下がるし、別に必要のない手続きだということになる。もう昔のように文中の café をわざわざ café と書くようなことはしないのと同様、© を © と書く必要もないのだ。
どうせUTF-8使ってんでしょ？ もう、©マークは直接書こうぜ。
使用例
ふと思いついたのだが、figureとfigcaptionの使い方で、順序でセレクタを分ければうまいことCSSで矢印が付けられるのでは。
こんな風に。
CSS
figure figcaption:first-child:before { content:'▼' }
figure * + figcaption:before { content:'▲' }
つまり、figureの直後にfigcaptionが出てきたらその下に本体があるので▼、直後じゃなかったらその前に（つまり*のところに）本体があると判断して▲。今日日このくらいならどのブラウザでも表示できるはず。便宜上書くのに楽なので▲にしたがもちろん画像でも何でも良い。contentが嫌いなら、background + 画像 で。
うん、これは理にかなってていいな。気が向いたら採用しよう。
![[サイトロゴ]](./_dat/image/2011/0609_wf)
私としては、今回のリニューアルの一番の目玉は、全ページをXHTML1.0 StrictからHTML5に書き換えたことです。残念ながら外から見れば何も変わらないのですが、同時にストリクﾀﾝとしては気合いが入るところ。それにPHPと違ってソースを見れば見られるのでそれなりにやりがいがあります（いや、普通は見ねぇよ、ってのは置いておいて。
ってことで、今日はおおいにHTML/CSS、ついでにちょっとJavaScriptのコーディングの話をします。
read more
今日初めて知ったのですが、版のHTML5のドラフトでrel属性のキーワードが複数削除されています。（おそらく）からW3CのMarkup Validatorに反映されており、それで気付きました。
5.2. Changes from 13 January 2011 to 5 April 2011
- The
rel keywords archives, up,
last, index, first and related
synonyms have been dropped.
HTML5 differences from HTML4 -5.2. Changes from 13 January 2011 to 5 April 2011より抜粋
削除対象になったのはarchives, up, last, index, firstなど、いずれも関連ページを考える上で重要なキーワードであると思います（まぁ、archivesは置いておいて。
またこれらはHTML4/XHTML1.0の頃から慣習的に使われており、OperaやiCabなどのrel属性を読むUAでは既に実装されています。
Operaのrel属性を利用したナビゲーションバー
iCabのスタンダードリンクツールバー
read more
先日ドイツに行ったときに書店で見かけた本。要はオライリーが出してる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で書くホームページ構造デザインガイド』が気になる。大藤 幹著となるとね、気になっちゃうよね。
半年くらいweb制作にブランクがあったので、初心にかえって久しぶりに神崎氏の『ユニバーサル HTML/XHTML』を読む。流石。楽しい。そして初心にかえれる。
web制作における愛読書は超定番ながら岡蔵 龍一氏の『詳解HTML&スタイルシート辞典』とこの『ユニバーサル HTML/XHTML』なのです。しかし、岡蔵氏のはあくまで "辞典" であり、読み物ではない。それに、内容の割に大きすぎるのではないかなどと思う。もうすこしシェイプアップして欲しい。リファレンスには良い。対して、この『ユニバーサル HTML/XHTML』はweb制作指南書として十分な性格を持っている。教科書として最適だ。
なにがしたいのかというと、この本をサイト制作をしている全ての人に薦めたいのである。押し付け。特に独学でタグ打ちしてる人、一度は読む価値がある。web制作の基本が正しく分かりやすく書いてある。読み物としても十分。別にStrictにしろとかではなく。そうするか否かはこれを読んでから決めれば良い。別にしなくてもよい。メインの内容としてはやはりHTMLは文章構造に徹して修飾はCSSで云々……て感じなのですが、それ抜きにしても良いです。web制作プランの進め方やユーザビリティについての記述もあります。今まで自分が持って知識のどれが間違っていて、どれが正しいかをみわけられる（この本の100%が正しい訳ではもちろんないが）。
これ読むとすごいサイトの構成とか考え直したくなる。web制作に向けて無駄にやる気が出ます。とにかく絶対ためになると自信を持って言える本です。
ちなみに、いつも思うのだがヴォルフロの一番の欠点は内容がないことじゃないかと思う。致命的だけど。いくらユーザビリティだStrict HTMLだと頑張ったところで提供する情報がスカスカなのだから救いようがない。
多分ALFEEファンサイトでここまでHTMLオタというかストリクター（これ、自分に使うには恥ずかしすぎる）なのはウチのサイトだけだと思うのですが…。けっこう孤独です。もしALFEEサイトでヴォルフロ以外にHTMLオタなサイトを知ってる人がいたらこっそり私に教えると、その人は良いことがあると思う。または、ALFEEファンサイトをお持ちの方は自分のサイトをStrictに仕上げると、その人にも幸福が訪れると思う。幸福、例えばアクセス数が減ったり…（ダメじゃん）。いや、実際減るよ、あんた。
でもそもそも私がStrict HTML + CSSに目覚めたのって、単に「もっと細かいレイアウトがしたいから」ってだけなんです。CSSだとややこしいテーブルを組むことなく1px単位で各要素の配置ができる。CSSの長所を存分に生かそうと思ったらHTMLもStrictにしなければならない。そんだけ。それに細かいところが気になるA型気質と元々HTMLのリファレンスに使ってたのが大藤 幹氏（岡蔵 龍一）の辞典だったから、と。PageMillを辞めた時期とStrict HTMLの思想が広まってきた時期が重なったってのもあるかもしれない。
現在でもだっっっっさいCSS啓蒙サイトがたくさんありますが、普通の人、あんなの見て本気でCSSやりたいなんて思わないよ。とても読む気のなくなる旧仮名遣いとレイアウトで、ユーザビリティを叫ばれてもねぇ…。
CSSを切ってStrictHTMLを読むことは、舞台を見るのに台本だけを読むのに似てる…、気がする。
まぁウチのサイトも思いっきり古いブラウザ使ってる人になんの考慮もしてないわけですが（「CSS切ったら？」って言う程度）、Windows IEのみで確認をしておりますので、他のブラウザでのレイアウトは保証しません。
とか言ってるサイトより数倍イイ（と少なくても私は思う）わけで。ブラウザ指定はまだ許す。OSを指定するなよ「Macはどうなるんだ、ぁあん？？」と、マイノリティーなひねくれマカーは思ってしまうのです。
実際、「Netscape対応」だの「Safari対応」だの言ってみても、ビジターの９割９分９厘はIE使いだという哀しい現実が横たわっているだけなので。たまに「お、Netscape 5.xか」とか思ったら自分だし。