CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック | コリス

2020/08/24 175 users コリス inpu button要素 CSS スニペット

検索フォームなど、button要素とinput要素を並べて配置した際に、それらのテキスト（アイコンも）を垂直方向に美しく揃えて配置するスタイルシートのテクニックを紹介します。 ボタンと入力フォームの高さは自由に変更でき、デザインも普通に変更できるので、スニペットとして登録しておくと便利です。 button要素とinpu... 続きを読む

あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方 | コリス

2017/11/21 264 users セレクタ コリス CSS 見た目 要素

フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。 フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jo... 続きを読む

[CSS]さまざまなデザインのボタンを簡単に実装できるSass/Compassのボタンライブラリ -Buttons | コリス

2013/06/23 267 users Buttons Sass コリス Compass class

フラットをはじめ、定番の角丸、サークル、アイコン添えなど、さまざまなデザインのボタンを簡単に実装できるSass/Compassで作られたボタンライブラリを紹介します。 Buttons Buttons- GitHub Buttonsのデモ Buttonsの使い方 Buttonsのデモ デモでは、リンクのテキストやbutton要素、input要素にclassを付与するだけで、さまざまなデザインのボタン... 続きを読む

HTML5アプリで簡単にジェスチャーを実装できるライブラリ QUOjs 【18日目】 ｜ クラスメソッド開発ブログ

2012/12/18 123 users ジェスチャー パフォーマンスチューニング iPhone 機能

モバイルHTMLシリーズ HTML5で追加されたinput要素のタイプはiPhone、Androidでどのくらい使えるのか  おすすめ iPhone、Androidで使える！撮ったその場で画像編集できるHTML5アプリを作ってみよう iOS6のSafariでサポートされるHTML5の機能 HTML5で使えるスマートフォンの機能 スマートフォンサイトのパフォーマンスチューニング スマートフォンサイト... 続きを読む

input要素の前と後にアイコンを添えたオシャレなフォームを実装するチュートリアル | コリス

2012/07/17 210 users コリス チュートリアル grey アイコン オシャレ

Coloured 前後+カラーリングのパターン 実装 HTML HTMLはシンプルで、アイコンやカラーリングはclassで判別します。 <!-- 1st prefix with email icon and default color (grey) --> <input placeholder="Type here..." class="ppfix pre email" type="text"> ... 続きを読む

チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか - かちびと.net

2012/07/04 432 users ユーザビリティ jQuery ふーん jQueryスニペット

フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。 フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。 フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeh... 続きを読む

jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com

2012/05/21 1011 users jsdo.it jQuery Ginpen.com 共通 要素

必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽... 続きを読む

【HTML5 フォーム】formタグのinput要素に新たに追加された13のtype属性をまとめました！ | HTML5でサイトをつくろう

2011/09/22 373 users ユーザーインターフェース フォーム HTML5 ソース 表示

ウェブ・ページのフォームではテキスト入力フィールドやチェックボックスなどのユーザーインターフェースを使用しますが、HTML5ではユーザーインターフェースがさらに追加されたことで注目されています。 特にinput要素ではさまざまなtype属性が追加されました。今回は新たに追加されたtype属性をソースをみながら表示を確認していきたいと思います。 HTML5でinput要素に追加されたtype属性 下... 続きを読む

HTML5でinput要素に追加された新しいタイプ13連発 - ＠IT

2011/03/07 525 users iPhone HTML5 テクノロジー 既存 数値

株式会社オープンウェブ・テクノロジー 代表 白石 俊平 2011/3/7HTML5の新しい入力タイプを、日時関連や数値、検索、電話番号、URL、メールアドレス、色など用途別にサンプルコードとともに紹介。iPhoneで見るとキーボードまで変化するタイプも!?input要素に追加された新しいタイプを用途別に紹介前回の「HTML5で既存のinputタイプに加わった6つの変更点」では、既存の入力タイプ（ 続きを読む

jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌

2009/03/26 323 users jQuery ビフォア CSS アフター フォーム

Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか？というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的... 続きを読む

ウノウラボ Unoh Labs: フォームのユーザビリティを改善する10のTips

2007/08/16 592 users ウノウラボ ユーザビリティ miyake Tips フォーム

miyakeです。Webアプリケーションにおけるユーザーインタフェースの代表格と言えばフォーム。今日はそんなフォームのUIを作るに当たって、普段自分が心掛けていることをつらつらとご紹介します。 ■チェックボックスやラジオボタンはfieldset,label要素でくくる チェックボックスやラジオボタンには一般的にその内容を表すテキスト（ラベル）が付けられますが、input要素だけでマークアップした場... 続きを読む

選択中のINPUT要素をハイライトしてくれるJavascriptライブラリ「Highlight active input」:phpspot開発日誌

2006/11/08 116 users JavaScriptライブラリ phpspot開発日誌

選択中のINPUT要素をハイライトしてくれるJavascriptライブラリ「Highlight active input」 2006年11月09日 Highlight active input This script is easy to configure. All you have to do is to define how the active input should be highli... 続きを読む