ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
好みのチェックボックスのデザインが簡単に作れる「CSS Checkbox」:phpspot開発日誌
CSS Checkbox | Cross Browser CSS Checkbox Generator | Free Checkbox CSS 好みのチェックボックスのデザインが簡単に作れる「CSS Checkbox」。 豊富なピュアCSSでデザインされたチェックボックスを選んでダウンロードが可能です。 必要なものだけど選んで、HTMLとCSSをコピペで使えるようになっているみたいです。 クロスブラウザかつ、ピュアCSSということでとても使いやすそうです ちょっとオシャレなチェックボックスにしたい、という場合は参考にできそう 画像はこのサービスのサーバを直指定しているようなので、トラフィックの大きなサイトでは予め画像をダウンロードして使うとよいでしょう。 関連エントリ チェックボックス、ラジオボタンをクールにデザインできるjQueryプラグイン「iCheck.js」
他とは違う？ ”動き”や”レイアウト”にこだわる素敵サイトたち。 / Maka-Veli .com
ページ遷移やマウスオン、スクロール、パララックス、ちょっとした動作にこだわりを持たせると、サイトとしてのクオリティを高めてくれます。また、どんどんCSS等も表現の幅も拡がって斬新なレイアウトが目立ちます。そんな動きやレイアウトにこだわったサイトをいくつかご紹介。もちろんノンフラッシュ。 Find & Form | The Digital World Craves Old School Craft http://www.findandform.com/ 左上のロゴ、ページをスクロールすると変形します。 TAKESHI WATAMURA | 綿村 健 http://takeshiwatamura.jp/ ※音注意 斬新なレイアウト。マウスオンで全画面、透過でコンテンツが表示されます。 ALCHIMIE http://www.alchimie-swc.ch なんだか不思議なサイト・・
[CSS]フォームの見栄えをぐっとよくする、テキスト入力欄とボタンをCSS3で美しくスタイルするチュートリアル
CSS3 Form Styling Cheat Sheet CSS3でスタイルするテキスト入力欄 CSS3でスタイルするフォームのボタン CSS3でスタイルするテキスト入力欄 HTMLは非常にシンプルです。 classのhogeは、随時変更して利用してください。 HTML <form> <input type="text" class="hoge" /> </form> まずは、ベースとなるスタイルシートです。 CSS: Basic border:0; padding:10px; font-size:1.3em; font-family:Arial, sans-serif; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; width:300px; 枠線を角丸にします。
ログインフォームに大切な7つの要素と重要な1つの機能
ログインフォームを実装する際に、大切な7つの要素と重要な1つの機能を紹介します。 元記事では下記のCSS3で実装されたフォームもダウンロードできます。 フォームのタイトル このフォームが何についてのものであるか手短に説明されたタイトル。特に、ウェブサイトの名称を記すことは非常に重要です。 非メンバー用のリンク 非メンバーが偶然、このページを見つけてしまうことがあるかもしれません。そして、メンバーを増やすチャンスもあるので、登録ページへの誘導も行っておきます。 ラベルとフィールド ログインフォームは通常、2つのフィールドで構成されていますが、ラベルは読みやすいようにします。 パスワードを忘れた場合 これは同じく、非常に重要なリンクです。多くのユーザーは多数のアカウントとパスワードをもっているものです。そして、しばしばそれはあなたのサイトでどれなのか忘れてしまうことがあります。 また、配置する
スタイリッシュなフォームを作るときに見るべきエントリまとめ
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
http://e0166nt.com/blog-entry-694.html
[CSS]使いやすいスタイリッシュなフォームを実装する17のチュートリアル | コリス
http://moto-mono.net/2009/01/09/jqueryvalidationjs-updated3.html