フォームのテキストエリアをより使いやすくするテクニック集<textarea name="code" class="css" cols="60" rows="5"> textarea { background: url(images/benice.png) center center no-repeat; /* This ruins default border */ border: 1px solid #888; } </textarea>
10+ High-Quality Free CSS Button Libraries & Frameworks — Speckyboy
Resources by Application Bootstrap Templates Figma Templates Flyer Templates Illustrator Templates InDesign Templates Lightroom Presets Logo Templates Logo Fonts Mockup Templates Photoshop Actions Photoshop Brushes Resume Templates Tailwind CSS UI Kits Web Templates Video & Motion Design Templates All Motion Design After Effects Apple Motion DaVinci Resolve Final Cut Pro Premiere Pro Presentation
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌
Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか？というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });
prettyCheckboxesStéphane Caron – No Margin For Errors
This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability. See below for a demo of the project or click here for the full project documentation. If you need support with prettySociable, please take a look at our forums Documentation Please see this
プリティなチェックボックス、ラジオボックス実装用ライブラリ「prettyCheckboxes」:phpspot開発日誌
prettyCheckboxes - custom checkboxes / radio buttons - by Stephane Caron プリティなチェックボックス、ラジオボックス実装用ライブラリ「prettyCheckboxes」 チェックボックスは以下のように。 ラジオボックスは以下のように。 ＣＳＳでデザインできます。 jQueryベース。 関連エントリ チェックボックス、ラジオボックスをオシャレに表示するJS CSSデザインされたTextAreaサンプル inputのtype=fileをCSSでクールにスタイルするサンプル サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/03/form-design-2.html