5509

スマートフォンで使えるフォーム入力内容を消す×ボタンを実装するJSライブラリ

×ボタンで入力内容を消すUI

タイトルが長い・・・入力テキストを消去するUIは検索ボックス(type=search)にだけ有効で、他の(type=textなど)では使えないんですね。でもこの×ボタンの使いやすさは間違いないので。。

1ヶ月くらい前に作ったのにサンプルを作るのを面倒くさがって公開してなかったものを、サンプルキレイにして公開しておきます。

Delete Valueのサンプル
サンプルはiOSとAndroid(※1)でしか動作しません。。

問題点もあるのですが、それは後述。

Read more

YUI 3のCSS Fontsを使っている場合のフォントサイズ対応表をCSSのコメントに書いておくと便利ですよね

CSSでフォントサイズの指定って何でしてますか?っていうのは何年も前からある話題で最近は全然見ないですけど、特にそういう議論をしたいわけじゃなくて。

僕はYUI 3のCSS Fontsを使っていますが、%指定になるので実際何pxになるのかCSSだけでは分かりにくいときもあるので、共通CSSに下記のようなコメントでpx対応テーブルを書いておくとすぐに指定できてわかりやすいと思いますが、皆さんどうしてますか?

Read more

WebStormのシンタックスハイライトのトワイライトっぽいテーマ共有しときます

WebStormのシンタックスハイライトテーマ

タイトルままです。白いのはアレなのでダークなやつを。CodaをベースにちょっとVimのやつも取り入れつつ。HTML/CSS/JavaScriptはいい感じになるかもしれないけど、JSがちょっと項目多すぎて断念した・・・これからまた変わっていくかも。誰かきれいなやつあったらください・・・

09.zip

めくる感覚で行き来できるページナビゲーションをCSSで実装する

ページナビゲーションが表示された状態のキャプチャ

要らないものを削った結果、記事が縦に長くなってしまうもんで、ページナビゲーション(前の記事、次の記事リンク)をどうしようかなぁとか思ってた。

ちょうど、シロさん(@___shiro_)がのを見て、なーるほどと思い実装してみた。

こういったレイアウトのアーカイブのナビゲーションで、元のHTMLを一切触らずCSSだけで飛躍的に(?)ユーザビリティを高められるいい例になったかなぁ。どうやろ。その辺は要検証ということで。少なくとも自分で使う分には超使いやすいからこれはこれでオッケーなんですけども。

Read more

Author

nori
nori
- UI Engineer
Location
- ,