プレースホルダーがラベルで、コントラストが低く、余白がない入力フォーム
プレースホルダーをラベルにしたフォームや、コントラストが低いフォーム、余白がなかったりするフォームはそれぞれよく見る。特にプレースホルダーをラベル代わりにするのは、すっきりするので多用されている印象。使いたい気持ちはわからなくもない。けどこの3つが組み合わされると、なかなかひどい感じになるという実例をGoogleで見てしまった。 Internet Explorer 10ではこのような感じになる。ページの読み込み直後にメールアドレスを入力するフォームにフォーカスが当たり、プレースホルダーの文字列がその時点で消える。この状態だと、すぐ下のパスワードというプレースホルダーが、あたかもその上の入力ボックスらしきものに対するラベルのように見えないだろうか？ 実際に「パスワードを入れたのにログイン出来ない！」などと言う人はいた。 ラベルのように見えてしまう大きな原因は、その低コントラストでフラットな入
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
CSSグラデーションのちょっとしたテクニック #2
前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。 Vista風のテカってるボタン ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と
Bloglinesと301 Moved Permanently
BloglinesのForumをタラタラと眺めていたら面白い情報を見つけました。Mark Fletcher曰く、フィードのURLを変更した時に301 Moved Permanently(301とは書いてないけど多分)でリダイレクトしてやると、自動的に新しいURLに変更されるそうです。Googleは301でリダイレクトするとPageRankを引き継ぐとかそういう噂なのですが、これとアプローチ的には似てますかね。 Bloglines, when we see a permanent redirect for 3 days, will automatically change the feed in our database to point to the new feed. リクエストに対して返されるHTTPステータスに応じてRSSリーダーが適宜解釈してやるというアプローチは、この301 Mo
hail2u.net - Weblog - pre要素へのスタイル指定
idea * ideaでエントリになっていたので、言及されていることだしうちのサイトのことだけちょっと書こうかなとか考えてみたら結構色々あって、エントリのネタになりそうだったのでまとめてみた。どっかにもちょろっと書いたけど。 実際にスタイル指定を書く前に抑えておくべき知識として以下のようなものが挙げられると思う。 ほとんどのブラウザでpreは等幅フォントで表示される ほとんどのブラウザでpreのwhite-spaceはpreになっている フォント・ファミリを指定する場合は最後にGeneric font familiesが必要になる overflow: scroll;では縦横どちらにあふれた場合でも縦スクロール・バーと横スクロール・バーが両方とも出る overflow: auto;ではあふれた方向にのみスクロール・バーが出る Internet Explorerではoverflow: auto
XPIパッケージにまとめるバッチ・スクリプト
作成したFirefoxのExtensionをXPIパッケージにまとめる方法のひとつとして、バッチ・スクリプトがHow to create Firefox extensionsでかなり昔から公開されている。これはbuild.batをいちいちコピーしなきゃならなかったりとか.svnフォルダなども含んでしまったりする。それをbuild.batをどこかにおいておけばドラッグ・アンド・ドロップでXPIパッケージが作れるようにしたりとか改造してみた。 @echo off set x=%1 X: cd %x% set x=%cd% md "%x%\build\chrome" cd "%x%\chrome" 7z a -tzip "%x%.jar" -mx=0 * -xr!.svn move "%x%.jar" ..\build\chrome cd ..\ xcopy components build\c
JSONP
前回のエントリで触れたJSONP。初出はRemote JSON - JSONPというMochiKitの中の人によるエントリ(多分。一言で言うなら「JSONデータを括弧でくくった上でこっちが指定した文字列を頭につけて返してね？」というもの。文章で説明するとわけわからん。 つまり、 http://example.com/data.json?jsonp=beverly_hills とリクエストしたら、 beverly_hills({ foo: 'This is foo.', bar: 'This is bar.', foobar: 'This is foobar.' }); と返す。また、 http://example.com/data.json?jsonp=beverly_hills%5B90210%5D とリクエストしたら、 beverly_hills[90210]({ foo: 'This
はてなブックマークエントリー情報取得APIははてなスクリーンショットAPI(でもある)
はてなブックマークのエントリー情報取得APIは任意のURLに対するブックマークを返してくれるAPIなだけでなく、事実上はてなスクリーンショットのAPIとしても機能している。正確には、はてなスクリーンショットによるスクリーンショット画像のURLも返してくれるというだけ話なのだけど。 例としてlabs.hail2u.net/hatena/screenshot/を作成してみた。ここでは、 var sites = [ 'http://hail2u.net/blog/', 'http://la.ma.la/blog/', 'http://lowreal.net/blog/', 'http://tokyoenvious.xrea.jp/b/' ]; というURLの配列から、 <p><img src="http://screenshot.hatena.ne.jp/images/120x90/0/1/6/
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
