100 エーカーの森へ行き、プーの家へ入りこんでおもむろに窓を開け放ったり、戸棚を開けてみたり、鳩時計ならぬ熊時計を何回も鳴らして、それに合わせて自分も飛び跳ねてみたり。テレビの中や絵本の中だった世界へ入り込んで触ることができる。擬似的とは言え彼女にとってそこはリアルに存在する世界だ。こりゃ脳内麻薬出まくりだよなぁとか思った。
そんな娘が今日もまた小さい手でコントローラーを握りしめて目を輝かせている。そして、その横で FF12 のロムを手に順番待ちをしている俺がいますが、何か？
]]>この機能を有効にするには、まず settings で private saving を有効にしておく必要がある。
これによって、ブックマークポスト時に do not share
のオプションが表示され、チェックすることでプライベートなブックマークができるようになる。んで、実際にプライベートブックマークしたものには、not shared
と表示される。
ここら辺の UI は今後様子を見ながら変更されていくかも知れない。ちなみに、必要かどうかは個人的には微妙だけど、プライベートブックマークしたものだけをまとめて表示とかは出来ない。でも、そのうち system: private ってなシステムタグが用意されるかも。
]]>
他にも url 確認ページが変わってて、notes 欄にコメントを書いているユーザーが右カラムに抜き出される形になってる。個人的には、何となく見づらくなったような気がしないでもないけど、まぁ慣れかな。
微妙な変更としては、ブックマークのポスト時間が日付にマウスオーバーでツールチップ表示されるようになった。もちろんグリニッジ標準時なんで 9 時間足さなきゃいけないんだけど。ただ、いちいちマウスオーバーすんのも面倒なんで、Firefox の userContent.css に下記を追加して ::after 疑似要素で常に表示させるようにした。
@-moz-document domain(del.icio.us) {
span.date[title]::after {
content: attr(title);
padding-left: 1em;
color: #000;
}
}
del.icio.us blog によると、来週にもプライベート機能がリリースされ、他にもいくつかの機能が追加される予定らしいんで期待。
]]>マウスオーバーした時にグニュって拡大する Mac OS X の Dock っぽい動きを CSS だけで実現させるってアイデア。このギミックがユーザビリティ的にどうかは置いておくとして、隣接セレクタを使ってフォントのサイズを段階的に変えるってのは面白いなぁ。試しに自分でもサンプルを作ってみた。ちなみに動作するブラウザがかなり限定されしまい、 隣接セレクタ未対応の IE はもちろん、Opera や Safari でもうまく動作しない。まぁほぼ Gecko オンリーって感じ。
li {
font-size: 1em;
}
li:hover {
font-size: 2em;
}
li:hover + li {
font-size: 1.5em;
}
li:hover + li + li {
font-size: 1.3em;
}当然のことながら、隣接セレクタは直後の要素へ対する指定しか出来ないんで、マウスオーバーしている要素の直前の要素は変化しない。それでも比較的それっぽく見える。調子に乗って、アイコンを使ってもっと Dock っぽいサンプルも作ってみた。
#dock li {
float: left;
list-style :none;
}
#dock li img {
width: 64px;
height: 64px;
}
#dock li:hover img {
width: 128px;
height: 128px;
}
#dock li:hover + li img {
width: 96px;
height: 96px;
}
#dock li:hover + li + li img{
width: 80px;
height: 80px;
}img 要素を使ってるんだけど、画像サイズを width、height 属性での指定では無く、CSS でサイズ指定することで大きさを変化させている。あまり深く考えずに作ったんで、可変の原点が上側だけどなかなか良い感じ。
]]>mapsurface is a web page activity widget that helps you quickly see how people find, navigate and value the pages of your web site.
Google Analytics 等のサードパーティ製アクセス解析サービスは管理画面にログインしないと解析結果が確認できないわけだど、mapsurface の場合は今閲覧しているページ上でそのページの解析結果を即座に、しかも誰でも見ることができる。とりあえずテストページを作ってみたんで、百聞は一見にしかず。
Alt + x（マックの場合はoption + x）Opera の場合は shift + ctrl + x のショートカットで画面にウィジェットが表示され、簡単なアクティビティを確認できるようになっている。
ウィジェット内の map をクリックすれば、ページ内のリンクに対するクリック率が分かるようになってて、色が濃いほどクリック率が高いなど数値だけでなく視覚的にも分かりやすいインターフェース。当然クリック率を表示しているラベルは自由に動かせるようになっている。全てのリファラーや週単位でのアクセスグラフなどは more > をクリックで確認。
昔からあるアクセスカウンタの今風（なんちゃら 2.0 とは言わない ! ;-P）な感じかも。サイト管理人だけじゃなくて閲覧している誰もが見られる事で、初めての訪問者にもどのページが人気のあるページなのかが分かったりとか、または、ページのリファラーを辿ったりができるってのが良いよね。正式にサービス開始し始めて、安定しているようだったら導入してみようかなとか思ってみた。
]]>今までこの Fasterfox のリンク先読み機能に対して、サイト側の方ではどうにも出来なかったんだけど、Fasterfox のバージョンが 1.0.3 になってから robots.txt を読むようになったらしく、下記の2行を robots.txt に記述すれば先読みをブロックできる。
User-agent: Fasterfox
Disallow: /つう訳で、サーバに負荷をかけられたくねぇって人や、ログに余計なノイズを残すなやって人はやってみると幸せになれるかも知れないですぜ ！
]]>カラクリとしては、IE7 が対応していない :lang() 疑似クラスを使うって方法らしい。下記のような (X)HTML を例とする。
<body lang="ja">
<div id="contents">
<p>foo</p>
</div>
</body>
これに対して、まずベースとして IE7 を含む全てのブラウザ向けの指定を行う。例えば背景色を赤とする。
#contents {
background-color: red;
}その後に IE7 を含む全てのバージョンの IE 以外のブラウザへの指定を !important でオーバーライドさせる。例えば背景色を緑。
*:lang(ja) #contents {
background-color: green !important;
}ただ、このままだと Safari も :lang に対応していない。そこで、Safari で不完全に対応されている CSS3 の :empty 疑似クラスを使って Safari 向けの指定を行う。
#contents:empty {
background-color: green !important;
}これらによって、バージョン 7 を含む IE では背景色が赤、それ以外のブラウザでは背景色が緑となる。らしいですよ！スイマセン、まだ IE7 は落としてないんで自分で試してない :-P。テストページが上記ネタもとには用意されているんで、IE7 Beta 2 Preview を入れてみた方は実際に確認して見たら良いかも。
]]>
たまたま見つけたんだけど、いつからだったんだろう。今んとこ、Yahoo! のロゴや関連づけられるようなものは見あたらないんだけど、ちょうど移行中なのかも知れない。
]]>普段使用しているレッツノートでは、メールクライアントに Thunderbird を使用している。んで、1.5 にバージョンアップしてから、View Headers Toggle Button が使えなくなっちゃってたんだけど、代わりに yoosee さんが入れている headers Toggle が使えそうだなぁ。Thunderbird にはそれほど機能拡張は入れていないんだけど、それでも絶対に入れておきたい拡張ってのはある。今現在、入れている拡張は以下の通り。
以前は、これらに加えて View Headers Toggle Button を入れていたんだけど、これから headers Toggle を入れてみる予定。
]]>
へぇー、NeXT だったんだ。This machine is a server. DO NOT POWER IT DOWN!!
ってメモがイカス！
@media, Europe's foremost professional web design conference, brings together some of the world's most highly respected web experts to talk about the latest major happenings, best-practice thinking, and cutting-edge techniques in the world of web design.
@media 2005 のウェブサイトは固定幅だったけど、今回は可変になってるのね。原色を使った色づかいなんかは今流行りな感じだけど、シンプル具合は個人的には好み。
昨年の 2005 で印象に残っていることと言えば、「Zoom layout」あたり。自分も密かに Zoom layout 用の CSS を書いてみたりしたんだけど、やっぱ Stopdesign とこみたいに Site Preferences なページを用意した方が良さそうとか思ったら、面倒になって途中放棄したこともあったりして :-P。
さて、今回の 2006 のスピーカーもそうそうたる面子が揃ってるっすよ、すげぇな。個人的に気になるのは Andy Budd の Bug Hunting や Jon Hicks の Good Design vs. Great Design、 Dave Shea の CSS3: Fact or Fiction? あたり。いや、つうか全部気になるけどな！
]]>
自分をレベルアップさせるために、転職という選択肢もありかなと思ってたり。まぁ、あれだ、雇ってくれるとこ探すのが大変そうですけども :-P
]]>CSS フレームワークだなんて言われていたりもしていたけど、CSS でも複雑なマルチカラムのレイアウトが作成可能だって事を証明したアーティクルだった。マルチカラムなレイアウトを作成したい場合は、一度目を通しておいた方が良いかも。素晴らしいの一言。
CSS コードをインデントさせるアイデアってのを最初に見たのがこのアーティクル。Maintainable CSS として、他にも CVS を使ったバージョン管理など自分的に新しい発見があった。維持・管理しやすい CSS を作成したい時に参考にできる物がある。
webdev な人たちが日替わりで投稿していた。どういう企画で立ち上がったのか知らないんだけど、タイミング良く 12 月 1 日の day 1 から追う事ができた。Ajax あり Microformats あり CSS ありと広範囲に渡って投稿されていった。投稿者の中で知っている名前は 5 人くらいしかいなかったけど、多分、全員それなりに知られている人たちなのかな、分からんけど。まだ、未見であれば一度目を通しておくことをお薦めする。ちなみに、24ways なだけに 24 日の day 24 で終わったっぽい。
特にこのアーティクルがって訳ではないけど、自分がキャッチアップしきれていないものをここで目にすることができた。注目されている事や話題になっている事なんかをコンスタントに取り上げてくれるんで、今後もチェックし続けて行きたいサイトのひとつ。
マック IE のサポートと配布終了のアナウンス。今となってはアレなマック IE だけど、このブラウザは間違いなくモダンブラウザの先駆けであったわけで、いざこういう状況になってしまうとなんか寂しい気がする。まぁとりあえずお疲れさまでしたと。
以上の 5 つ。もちろん、他にも素晴らしいものや、印象深いものがあったのは間違いないけど、拙サイトで取り上げていなくて、悩まずに挙げられたのがこれら。さて、来年はどんな年になってどんな興味深いアーティクルに出会えるか、楽しみだ :-)
]]>
media="print" な印刷用 CSS を用意している場合、そこに背景画像を設定していたとしても印刷されない。ヘッダに画像を使って CSS で文字を非表示にしているウェブサイトの場合、ユーザーがそのサイトのヘッダ画像を含めて印刷したいのに、タイトルが味気ないテキストだけで印刷されるのを不満に思うとしたら、どう解決すれば良いのかってことで下記リンク先のバッドノウハウ。
カラクリを大雑把に言うと、印刷用 CSS の指定で当該箇所を display:list-item; にして、list-style-image に印刷させたい画像を指定するって感じ。以前紹介した「letter-spacing を使って背景画像置換」を使って、テキストを非表示にするんだけど、これって IE だと 1 バイトの文字はうまくいくけど、2 バイト文字だと完全に文字が隠れないんで実は使えない。なんで、サンプル作ってみたけどヘッダ部分の h1 には 1 バイト文字使ってる。
うーん、そもそも最近 image replacement （背景画像置換）やんないから使うことは無いな。
]]>