[JS]HTML5の「プレースホルダーテキスト」をスクリプトで実装する旧式と今時の方法
HTML5のウェブフォームの機能「プレースホルダーテキスト」をHTML5に対応していないブラウザにも実装する旧式の方法、ModernizrとjQueryを使った今時の方法、の二つを紹介します。 HTML5対応ブラウザでは、「placeholder」の値がテキストフィールドに表示されます。 <form class="form"> <p><input type="text" placeholder="Your name please"></p> <p><input type="text" placeholder="Enter your email"></p> <p><input type="search" placeholder="Search"></p> <p><textarea placeholder="Write your comments here"></textarea></p> <
[CSS]チェックボックスを使ってできるちょっと面白いテクニックのまとめ
コンテンツスライダー、画像拡大、ツリー型メニューなど、チェックボックスを使ってできるちょっと面白いテクニックをまとめたスライドを紹介します。 Checkboxes and the ridiculous things you can do with them 上記のスライドでは、チェックボックスを使ったさまざまなテクニックがまとめられています。 1ページ目のチェックをオンにすると、ロケット発射から始まります。 スライドから面白そうなテクニックをいくつかピックアップしました。 チェックボックスを使ったフック チェックボックスの美しくスタイル チェックボックスを使ったツリー型のメニュー チェックボックスを使った画像の拡大表示 チェックボックスを使ったレスポンシブ対応のスライダー チェックボックスを使ったフック まずは、ベースとなるチェックボックスを使ったイベントのフックの使い方です。 チェックボ
ログインフォームに大切な7つの要素と重要な1つの機能
ログインフォームを実装する際に、大切な7つの要素と重要な1つの機能を紹介します。 元記事では下記のCSS3で実装されたフォームもダウンロードできます。 フォームのタイトル このフォームが何についてのものであるか手短に説明されたタイトル。特に、ウェブサイトの名称を記すことは非常に重要です。 非メンバー用のリンク 非メンバーが偶然、このページを見つけてしまうことがあるかもしれません。そして、メンバーを増やすチャンスもあるので、登録ページへの誘導も行っておきます。 ラベルとフィールド ログインフォームは通常、2つのフィールドで構成されていますが、ラベルは読みやすいようにします。 パスワードを忘れた場合 これは同じく、非常に重要なリンクです。多くのユーザーは多数のアカウントとパスワードをもっているものです。そして、しばしばそれはあなたのサイトでどれなのか忘れてしまうことがあります。 また、配置する
[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; 枠線を角丸にします。
CSS3の可能性を見いだし、且つIE8でもレンダリングされる、使いやすくてかっこいいフォームを実装するチュートリアル
Custom Login Form Styling 下記は各ポイントを意訳したものです。 「使いやすい」フォームをつくるポイント 「使いやすい」と「かっこいい」を両立したフォームの実装 「使いやすい」フォームをつくるポイント ログイン、コメント、コンタクト、フィードバックなど、フォームの入力には多くの時間がかかります。もしフォームが使いにくいものであれば、それはあなたがユーザーを混乱させていると言ってもよいでしょう。 フォームをより使いやすく、ユーザフレンドリーにするポイントがいくつかあります。 ラベル ここで言う「ラベル」はlabel要素のことではなく、フォーム上に表示されるラベルです。ラベルは明確にしておく必要があり、この情報によってユーザーはそこに何を入力するべきか知ることができます。 ラベルにはアイコンなどを使って、ビジュアル的に理解を深めるようにしてもよいでしょう。 フィールド
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
