buena suerte!


iPhone Buttons を画像を使わずに CSS で再現してみる。

Safari の開発者向けサイトのサンプルコードにある iPhone の UI によくあるボタンっぽいボタン iPhoneButtons を画像を使わずにというか、 CSS3 の -webkit-border-image を使わずに再現してみる試み。

動作確認

Chrome(7.0.517.41) で確認。

同じ webkit の Safari でも表示されますが、微妙な動作の違いでボタンの上にボーターを 1px 入れないと光沢感が足りない。 -webkit-gradient の調整とか -webkit-box-shadow + inset でうまくいくかもしれない。 iPhone 向けに使うボタンのはずなのに Safari では調整しないと使えないとかあれです。

デモサイト/Demo Site

左側が -webkit-border-image 有り、右側が無しになってます。

比較画像を追加してみた。 (20:27)
比較画像

Read more...


2010 FIFA ワールドカップ(TM) NHKBS1 録画放送時間まとめ

今回もワールドカップの録画保存用に NHKBS1 の録画放送時間をまとめてみました。今回は Google Calendar を使ってみた。
間違いがあったり、放送局の都合により時間が変更になる可能性も有りますので、直前にある程度確認して下さい。


予選リーグの予定時間はすべて120分間になっていますが、実際は110分間の放送時間になると思います。また、決勝トーナメント以降は、余裕を見て180分間にしてますが、延長やPKにまで行かなければ、それより短かくなると思います。

三位決定戦無いし……予選リーグ第三戦の放送なさすぎ……
NHK はともかく、民放は実況解説があれだし、やっぱりスカパーで見て録りたい……

関連記事リンク


Google Chrome の便利な拡張機能 - Chrome Stylist

Google Chrome に乗り換えて随分たったんですけども、ヤフーメールのベータ版とか AdBlock が結構重かったりするので Chrome Stylist を導入してみました。

Chrome Stylist は Google Chrome 用の拡張機能で、条件にマッチしたサイトに、任意のユーザースタイルシートを適用させ管理するもので、 Firefox で同じようなアドオンだと Stylish が有名な感じの奴です。開発者は Chrome Gestures なども開発されてる os0x 氏で、 userstyles.org 対応のようなので、様々なスタイルを検索して引っ張ってくることも可能なようです。

―― 結果、ページが読み込むより前にスタイルが適用されるので、クリックミスったりイライラすることも減って、とても快適です。よく行くサイトは AdBlock を無効にして、これで見やすくしてる方が軽くていいです。初期設定だけは面倒ですけども。
一応 Chrome にも Stylish はあるんですけど、個人的にはコッチのほうが全然使い易いですね。

他に解説されてる方がいるかも知れませんが、簡単に使い方の紹介もしてみます。

まずはインストールしないことには使えませんので、こちらにアクセスしてインストールします。
Chrome Stylist - Google Chrome 拡張機能ギャラリー

設定方法

インストールすれば、 Chrome の拡張機能のタブを開いて、 Chrome Stylist の項目のオプションを開くと3つの設定タブが出ますので、それぞれ設定していきます。

Basics
アドレスバーの蘭にアイコンを表示させるかさせないかの設定。
Styles
メイン機能の設定。ここで色々します。
About
拡張機能についてのこと。バージョンとか。

Basics タブ


always にチェックしてあった方が、いちいち拡張機能のオプションタブを開かなくて済みますし、アイコンを左クリックすれば、一時的に適用させるスタイルを書けたり出来るので、個人的にはオススメです。
自分では滅多に編集しないし気にしない人は none もしくは matched にするといいかなと。

Styles タブ


はじめに、左下にある Add New Style ボタンを押せばスタイルを追加出来ます。
次に Style Name を決めます。2バイト文字の漢字やひらがなでも大丈夫なようです。
disable で無効化。 enable で有効化です。 delete ALL を押せば全て削除されます。

style set は左が検索方法で、右が URL の条件です。上の All Site にチェックを入れれば条件関係なく、何時でも設定したそのスタイルが適用されることになります。
prefix が前方一致。 domain が完全一致。 regexp が正規表現になります。 prefix でもいいですけど、 domain のほうが使うことが多いかも。
add Rule ボタンを押せば、好きに URL 条件を増やしていけます。最後に Save ボタンを押せば保存出来ます。リアルタイムで適用されるわけではないので、保存した後はページをリロードするなりして確認して下さい。
del ボタンを押せば消去。ここでの削除は確認画面が出ないので注意して下さい。一番下の new style set ボタンを押せば、同じ Style Name の中に複数の条件やスタイル等を追加していくことが出来ます。

あとはどんどん条件を追加して行って使う感じです。 Chrome が対応してるぶん(バージョンにも因るかも)には CSS3 も余裕で使えます。

Read more...