Au Japon, et en japonais dans le texte, le bel et enignatique site Sophia nous reference... mais a quel propos ?
ECOLEFOURS.COM - Credits et remerciements - より
なんでリンクされてんだ? とのこと。確かに自分のサイトが東洋の謎の文字化けサイトからリンクされていたら気になるかも。
しかし、なんでまた欧米人はArialを好むのだろう。こちらのとは違うフォントなんだろうか。
Peace MEDIUMの、紺一色の美しいパッケージを廃止したJTはなにを考えているのだろう。LIGHTと間違えて買ってしまうじゃないか。吸い終わってから気づく自分も終っているが。
懐かしみつつ配色を変更。
私が顔文字を使わなくなったのは、顔文字を使っていると、言い訳と感想文ばかりになってしまうからである。
私は、どちらかと言えば、マスコミなんぞより成人を信じる。
ブラウザのデフォルトスタイルのみでサイトマップを使ったときの表示の速さと言ったらもう。1秒かからない。0.5秒くらい（Windows98 + IE6）。
てっきりDOMの処理の遅さが原因かとばかり思っていたら、とんでもない。自作CSSが原因じゃないの。嬉しいやら悲しいやら。いや改善できる見込みがある分だけマシか。
とりあえず配置関係が怪しいと思ってpositionプロパティを消去してみたら1秒短くなった。それでもまだ遅いので、margin, padding関係も消去してみたが変化なし。どうも、決定的にブラウザに負担をかけるような部分が存在しているらしい。これはサイトマップ抜きにしても見直す必要がありそうだ。
if(window.opera) ..
Opera's specifications - Javascript and JScript objects (英語)
pre{ white-space:-pre-wrap }
/* content boxをoverした際折り返し */
私が辞書を引き引きフランス語を解読し、Pascaleさんが"my teacher"を介して私の謎な英語を仏訳するという奇妙なやりとりになってしまった。
フランス語なんてサッパリなんだけど、あちらのCSSユーザーの情報を聞き出したいという欲が出てきて、「読むだけなら何とか」等と返事をしてしまうという寸法。
用件は「文字化けして読めない」とのことで、スクリーンショット(35kb)が添付されてきた。その画像を見たところ、属性セレクタを解釈しているようなのでIEの線は消えた。ページ内検索窓とサイト検索窓、フォントサイズ変更用のセレクトボックス、それと、絵柄は違うもののアドレスバーの左側に4つのアイコンがあるところをみると、Operaだと思われる。などと推理してみた。やっぱりOperaは欧米では人気なんだろうか。
link rel="sitemap" はずっと前から夢想していた。Nielsen博士に頑張ってくださいと言いたい。私は無力。所詮素人の実験
の域を出ないのだ。
フランス人のPascaleさんからメールが来た。海外のCSSでリンクしたサイトの方だ。「フランス語わかりますか」という内容。
……適当にサイト名をフランス語にしてしまったツケが、今、ここに！
む、「再利用」の語義が違いますね。僕が11月16日に使った「再利用」とは、ソースに修正加筆をすることです。
http://homepage1.nifty.com/~yu/diary/200112c.html#2601b より
この主張によると「再利用性」は「メンテナンス性」と解釈できます。私はこれは特殊な語義であるとみていました。
ここでの「再利用性と互換性」とは、作品を構成する部品のひとつひとつがそれぞれ単独でも高い性能を持っていて、それを抜き出して別の部品と組み合わせたときも有効に働くことです。いくつかの部品を失っても、残りの部分が性能を保つことです。他の作品への応用がきくことです。
http://homepage1.nifty.com/~yu/diary/200201a.html#0501d より
この場合、「メンテナンス性」とは無関係ですね。因みに私の解釈はこれと同じです（一般的に定義がはっきりしている「互換性」の要素は除去済み）。
語義がコロコロと変化してしまうような場合、観念に過ぎない可能性が高いです。その概念について現実との葛藤をしたことがないので、はっきりとした認識を持っておらず、単に議論への献花にしてしまう人に良く出くわします。
私が物事を考える時に最も気をつけているのが、この観念という奴ですが、真剣であれば生じないものです。議論相手との定義の違いなどがあっても、お互い真剣ならばコンテクストで分かるのが常ですし。
ふと、私がOperaで使用しているユーザスタイルシートを公開してみたりします。
ようは流用なのですが。
使わせて頂いたところ、かなり面白いことになっていて驚きました。自分のサイトを見たときは「謎な感じ」になるだけで全然気づきませんでしたが、これは物理タグ視覚化シートですか。
韓国のCSSユーザーを探していたところ、CSS1 specの韓国訳を見つけました。なんかレイアウトに「特有の臭い」がしたのでlintにかけてみたところ……。
http://trio.co.kr/webrefer/css1/rec-css1.html を HTML4.01 Transitional としてチェックしました。
1000個のエラーがありました。このHTMLは -390点です。
http://trio.co.kr/webrefer/css1/rec-css1.html より
訳、というか、改竄ですね。で、これはきっと非公式なものなのだろうと思ってW3CのTranslations of the CSS2 Recommendation (英語)から辿って信頼できそうなものを探してみたのですが、なんか真っ白なページが出てきたんです。ソースを見てみるとこの2行のみ。
<Script Language="Javascript" src="autogo.js"></Script>
<Script Language='Javascript'>Fframe('webrefer/css2/css2idx.html');</Script>
まあそういうわけで、JavaScriptをオンにしてリロードしてみると、凄いことになっておりまして。
検索で見つけたかのページはフレームの断片に過ぎなかったというオチでした。
*Macintoshをご使用している場合、Web ページの表示の一部、または全部が文字化けして読めなくなることがあります。ご了承ください。
メンバーサービス＠J-COM より
誰が了承
するんだか。なにがご使用している場合
だ。もう駄目だこの会社。
バグ修正と目次機能の追加。
動作が重いしバグが頻発するのでMozilla対応は止めた。折角だからinnerTextメソッドも利用。
後は各リストとセクションの同期を図って機能面の調整は終了。次は死ぬほど汚いコードと、トンデモUIをなんとか。
陣取り + 罠の意味の造語、Jintrickですが、ゲーム会社に先を越されていたようで。
"押し出しジントリック"に混じって、 "ジントリック・スメタナ"という人名も。
とのことで調べてみたところ、この押し出しジントリックは、英語では「Oshidashi Zintrick」。スペル的にはセーフでした。スメタナさんはチェコの人らしいのですがスペルはサッパリ分からず。
J好きで良かった。そう言えばJCookieというネーミングセンスには感動しました。どうしてパクらずにいられよう（違）。例外としてJR、JTは不許可。
ちなみに非公開私的リンク集「Jintlinx」というのがローカルに在ります。
イタリックのh1が、「この届かぬ想い」という悲壮な雰囲気を出していて好きだったのです。というわけで何となく追加させて頂きました。相変わらずIE5.5以上でしか実現できませんが、CSSを幾ら加えてもJavaScriptファイルが膨らむことの無い方法を採用しているので仕方ありません。これは、過去作ったCSSは一切破棄する必要は無いという理念に基づきます。
なほ、このスタイルシートは、HTML文書の記述に多少でも拙いところがあると、その「誤」を誇張するやうに作成されてゐます。ユーザスタイルシートとして用ゐると、多くのサイトの文書が、いかに不適切な形で記述されてゐるかを理解するのに役立ちます。或意味、嫌みたらしいスタイルシートです。
「言葉 言葉 言葉」スタイルシートギャラリー:ALLNET最終版 より
とのこと。切り替え用CSSに加えるということは、一種の挑戦、または試練ですね。……emが恐ろしく強調されて一部のページはチラシみたいになってしまいます。
昨日、FTP接続できなかったのをサーバのせいにして諦めていたら、FireWallでブロックしていたというオチ。
ちょっと日本語を喋れるアメリカ人に、「パソコン」と言うと爆笑されるので注意してください。言ってしまった場合、「パソコンって何？」と聞かれる事になりますが、「PCのことです」等と答えてはなりません。適当にごまかして話題を一端クリアしましょう。
新しいページデザインを作成しようと考えています。自分を追い込むために今までのスタイルシートを破棄し、ごくごく単純なスタイルを暫定的に適用してあります。5分もかからずに書いたスタイルで以前より読み易くなってしまい、頭を抱えてしまいました。
ALT="Something Alternative" より
簡単に作ったつもりのスタイルというのは、実は、それほど簡単な代物ではないのではないかとふと思った。つまりブラウザのデフォルトスタイルは、殺伐としてはいるが完成度は低くない、と。
だからデフォルトスタイルの特徴をより強調し、配色を整え、フォントを選んでやる、という程度で済ませたほうが無難ということは良くある。
海外のCSSというコンテンツを補完するため、フランスのCSSユーザを探していたところ、Navigateurs XML (仏語)というサイトに、Netscape Communicator5.0というリンクを発見。
Netscape Communicator: Next-generation Netscape Navigator 'Aurora' Overview (英語)。これが幻のNC5.0なのだろうか。
A link has two ends -- called anchors -- and a direction. The link starts at the "source" anchor and points to the "destination" anchor, which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.).
終点アンカーはどんなWebリソースでも良い
、と書かれているが、リソースでなくてはならないとは書かれていないので、文書中の特定の「位置」に飛ばす目的でアンカーを用いるのも、残念ながら間違いとは言えない。
しかし、ハイパーリンクの概念およびマークアップの理念に一貫性を持たせたいのなら、「文書内のある位置に飛ばす」という意図でアンカーを用いるべきではないだろう。あくまで、「リソースとしての文書内要素を指し示す」のに用いるべきだ。「飛んだ」というのは、User Agentがそのリソースを取ってきた1つの結果に過ぎないと捉えるべき。
何が問題なのか。
「page top」なるアンカーで、文書の最上部に移動させることを目的とした場合、以下のような問題がある。
つまり、文書内のある箇所に「飛ばす」という考え方は、文法違反を後押しするのである。マークアップも極めて例外的で、プレゼンテーションに関する要素と、文書構造に関する要素をごっちゃにしてHTML文書を作成することになり、混乱の元でもある。
そうして、「validなHTMLは難しい」とか言われる事になるのだ。「文書の最上部に終点アンカーを設けたいだけなのに、なぜpタグで囲まなければならないのか」となるわけだが、この「飛ばす」という考え方では理解し辛いに違いない。
「page top」が悪いと言いたいのではなく、「アンカー＝ジャンプ」という考え方が奇天烈だと言いたいのだ。
因みに、「page top」なるものは明らかにUser Agentの仕事だと認識している。極めて一般的で汎用的なナビゲーションの一種だからだ。
まとめ。
bodyのheightをpxで指定htmlのoverflowをhiddenに指定（※1）htmlのoverflowをvisibleに指定（※2）bodyのoverflowで消すと、元に戻せないような気が。autoにすると、バグるような気が。Mozilla0.9.7で読書モードを使う（ページをめくる）と表示が崩れるのは完全にバグらしい。DOM Inspectorを使って逐一ノードをクリックすると、順番に表示が直っていくんだもの（笑）。Netscape6.2は全然問題ない訳だし、とりあえず無視ということで。
…と、思ったら、見出しのpositionをrelativeにしていたのが一応バグ発生の必要条件の一つらしいことが分かったので無視は止め。
通常時「Link 1」、:hover時「+ Link 1 +」となるようなHTMLとCSSの「あわせ技」について。
/* CSS */
A { color:#cc66ff; text-decoration:none }
A:hover { color:#ff00cc }
.blue { color:#6633ff }
.white { color:#ffffff }
/* HTML */
<A href="foo" class="white">+ <SPAN class="blue">Link 1</SPAN> +</A>
極端な例を挙げますと、音声ブラウザでは、このようなリンクを一々「プラス（+）」とか(*を使ったなら）「アスタリスク」とか読み上げてしまう可能性があります。
CSSは現状まだ実用上非力ですが、InternetExplorerがきちんとサポートするようになれば「+ link + 」のような方法は以下のようなより良い方法で可能になります。現状Mozillaというブラウザでしか確認できませんが。
/* CSS */
a{
color:#cc66ff;
text-decoration:none;
}
a:before{
content:"+ ";
color:#fff; /* 背景色 */
}
a:after{
content:" +";
color:#fff; /* 背景色 */
}
a:hover:before{
color:blue;
}
a:hover:after{
color:blue;
}
/* HTML */
<a href="foo">Link 1</a>
これならHTMLは極めてシンプルになり、CSSを変更すれば装飾方法は後から幾らでも変更できます。装飾を変更しただけでHTMLファイルが更新されてしまうことも無ければ、「プラス」と読み上げられることもありません。
読書モードという機能を追加しました。ページ右上に切替ボタンを用意したつもりです。内容量の多い文書をページをめくる感覚で閲覧可能にするのが目的です。言い換えればアンチスクロールですが、ダラダラした文章が多かった為に過去の文書では生かしきれていません。
DOM1,2とIE独自拡張メソッドを使用しています。Mozillaも「理論上」使える筈でしたが現状恐らくWindows版IE5.5以上が実用範囲だと思われます。Macintoshは良く分かりません。クッキーは不使用です。UIが「トンデモ」ですが、徐々に直して行きます。
コンセプト的にはほぼ決定事項です。洗練してゆきます。
というわけで（?）、読書モードという名前を付けてスクロールを抑える、スタイドショー型のパフォーマンス（※）をここだけで試しているわけだが、Mozillaの挙動がさっぱりだ。
replaceChild()でセクションdivを置き換えると、マージンがボロボロ。なにやら絶対配置した時のようにwidthが内容幅になっているし。
そもそもMozillaのスクロールバーは一体何の要素に付属（?）しているのだろうか。
body{ height:500px }と高さを絶対値で指定して、body{ overflow:hidden }と指定するとスクロールバーが消えてしまう。これが混乱の元だ。html{ overflow:hidden }とすればIEと近い挙動だが、html{ overflow:auto }と戻すと、今度はスクロールバーが出ず、マウスホイールで無理やり下にスクロールさせてみると、なんと左側にスクロールバーが出現する。なんだか滅茶苦茶だ。この辺りはタブーなのか。
各セクションのスライドショーを提供する為には、画面の表示を全て消去する必要があり、そのためにはdisplay:noneを使うか、またはremoveChild()を使う必要があると思っていた。document.open()で新しいルート要素を作る試みは、ブラウザによる挙動の違いにより断念。
どちらにしろ、全て消去するにはそれらを包括している要素について行うのが唯一現実的な方法であるのに対し、その要素は（私のマークアップでは）bodyしかない為、display:noneは使えず、removeChild()もそれをする前にセクション全てを配列に格納しなければならなかった。
しかし、スライドショー用のdivをbodyのfirstChildに生成し、heightとoverflow:autoを指定、そしてbodyには
と指定してやれば、生成したdiv以外にあたかも要素が存在しないかのように見えるという望みの結果が得られる。処理速度も格段に速い筈である。visibility
overflow:hidden
プレーンな灰色ほど、私にとって恐ろしい背景色はない。灰色背景で淡々とした長文を読まされたときには、虚無感で気が変になりそうだった。
一方で、長文を読む際には若干背景が暗くないと眩しくなってくる。眩しさに無意識のうちは大丈夫なのだが「ひょっとして眩しいのではないか」と思い始めてしまったら、もうお終い。眩しくて眩しくて仕方なくなってくる。そしてこの場合は、灰色がベストなのではないかと思うのだ。
そういった理由から、「灰色」を感じるギリギリまで輝度を落とした白にしているわけだが、もっと良い方法があるのではないかと疑う。確かにプレーンな灰色は鬱な雰囲気だが、美しい灰色というのも表現可能な筈。その表現に成功した時、背景画像は虚飾では無くなる。
速くなった
という噂を聞いてインストールしてみた。確かに「比較的」速くなっていた。
自分のサイトを見てみる。
CSSに関しては良く処理してくれる。もう感動的な程に。大した事をしてないため粗が見えないだけかも知れないが。
Site Mapを試してみたところ、CSSのleftプロパティの計算がpaddingを含めてしまっている。……のかと思ったらposition:fixed自体が効いていない。JavaScriptにて親にstyle.position = 'static'と再指定してやったら直った。はて?
今年こそは読みやすさを意識しながら文章を書きたいと思います。また、読みやすさを追求したCSSやJavaScriptを、ひたすら目指していこうと思います。
トップページのタイトルに画像を使わないのって、意地ですよね（何の）。
文字情報を画像に置換できるCSSプロパティがもしあったなら、と良く夢想します。でもそうすると、必ずお馬鹿な使い方で可能性を秘めた「技術」を無碍する輩が出てきて「使えるんだからどう使ったって自由だろ」とか何とか言い出してしまい、「CSSうぜぇ」という一般認識が出来上がってしまうと思うと、やっぱりCSSでは（一見）大したことができないままの方が良いのかな、と思えてしまう今日この頃です。あけましておめでとうございます。