実直なHTML5/CSS3でつくられたモバイルファーストのフレームワーク -Markup Framework
商用利用も無料、変更もコピーも再配布もOK、汎用性に優れたレイアウトやUIエレメントをスタンダードなHTML5/CSS3で実装したフレームワークを紹介します。 ウェブサイトを構築する際に、ベースとして利用するのによさそうです。 Markup Framework Markup Frameworkの特徴 Markup Frameworkのサポートブラウザ Markup Frameworkのデモ Markup Frameworkの特徴 レスポンシブ対応、モバイルファーストのレイアウト。 再利用可能なUIエレメントのライブラリ。 最新のスタンダードなHTML5/CSS3を使用。 ピュアなHTMLとCSSで、Hackなし、JavaScriptなしです。 ミニマルなマークアップ。 ページの容量は小さめ。 サーチエンジンにフレンドリー。 アクセシブル。 セマンティックスとスタイルの明確な分離。 モジュー
2chまとめくす
まとめくす とはどのようなサービスですか？ 5ch.net や talk.jp からまとめ記事をブラウザ上で簡単に作成・投稿できるツールです まとめくす を利用することで具体的に何ができるようになりますか？ 対応している掲示板のスレッドのURLからデータを読み込むと、レスの文字サイズやカラーの変更、レスの並び替えが簡単にできるようになり、読みやすい記事を簡単に作成できます。 まとめくす は誰が運営者していますか？ エムティーエム株式会社 が運営しております。 まとめくす の利用は無料ですか？ はい、無料でご利用いただけます。ご利用には アカウント登録 が必要です。また まとめくすアンテナ への参加が利用条件となっております。 アカウント登録には何が必要ですか？ メールアドレスが必要です。また任意のパスワードの設定をお願いします。 まとめくす がリニューアルされる前からの利用者です。旧バージ
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
Monacaで作ろう 簡単スマフォアプリ！
こんにちは、志田です。 今回は、弊社で開発しているスマートフォンプラットフォーム「Monaca」を使って、アドレス帳検索アプリを作ってみます。 1. Monaca開発準備 まずはMonacaで開発できる環境を整えましょう。 弊社松田の記事を参考に、Monacaアカウントを取得、プロジェクトを作成しましょう。 Monaca + enchant.js でお手軽スマフォゲームアプリ開発 そして、実機にMonacaデバッガをインストールしてください。 http://docs.monaca.mobi/manual/debugger/ 2. 表示部分 index.htmlの編集 今回のアプリはとても簡単な作りですが、このような作りのアプリにしたいと思います。 (1) 入力フォームに検索したい文字列を入力する (2) 携帯のアドレス帳を検索する (3) 検索フォームの下に、検索結果を表示 まず、表示部分
[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> <
jQueryのselectタグ操作かんたんまとめ | もしもワークス
jQueryでselectまわりをいじるときのまとめです。 基本 選択項目の値を取得する。 $('select').val(); //短い書き方 $('select option:selected').val(); 任意の項目を選択する。 $('select').val('hoge'); //optionのvalueに相当する値を代入 選択項目の変更を察知する。 $('select').change(function() { alert( $(this).val() ); }); 選択項目を変更し、かつ変更イベントをトリガーする。 $('select').val('hoge').trigger('change'); 応用 表示項目を切り替え プルダウンリストの項目を操作して状況に応じて表示項目を切り替えたい。 ここでは#fooは対象のselect要素。class=”bar”のoption
[JS]スマフォに最適！フォームのラベルをアニメーションでぽんっと表示するスクリプト -Label Better
フォームにフォーカスすると、プレースホルダーに配置したラベルがアニメーションでぽんっと上に移動するjQueryのプラグインを紹介します。 デスクトップ用のページで使用してもかっこいいですが、スマフォ用のページにも省スペースを兼ねて使用してもいいですね。 デモページ name, mailの他にもpasswordなどのフォームも用意されています。4番目のデモでは、プレスホルダーのテキストとは異なるテキストを表示します。 また、デモにはありませんが、ラベルは上・下・左・右に移動させることもできます。 Label Betterの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
noUiSlider - JavaScript Range Slider | Refreshless.com
<div id="slider"></div> var slider = document.getElementById('slider'); noUiSlider.create(slider, { start: [20, 80], connect: true, range: { 'min': 0, 'max': 100 } }); npm install nouislider yarn add nouislider // When using a bundler such as Webpack, // include both noUiSlider and its stylesheet. // Either import the default: import noUiSlider from 'nouislider'; // Or the namespace: import * as n
[JS]かっこいいインタラクションを伴ったスマフォに最適な省スペース用フォームのデモ
先月の終わりにdribbbleで公開された時に、うわっかっこいいな！と思いチェックしていたコンセプトにデモとして動作するスクリプトが開発されたので紹介します。 まずは、dribbbleでのコンセプトから。 [GIF] Mobile Form Interaction フォームの入力欄の各ラベルをプレースホルダーテキストとして表示し、タップして入力する時に、アニメーションでそのテキストがふわりと上に移動し小さく表示されます。 これはスマフォでは特に重要な省スペースとしても優れており、また入力後にそれが何の項目であったかユーザーに伝えることができます。 で、そのコンセプトにインスパイアされて開発されたスクリプトが「JVFloat.js」です。 デモのキャプチャ ※デモはダウンロードファイルに含まれています。 アニメーションのブラッシュアップやコードの最適化など宿題があるそうですが、実装はこんな感
[CSS]スマフォでも印刷してもレイアウトが紙のように美しいフォームを実装できる -Grid forms
デスクトップでの表示はもちろん、スマフォやタブレットでも、そして印刷してもかっこいいレイアウトのフォームを実装できるスタイルシートのフレームワークを紹介します。 将来的にはスクリプトを使って、機能を強化していくようですよ。 Grid Forms Grid Formsのデモ Grid Formsの使い方 Grid Formsのデモ 本格的なデモの前に、まずは簡単なデモから。 デモはChrome, Safari, Firefoxなどのモダンブラウザ、スマフォ・タブレットのブラウザでご覧ください。IEは9+で、IE8以下はレスポンシブ非対応ですが別スクリプトを併用することで対応可です。 Grid Formsはその名の通りグリッドをベースにしたフォームで、紙のようなレイアウトの美しいフォームを簡単に実装できます。 デモページでは、フォームのさまざまな要素が美しいグリッドできっちりレイアウトされてい
Enjoy*Study - WEBシステムでの入力文字のテストについて
WEBシステムで、フォームの入力文字として、確認しておいた方が良い文字のパターンを列挙してみます。 (自分の備忘録として。思いついたら随時追記。) HTMLエスケープ <>&"'入力した文字が、ちゃんと画面に表示されるか確認する。 例えば、<hr> "' のような文字を入れてみて、HTMLとして解釈されないようになっていること。 DBに登録されるような項目の場合、DB上にはどのような形で登録されるのか確認。(必要もなくエスケープしてDB上に登録していたりしないかなど) JavaScriptへの埋め込み文字 <>&"'\HTMLエスケープに絡んで、、JavaScriptのコードに対して、HTMLエスケープと同様にエスケープした文字を埋め込むと問題が起きる可能性があるので注意。 <hr>をエスケープした文字を埋め込むと、 alert("<hr>");そのまま<hr&
【jQuery】フォームから様々な値を取得する方法まとめ | tagamidaiki.com
jQueryはとても便利なプラグインです。 JavaScriptの普及を助けたといっても過言ではありません。 jQueryのおかげで煩雑なコードをかかずに綺麗なコードで色々なものが作れるようになりました。 今回は少し忘れやすい、jQueryでフォームから値を取得する方法をまとめていきます。 テキスト よく使われる1行のテキストボックスです。 これはとても簡単でform要素に .val() で値を取得することが出来ます。 HTML <form id="test-form"> <input type="text" name="test-form" value="56"> </form> JavaScript var formValue = $('#test-form [name=test-form]').val(); var val = Number(formValue) || 0; // N
フォームの入力欄にテキストを表示する際、ユーザーが使いやすくよりセマンティックに実装する方法
フォームの入力欄にテキストを表示するテクニックとして、HTML5のplaceholder属性やtitle属性にいれたテキストをスクリプトで置き換える方法などがあります。 しかし、placeholderはplaceholderなので、ラベルの代替として利用するのはW3Cでも推奨していません。 参考：The placeholder attribute -W3C フォームに余分なHTMLを追加せず、ラベルを利用してシンプルに解決する方法を紹介します。 入力時はラベルがツールチップで 実装 実装のポイント label要素内のテキストをラベルとして利用する。 初期状態でラベルのテキストを表示する。 入力時にもラベルがユーザーの目に見えるようにする。 ラベルの配置はフォームとページのレイアウトで行われるようにする。 スクリプトが利用可能でない時でも、ラベルを利用できるようにする。 これらのポイントを踏
んっ？−ちゃよて・ちゃよて
We could not find anything for your request! 御要求のWebページ、画像、ファイルが見つかりません。 トップページへ サイトの内容紹介ページへ
html5のwebStorage(localStorage)でデータを保存する - Web.fla
webStorageとは 主に二つの種類があるみたいですね～。ひとつはlocalStorageともうひとつはsessionStorageです。 sessionStorage : セッションで管理してるのでブラウザを閉じるとデータが消える。 localStorage : ブラウザで永久的に保存できるのでブラウザを閉じても保存されている。 ふたつの違いの細かい話については「ブラウザでストレージ？ Web Storageを使いこなそう」に詳しく書いてあります。 さて、この機能なんですが先ほども説明したようにユーザーが使っているブラウザにデータの保存や追加・削除といったことがJavaScriptで可能となりました。 若干、クッキーにも似ていますが保存できるデータ量も違いますし、localStorageもsessionStorageも基本的には、キー（key）と値（value）をセットとして扱うため
20 Creative Design Galleries to Submit Your Website
2013年3月25日 Web Design Web design gallery websites are very useful to get inspiration. When you had created great works, show off your creative design which you are really proud of! All of the ones featured in this post are free to submit to. I will share some Japanese web design galleries as well. [adA-en] You can submit your website from “Submit” page. People who are managing those gallery websit
CSS3の可能性を見いだし、且つIE8でもレンダリングされる、使いやすくてかっこいいフォームを実装するチュートリアル
Custom Login Form Styling 下記は各ポイントを意訳したものです。 「使いやすい」フォームをつくるポイント 「使いやすい」と「かっこいい」を両立したフォームの実装 「使いやすい」フォームをつくるポイント ログイン、コメント、コンタクト、フィードバックなど、フォームの入力には多くの時間がかかります。もしフォームが使いにくいものであれば、それはあなたがユーザーを混乱させていると言ってもよいでしょう。 フォームをより使いやすく、ユーザフレンドリーにするポイントがいくつかあります。 ラベル ここで言う「ラベル」はlabel要素のことではなく、フォーム上に表示されるラベルです。ラベルは明確にしておく必要があり、この情報によってユーザーはそこに何を入力するべきか知ることができます。 ラベルにはアイコンなどを使って、ビジュアル的に理解を深めるようにしてもよいでしょう。 フィールド
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[js] スマートフォンのAjax フォーム送信時にキーボードを消す![[js] スマートフォンのAjax フォーム送信時にキーボードを消す](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
HTML5のさまざまなform要素があなたのブラウザでどのように見えるかのまとめ -Native form elements