Blogs Trusted by business builders worldwide, the HubSpot Blogs are your number-one source for education and inspiration.
HTML で作成されるフォームのボタンは、OS やブラウザによってデザインが異なる。サイトのデザインとボタンを統一させたい時や、ボタンに文字ではなくアイコンを使用したい時がある。そんな時まず思いつくのは image ボタンを使用する方法だ。 <input type="image" src="button.png" alt="検索" /> この方法は、src 属性で画像の URI を指定して画像を表示するが、画像を使わない方法でボタンを作成し、そのボタンを CSS で image ボタンのように見せることはできないだろうか。CSS でサイトのデザインをする際、見出しなどのテキストと背景画像を置き換えるテクニックがよく使用される。同様にこのテクニックをボタンにも使用できないか試みた。 表示確認は IE 6、Firefox 1.5、Netscape 7.1、Opera 9、Safari 2、Ma
inputボタンに type="image" を使って送信ボタンを作成することがあると思いますが、こうするとそのボタンのx,y座標がGET値で送信されます。GET値で送りたいけど、x,y座標は表示したくない場合はスタイルシートを使ってinputボタンの背景に画像を指定します。 type="image"だとURLの後に座標の値がくっつく。 <form> <input type="image" alt="Sample" width="100" height="30" src="images/tips/image_btn.png" /> </form> CSSで解決 <form> <input type="submit" value="" id="image-btn" /> </form> #image-btn { border: 0px; width: 100px; height: 30
ユーザーが混乱しない、使いやすいフォームを実装するために気をつけたい10のポイントをNoupeから紹介します。ブログのコメント欄を対象にしたものですが、フォーム全般にも言えることが多く含まれています。 Comment Form Styling: Examples and Best Practices下記に10のポイントとその概要を紹介します。 サイトではキャプチャなども豊富に掲載されています。入力フィールドはシンプルにたいていのフォームには複数の入力フィールドがあります。 フォームの目的はユーザーからの適切なフィードバックを得るのが目的なので、必要無いものや関係無い入力フィールドは削除します。ラベルは分かりやすく入力するユーザーの立場にたって、ラベル付けします。 例えば、「コメント」と単に記すだけでなく、「コメントを残してください」「あなたの意見をどうぞ」などです。また、「URL」などは用
いろいろなシーンに対応 必要な時、スピーディに フォームとページ を作成できます。 あらゆる課題を解決する活用法やサンプルを紹介！ イベント・セミナー キャンペーン ネット販売 アンケート お問い合わせ 予約 登録 採用 ホームページ 社内の報告書
Form Design フォームデザイン さてさて、最近のwebの入力フォームは本当に凝ってるところが多くて、ただただ関心するばかり。 そんなわけで今回は、焦点を『フォーム』に限定し、スタイル抜群なフォームUIを勉強してみたい。 流れ的には インスピレーションデザイン集CSSによるフォームの変更方法JavaScriptによるフォームデザインという感じでお送りいたします。 インスピレーション まずは、スタイリッシュなフォーム。 これらは、webデザイン全体がフォームデザインとなっているまとめです。 まさにバインダー。 webの入力フォームを街頭アンケート用紙のように仕上げたデザイン。かっこいい。 くしゃくしゃっとしたような紙の一部にフォームが設置されている。 こちらもメモに名前を書くかのごとく。 深海に光がさす感じのイメージ。 シンプルイズベストなレイアウト設計がなされている。 １，２，３，
25 Stylish Examples of Web Forms スタイリッシュなWEBフォームの実装例がいろいろと紹介されており、一部ご紹介。 フォームというと簡単なデザインで済ましてしまう場合が多いと思いますが、こうしたところにもこだわっていると力の入れ加減が伝わってきますね。 デザイン自体もなかなか難しいと思いますが、参考にして綺麗なフォームが作れそう。 Alexandru Cohaniuc 壁に貼ったみたいなインタフェースでオシャレ Tea Round App 角丸で立体的なフォームがナイス Grooveshark 子ダイアログ風のポップアップフォーム Substrakt Matt Pixelight Creative 全部見る デザインを学んだ上で、ユーザビリティについても考え、あくまで利用者視点にたった使いやすいフォームを作りたいものですね 関連エントリ CSSでデザインされた
twitter facebook hatena google pocket フォームに間違った内容が入力された際に、どこがどう間違っているかを表示してくれるとわかりやすくなります。 jQuery Form ValidatorsならJavaScriptで実現可能です。 sponsors 使用方法 jQuery Form Validatorsからファイル一式をダウロードします。 <link type="text/css" rel="stylesheet" href="validator.css" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="validator_0.1.js"></script> 上記記述後、フォームを以下のルールで書き込
ToggleVal :: jQuery Plugins by Aaron Kuzemchak 入力ボックスでクリックすると消えるデフォルト値を簡単実装「ToggleVal」。 入力ボックスにデフォルトでヒント値を入れておいてクリックすると消えるあの分かりやすいインタフェース。 実際に実装するとなると、ちょっと面倒ですが、ToggleValを使えば、メソッドを1回呼び出すだけで簡単に実装できます ↓↓↓↓クリックで消える↓↓↓↓ jQueryプラグインなので、以下のように使いやすくなっています。 $("input[name='name']").toggleVal( { option } ); 実装したくなった時、ちょっと面倒でまた今度、とならないようにこれを覚えておけばよさそう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く