http://www.flickr.com/photos/meyerweb/sets/72157626750845115/with/5793221927/
単純に考えるとChromeならこんな感じでアドレスバーから叩けばできそう。Firefoxその他はベンダー拡張プリフィックスを変えれば動くんじゃないか。
javascript:document.styleSheets[0].insertRule("*{-webkit-transform:rotate(20deg);}", 0)
どうやってるのか興味ある。transitionで30秒くらいかかるようにして擬似ランダムとかも面白そげ。
http://code.google.com/apis/+1button/#target-url
素晴らしい。こういうところはGoogleらしいな。はてなスターの対応マダー？
あわせて読まなくても別にいいです: http://i.hatena.ne.jp/idea/29643
前にもコードだけ書いた。
section + * { clear: both; }
ちょっと試してみたけどその後ろでclearしたいという最大の目標は達成できるものの、その要素の高さがfloatしててはみ出す要素をおおうところまで拡大されないので実戦投入はしづらい感じだった。改めて::afterを使ったclearfixの完成度の高さに驚く。
高齢者向けとかそういう問題ではなくてインタラクティブなものは逸脱したデザイン(色とかだけじゃなく)だと使いづらいとかそういう話ではないか。ウェブにおけるフォームに限らずソフトウェア等でも。Tab押したら隣のボタンに移動しなかったでござるとか-hかと思ったら/?だったとかiとEscでモードが切り替わるとかタイトルバーのところに変なかっこ悪いロゴ付きのボタンを付けるとかいろいろ。
リンクが青色じゃないと…というのは似て非なる話。こちらは誤クリックをさせるまたは押してはいけないところを明示するベストプラクティスです。
http://subtech.g.hatena.ne.jp/mayuki/20110524/1306233968
「Quirksモードやめたい!」(自動でキーワードになります)と書くともれなくはてなグループ日記システムが判別して、問題ない場合にはとX-UA-Compatibleを出力します。
メモがわりなので適当に書きすぎた。反省してない。言い訳はする。
jQuery 1.6でattr()の互換性が結構失われて非難轟々だったので1.6.1で互換性が保たれるように直したという感じでほとんどのケースでそのまま動きます。
僕のようにdisabledを消すために空文字突っ込むという変なコードを書いてた人がハマったという話でした。
$("input").removeAttr("disabled");
とか普通は書いてると思うので、ハマる人は少ないと思います。
@ofkに
$("input").attr("disabled", "");
が動かなくなっていると教えてもらった。Developer Toolsとかで操作後のHTMLを見ると、
<input disabled>
と属性値が消えるだけになってて、disabledが解除されないようだ。ブラウザ依存かもしれない。
$("input").prop("disabled", false);
という1.6で推奨されているコードに書きなおした。
みんな考えてるけどコレだ！っていうのがないですよね。最近流行っているっぽいフォームの周りに淡く枠っぽいものを書いて凹んでるっぽく見せるのをつくってみたけど今三。入力ボックスとボタンをくっつけるのはそこそこうまくいったけど、んー。
#search {
form {
div {
padding: 6px 4px 6px 6px;
border-radius: 1em/1.25em;
display: inline-block;
line-height: 1;
background-color: rgba(0, 0, 0, 0, 0.05);
input {
border: 1px solid rgb(114, 143, 153) !important;
border-radius: 0.75em/1em;
box-sizing: content-box;
vertical-align: middle;
&:hover, &:active, &:focus {
border-color: !important;
}
}
.edit {
border-width: none;
margin: 0 -2em 0 0;
width: 186px;
height: 28px;
}
.button {
padding: 0 16px;
border-radius: 0.75em/1em;
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7));
height: 32px;
color: rgb(255, 255, 255);
background-color: rgb(136, 187, 204);
background-image: linear-gradient(top, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100%);
&:hover {
cursor: pointer;
}
}
}
}
}
HTMLはGoogleのサイト内検索まんまをdiv#searchで括ってちょっとクラス指定を加えただけです。
はてな記法のVimヘルプ欲しいなとかつぶやいたらさくっと@mattn_jpが作ってくれた。
https://gist.github.com/982767
ちょっとキーワードを追加して.jaxにしたもの。
https://gist.github.com/982781
これでもう引用記法忘れても平気ですね！ヘルプ入れてるの忘れそうですが…。
http://www.usability.gr.jp/alertbox/20110426_workflow.html
そのプロンプトはユーザーが新しくインストールしたアプリを開けると現れる。つまり、当然ながら、彼らがそのアプリケーションを実際に体験し、その価値を理解する前にそれは現れるのである。こうした初期の段階では、ユーザーのそのアプリに対するコミットメントのレベルは非常に低い。したがって、彼らに多くのことを求めるのは不可能だ。なぜならば、彼らのあなた方に対する評価はまだそれほど高いものではないからである。
http://hail2u.net/pub/test/265.html
ちょっと前にTwitterでフォローしている誰かが使い始めてていいかもなぁと思ってた、ページの左右にページめくりナビを配置する奴のモックアップを作ってた。常に出てると邪魔な気がしないでもないので、エントリのフッタに到達したら出すとか工夫も必要ぽい。
使い始めたの誰か忘れました！！１
@kits_に相対か絶対かで判断するのは違和感と指摘されてそれもそうだなとか思いました。
「まず間違い無くスパムじゃないURL」の一例としてスラッシュから始まる相対URLならというものを挙げただけのつもりだったんだけど、
とか他の信用できそうな例も書いとけば良かったな。