This domain may be for sale!
![Deep Learning](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f63d7e865fee628c492941cb26865489e88ec3e/height=288;version=1;width=512/https%3A%2F%2Fuser-images.strikinglycdn.com%2Fres%2Fhrscywv4p%2Fimage%2Fupload%2Fc_limit%2Cfl_lossy%2Ch_630%2Cw_1200%2Cf_auto%2Cq_auto%2F1226680%2Fdeeplearningbook_egq0xt.jpg)
TwitterのUIのように、入力できるテキストの残りの文字数をカウントして表示するスクリプトをcss globeから紹介します。 Simplest Twitter-like dynamic character count for textareas and input fields デモページ 上記デモページではデフォルト版とカスタム版の二種類があり、デフォルト版は残りの文字数をカウントして表示し、カスタム版は設定した残りの文字数を超えると表示が強調されるようになっています。 スクリプトのオプションでは入力可能な文字数、強調表示する文字数の設定と、カウンターを配置する要素やクラス名やテキストデータを設定できます。 charCountはjQueryのプラグインのため、実装にはjquery.jsが必要です。
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ(特にIE9以下)によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
[レベル: 初〜中級] 入力フォームのフィールドには、入力が「必須」なのかまたは「任意」なのかのラベルを両方付けることが推奨されます。 どちらか片方だけだと入力途中の離脱の原因になります。 ECサイトのユーザービリティ調査と最適化を専門に扱っているBaymard Instituteが詳しく解説しています。 15の大手ECサイトのユーザビリティ調査と18の主要なモバイルサイトのユーザビリティ調査、そして自社による最新の大規模なアイトラッキングテストによって実証することができました。 この記事では、その解説の要点をまとめて紹介します。 片方だけの「必須」「任意」ラベルの問題点 入力が「必須」か「任意」かをどちらか片方のラベルだけで示すことにはさまざまな問題点があります。 必須か任意かを示さないのはいちばんよくない そのフィールドの入力が必須か任意かを示さないのはいちばんよくないスタイルです。
今回よりフォーム関連の実践 前回はタブパネルをプラグインとして利用することについての説明をしました。プラグインとして作ることで、様々なサイトで使いたい部分で使えるようにできるという点でも、とても便利です。今後もプラグインとして利用できるような作り方の説明も入れていきますので、みなさんもぜひ挑戦してみてください。 さて、今回より数回にかけて、フォーム(Form)関連の実践例についてご紹介していきます。フォームでは、ユーザーが使いやすいよう(入力しやすいように)に工夫することで様々な点において、利便性を向上させることができます。 今回はフォームの入力部分に入力例などを入れておき、フォーカスしたときにその入力例を消す仕組みを作ってみることにします。 入力例を入れておきフォーカス時に消す フォームの入力部分で、入力例を入れておくことで、その部分にどのような入力をしたらいいのか明示しておくことができ
使いやすいフォームをデザインする6つのポイント みなさんは、どのようにフォームをデザインしているでしょうか? CSSでスタイリングされていない素のHTMLフォームは、当然ですがデザイン性にとぼしいものです。また、入力エリアが狭いため、ユーザビリティも高いとは言えません。 フォームにはお問い合わせフォーム、申し込みフォーム、予約フォームなどいろいろありますが、共通するのは「ユーザーにアクションを起こしてもらう重要な要素である」ということです。しかし、フォームへの入力は、ユーザーにとって面倒な作業です。そのため、極力簡単に入力できるようにして、ユーザーの負荷を軽減する必要があります。 それでは、どうすればユーザーの負荷を軽減させることができるでしょうか? そのためのポイントが以下の6つです。 要素を整列させる 適度な余白をつくる ディテールを作り込む デザインされたボタンを使う 住所を自動入力
フォームの送信ボタンをクリックしたとき、エラーが表示されたらガッカリしてしまいますよね。そうしたことが原因の「ガッカリ離脱」を防ぐために、エラーがない状態になるようにユーザーを導き、確認画面、完了画面に進んでもらうことが、完了率アップには極めて重要です。今回は、入力項目ごとに、ユーザーが入力した内容がフォームの求める形式になっているようにするための改善ポイントをご紹介します。 この記事では、入力フォームを改善して入力完了率を上げる!エントリーフォーム最適化15か条の【第7条】「入力エラーをリアルタイムで伝えるべし」をご紹介します。リンクをクリックするとこの記事下のまとめに飛びます。 「ガッカリ離脱」を未然に防いで、入力完了率アップをしようエントリーフォームにひと通り入力を終えて「確認/完了ページ」へ進もうとしたのに、エラーメッセージがでてガッカリした経験はありませんか? ガッカリしたユーザ
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
ここ半年間の間に、立て続けに3人の友人から引越し先の部屋探しに付き合いを求められました。こんな偶然ってあるんですね! その影響からか、ネットでの不動産探しが趣味になってしまいました。今では本気で引越しようかと目論んでいます。 そこで、今回はこの半年間で「この部屋に住みたい!」「このマンションはお洒落だ!」だと思わず、本気で引越しを考えてしまったサイトを紹介しています。よければぜひ参考にしてくださいね! あなたも引越したくなるサイト集 ジョイライフスタイル ■URL:http://joylifestyle.jp/ ■特徴:生活シーン別に20種類以上にカテゴリーされています。例えば「ペットと暮らす」「天井が高い」「バイク駐輪」など。サイト構成も少ないクリック数で詳細ページへ行けて非常にわかりやすくサイトです。物件ページごとにフォームあり。 ■地域:東京都
メモ状のデザインのフォームに、ユーザーが入力した箇所のフォントをブラウザのデフォルトから変更し、手書き風にしたコンタクトフォームを制作するチュートリアルを紹介します。 デモページ:日本語は設定されてないため、ブラウザのデフォルトフォント 実装 フォームの制作はHTML+CSSだけでなく、メモ状のUIを作るPhotoshopのチュートリアルも掲載されています。 ここでは、デザイン部分は省略して、以下フォームの実装を紹介します。 HTML: 基本構造 まずは、HTML5を使ってフォームを配置する前の基本構造から。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Pen & Paper Form</title> <link href="style.css" rel="stylesheet" /> </head>
Railsで実際にFormオブジェクトを作ってみたらいくつか気をつけるポイントがあったので紹介します。 ActiveRecord / Rails / Ruby この記事はRuby on Rails Advent Calendar 2014の2日目です。 1日目は@miyukkiさんの「結局Ruby on RailsとPHPってどっちが優れてるの?」でした。おつかれさまでした。 Formオブジェクトとは Formオブジェクトはその名の通り入力フォーム用のオブジェクトです。 フォームとモデルがうまく対応しているときはActiveRecordをそのまま使えば良いのですが、 複数モデルを作りたかったりモデルとは違うValidationを行いたかったりする場合にはFormオブジェクトを使うと便利です。 Formオブジェクトのサンプルコードはこんな感じになります。 class Blog::SiteFo
Janko at warp speedのエントリーから、フォームの入力時に、ラベルと入力箇所をハイライトして、より分かりやすくするスクリプトを紹介します。 Building a better web forms: Context highlighting using jQuery デモ デモでは残念ながら、labelは使用されておらず、class名「row」のdivで囲まれた範囲にハイライトが適用する仕様になっています。 ハイライトする箇所は、ラベルと入力箇所のほかにも、そのグループ全体をハイライトすることも可能です。 Context highlightingはjQueryのプラグインのため、動作にはjquery.jsが必要です。 また、上記と同じエフェクトを実装するスタイルシートが別サイトで紹介されています。
デモ:Safari/OS Xで表示 フォームの見た目はどのブラウザでも美しく表示されていました。スクリーンサイズを変更しても同様に美しく表示されます。 Formplateの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsとModernizrを外部ファイルとして記述します。 <head> // Required javascript <script src="js/min/jquery-v1.10.2.min.js"></script> <script src="js/min/modernizr-custom-v2.7.1.min.js"></script> // Formplate <script src="js/min/formplate.min.js"></script> <link href="css/formplate.css" rel="st
セキュリティは古くて新しい問題です。SQLインジェクションも古くからある問題ですが現在の問題です。対策は比較的簡単なのですが今でもなくなりません。と言うよりも今でも現役のセキュリティ上の問題で十分注意が必要です。この連載でも何度かSQLインジェクション対策について簡単に取り上げています。 第5回 まだまだ残っているSQLインジェクション 第14回 減らないSQLインジェクション脆弱性 第15回 減らないSQLインジェクション脆弱性(解答編) 第24回 無くならないSQLインジェクション脆弱性 今回はSQLインジェクションを復習してみたいと思います。 SQLインジェクションとは SQLインジェクションはプログラマが意図しないSQL文を実行させる攻撃で、2種類の攻撃方法に分類できます。 直接SQLインジェクション 間接SQLインジェクション 直接SQLインジェクション 直接SQLインジェクショ
Contact form7を使ってるとスパムメールが多い… こんにちは、Webマーケッターの荒木です。 Contact form7を使っていると、スパムメールがめちゃくちゃ来ませんか? このサイトでもContact form7を使っているのですが、スパムメールが毎日のように来てました。 多い時には30通くらい来る時があって、これを処理するだけでも非常にストレスです。 面倒くさくなって放置していると、たまに大事なメールもあったりして、焦るときがあります。 同じようなストレスを感じている方もいると思いますので、今回はContact form7でスパムメールをブロックする方法をご紹介します。 超簡単ですので、是非やってみて下さい。 まずContact form7の設定画面を開きます。 「フォーム」の[タグの作成]をクリックして、[承認の確認]を選択します。 表示されているショートコードを左のフォ
フォームに関する基本的なTips 今回からフォームに関するTipsを数回に分けて解説していく。フォームに関しては、コントロールの使い方の解説がメインになるため、日常業務のどんな場面で利用できるかについては、あまり触れていない。 その代わり「このコントロールを使用すれば、このようなことができる」という使い方の解説を行うので、「どのような場面でこのコントロールを使えば、業務の効率化が図れるか」は、各読者の皆さんに考えていただきたい。 フォームの作り方とフォームのタイトルの付け方 初めは「フォームの作り方とフォームのタイトルの付け方」について解説する。 まず、VBE(Visual Basic Editor)を起動し、VBEのメニューから[挿入]→[ユーザーフォーム]を選択する。すると、図1のようにフォームが表示される。マウスを右隅下に持っていてドラッグすると、フォームのサイズを自在に変更できる。
全ての入力項目を終えた後に、エラーメッセージが出て、もう一度入力をユーザーに強いるのは、不快感を与えるだけでなく、離脱の原因になりかねません。今回は、それらを解決する方法として、入力をリアルタイムに支援する工夫を行っている実際のフォームを例に挙げ、入力完了率を上げる3つのポイントを解説します。 この記事では、入力フォームを改善して入力完了率を上げる!エントリーフォーム最適化15か条の【第5条】「入力に達成感を感じてもらうべし」をご紹介します。リンクをクリックすると第5条のまとめに飛びます。 入力完了率がアップする、入力を助ける3つ機能エントリーフォームに来て、入力を開始したユーザーは、特にフォーム側で工夫がなければ、項目への入力を行った際、「フォームで求められている入力形式や内容を満たしているかどうか」=「入力完了」かどうかを自分で判断します。 この各項目の入力が完了したかどうかの判断を自
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く