ログインをもっと快適に オープンソースのログインフォーム10選「10 Open Source Login Pages Built With HTML5 & CSS」 会員登録ページや管理画面へのアクセスに使用するログインページ。シンプルなものが一般的ですが、こだわりを見せることでサイトのクオリティは高まります。今回はそんな時に参考にしたい、オープンソースのログインフォーム10選「10 Open Source Login Pages Built With HTML5 & CSS」を紹介したいと思います。 Sign in 10種類の、それぞれ個性をもったログインフォームがピックアップされています。 詳しくは以下 Login Form ログインフィールドにドロップシャドウがかかった、フォームやボタンのエッジが丸い、柔らかい印象のフォーム。フラットテイストなトレンド感を感じさせるデザインですね。
2016年4月〜2016年6月の個人的ブックマークです。 2016/04 Development Almost complete guide to flexbox (without flexbox) | Kenan Yusuf CSS Shapesでテキストを回り込ませるレイアウトを表現 | Webクリエイターボックス MaintainableCSS - an approach to writing modular, scalable and maintainable CSS | By Adam Silver Modaal is a WCAG 2.0 Level AA accessible modal plugin Popper.js 360 Degrees Product Viewer in CSS and jQuery | CodyHouse Turntable.js : A Resp
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
フォームのレイアウトっていざ作ろうとすると結構迷う事多いですよね。フォームのデザインはもちろん、どうしても入力項目が多くならざるを得ない時なんかは、考える事は底知れずって感じです。 今日はそんな時にもしかしたら便利ってなるかもしれないJS／CSSフレームワークの一つ『Grid Forms』をご紹介させて頂きます！ フォームデザイン苦手ーって人も、ちょっとこの辺から触ってみても良いかもですね〜。 Grid Forms Grid FormsのGithubからファイルをダウンロードしてみると、既にサンプルファイルが用意されているので、それ見ながらちょっとお話した方がいいかもっすね。 サンプルを開くと以下のようなフォーム例が表示されると思います。 なんか紙の入力欄みたいですね。ネットに慣れて居ない人へのアプローチも、もしかしたら良さげかな？ 試しにちょっと作ってみましたが、とにかく楽。これが物の３
Simple and Effective jQuery Dropdown Login Formは、軽量でお手軽にログインフォームを設置出来るプラグインです。 ちょっとしたサイトのアクセント、Twitterみたいなログインフォームを設置したーいという人が何人かいたので共有。 クリックから展開 イメージ的には以下の様な。 中々美しいでしょ？ 設置方法 はじめにjQueryをGoogle先生から呼び出し、CSS、login.jsを読み込みます。 <link rel="stylesheet" href="css/style.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script> <script src="js/login.js"></scrip
What? Behave.js is a lightweight library for adding IDE style behaviors to plain text areas, making it much more enjoyable to write code in. Supports Partial IE6, IE7+, Firefox 8+, Safari 4+, Chrome X+, Opera 12 No Dependencies Custom Code/Behavior Fencing Hard and Soft Tabs Auto Open/Close Parenthesis, Brackets, Braces, Double and Single Quotes Auto delete a paired character Overwrite a paired ch
select要素のoptionを分かりやすく 表現する、というライブラリです。 選んだ項目にあわせて設定した画像 が表示、選んだoptionに連動しま す。これは結構いいアイデアじゃ 無いかなと。 select要素のユーザビリティ向上、みたいなスクリプトです。jQueryに依存します。 こんなやつです。選ぶと画像にも青い枠が付く、みたいなの。画像はマークアップせず、option要素にカスタムデータ属性を与える事で実装します。 Sample 選択すると画像の選択箇所も連動します。 コード<script src="jquery.min.js" type="text/javascript"></script> <script src="image-picker.min.js" type="text/javascript"></script>本体とプラグインを読み込んで $(".foo").ima
なかなか良さそうだったので備忘録。 input要素に入力したテキストが長く なると、位置の把握やテキストの量 が把握できません。これが地味にス トレスな事もあります。これを解決 する、というスクリプトです。 input要素に長いテキストが入力されてる際に、カーソル位置をバーで明示し、大まかな長さも可視化します。 Smart Input Field Position Indicator 説明が下手で伝わってない気がするので以下のサンプルをご確認下さい。 Sample value属性に書いてますが、入力したテキストでもバーは表示されます。デモのアニメーションやバーの色はCSSで施行しています。余分なDOM要素を追加する必要が無いのはいいですね。 $('.foo').inputIndicator({bgPos:'31px'}); 本体とプラグインを読み込んで初期化します。あとはbgPosという
LocalStorageを使用したモックアップ の作成ツールのご紹介。シンプルで 軽量なので使いやすいです。見やすい し、D&Dで操作出来ます。手軽で使い やすいのは素敵ですね。プレゼン用 なんかにもいいかもしれません。 シンプルなモックアップ作成ツール。githubでもソースが公開されています。Backbone.jsやLocalStorageで作ったそうです。 左のエリアからシェイプやフォームのパーツをドラッグして方眼紙の箇所にドロップする、という普通の流れで作成します。マウスでリサイズやテキストの変更も容易に行えます。 日本語も問題なし。要素を選択すれば下部で変更出来る様になっています。 エクスポートはPNGで発行されます。自分好みにカスタマイズして使うのも良いのでは。 mockup-designer
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; 枠線を角丸にします。
世間が彼を見捨てても、私はキムタクの月9を見続けます。 どうもこんばんは Latin です。 今回はエントリーフォームの最適化についてです。 フォームって、ウェブサイトをローンチした後は、メンテナンスが全然されていない･･･って事は結構多いのではないしょうか？ 仕様が思いの外複雑であったり、分析・改善に費やす時間がなかったりと、理由は様々だと思うのですが、今回は最低限把握しておくべき項目をまとめてみました。 フォームの初期実装時やリニューアルなどに少しでもご参考になればと思います。 【入力サポート】 選択項目は、デフォルト値に配慮する 例えばですが、都道府県のプルダウン選択なら、メインターゲット層の多い都道府県にするというヤツです。「東京都」をデフォルトにしているところを良く見かけますよね。 必須アイコン「必須」の表記で目立つ色で配置する 「※」や「*」は不親切だし、伝わりづらいようです。
なんかタイトルの日本語がおかしい気もしますが。。。 忙しい人のための解決法超概要 デフォルトのフォームテーマ(form_div_layout.html.twig)では、choice_widgetブロック内でexpandedの場合に改めてform_widget関数を呼び出しているが属性情報を引き継いでいないため、ラジオボタンとチェックボックスに属性を直接付けることができない。なので、このようなカスタムフォームテーマを作ってテンプレートに適用する必要がある。 発端 Symfony2のFormTypeで、radioボタンの属性ってどうやって付ければ良いんだろう？twig側のform_widget関数にattr属性を指定してもradioボタンを囲むdivタグにその属性が付いてしまう。。。 #symfony2 ツイートのとおり、ラジオボタン(choice)を含むFormTypeがあり、そのラジオボタ
Coloured 前後+カラーリングのパターン 実装 HTML HTMLはシンプルで、アイコンやカラーリングはclassで判別します。 <!-- 1st prefix with email icon and default color (grey) --> <input placeholder="Type here..." class="ppfix pre email" type="text"> <!-- 2nd postfix with google plus icon and default color (grey) --> <input placeholder="Type here..." class="ppfix post gplus" type="text"> <!-- 3rd prefix with home icon and blue color --> <input pla
Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better selectボックスを超カッコよくするjQueryプラグイン「Chosen」 味気ないselectのデザインをゴージャスかつ多機能に変えてくれるプラグインです。 左が普通のselect。これをカスタマイズして右のイメージに。インクリメンタル検索ができるので項目数が多くてもOK タグ選択っぽいインタフェースにすることも出来ます 選択時のイメージ。カッコいい。 BootStrapライクなデザインなので組み込んでしまっても違和感ないかもですね 関連エントリ 中身が画像のselectボックスを作るjQueryプラグイン デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン カッコいいselectボックスを作成でき
WEBサイトからのお問い合わせを増やしたい！と思ったときに、サイトへの訪問者数を増加させるだけではなく、すでにサイトに来てくれているユーザをいかにお問い合わせまで導くのかも重要です。 しかし、EFO(エントリーフォーム最適化)がBtoCほど浸透していない、BtoBサイトでは離脱率が90%を超えるサイトも珍しくありません。 まずは自社サイトのお問い合わせフォームの離脱率を把握することが大切ですが、離脱率が高いことがわかっても「なにを改善すべきかわからない」「項目を減らしてみたが、それ以外の改善策がわからない」といった方が多いのではないでしょうか。 今回は過去500社以上のサイトを制作・運営する中で検証してきたEFOのノウハウを一挙にすべてご紹介します。 自社のお問い合わせフォームを改善する際のチェックリストとして是非お使いください！ ■目次入力支援エラー対応セキュリティおもてなし最後に■入力
ddSlickはドロップダウンメニューにアイコン、説明文を追加できるjQueryライブラリです。 常々HTMLのコンポーネントは貧弱だと思っていた。特にドロップダウンの使い勝手の悪さったらない。テキストしか表示できず、情報選択のUIとしてあまりに粗雑ではなかろうか。そしてみんなが望んでいたライブラリが登場した。それがddSlickだ！ 見よ、この格好いいドロップダウン！テキストに加えて画像が表示できるようになっています！ ダイナミックに変更も可能です。まず普通のドロップダウン。実にいけてない。 じゃじゃーん！ もちろん普通のドロップダウンライクに値が取得できます。選択した項目のデータも取れます。 外部から値を与えて表示項目を変更することもできます。 コールバック対応！ デフォルトの選択もできます。 画像を右に寄せられます。 さらに説明をつけて行ごとに高さを可変にもできます。 画像がない場合
セレクトボックスを美しいデザインにするだけでなく、各アイテムに画像を配置したり、タグやプレースホルダテキストや検索の対応、セレクトボックスのコントロールなど、さまざまなことができるjQueryのプラグインを紹介します。 Select2 GitHub [ad#ad-2] Select2の対応ブラウザ Select2のデモと実装 Select2の対応ブラウザ Select2の対応ブラウザは下記の通りです。 IE8+ ※IE7はz-indexを使った一部のものにバグあり。 Chrome8+ Firefox3.5+ Safari3+ Opera10.6+ Select2のデモと実装 各デモとともに実装方法を紹介します。 jQueryは1.7+推奨で、1.4.2から対応しています。 デモ：ベーシック（上：既存、下：Select2適用） まずは、ベーシックなデモから。 下記のシンプルな記述で、既存のセ
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
