最強の都道府県選択のUIを考えてみた【HTML+CSS+jQuery】 | キノコログ
仕事で、都道府県を選択させてそれに応じた情報を表示させるUIを作る必要がありました。 例えば、店舗情報や求人情報などは都道府県毎に整理して表示させることになるでしょう。 しかし、都道府県の選択をユーザーにストレスなく操作させるのは難儀なことです。 なにせ、選択肢が47種類もあるのですから。 なので今回は、都道府県UIをHTML+CSS+JavaScript(jQuery)を使用して作ってみました。 使いやすい都道府県選択UIとは そもそも、使いやすい都道府県選択にするには、何を目指せばよいのでしょうか。 今回は「最短」「最速」で、「特定の都道府県を選べる」ことを目標に、UIを模索していました。 既存のUIを見てみる まずは、今まで自分が作ってきたUIや、既に運用されているサイトなどを参考に、どんなUIがあるか調べてみました。 セレクトボックス選択 セレクトボックスは、<select></s
レスポンシブの画像問題を解決する簡単な方法 | それからデザイン スタッフブログ
レスポンシブの一つの落とし穴として、「画像の問題」があります。 今回はその「画像の問題」とその解決方法をご紹介致します。 画像の問題とは？ 「画像の問題」といきなり言い出した分けですが、さて画像の問題というと、ここは実際の画面をみると分かりやすいと思います。 demo:https://sole-color-blog.com/demos/responsive/ ※スマートフォンでご覧頂くか、モダンブラウザの場合は画面を小さくしてご覧ください。 デモを見ると画面から画像が飛び抜けてしまっているのがお分かり頂けると思います。 なぜこれが起こるというと、簡潔に説明すると「画像自体のサイズ（縦/横）が優先しそのサイズで表示する」為に起こるのですが、さすがにこれは誰がみてもありえません。 解決する方法として、大きさに合わせた画像を作るという方法などがありますが、その場合スマホの数だけ画像を作る必要がで
React勉強会のノウハウを紹介します | Recruit Tech Blog
こんにちは！ Air メイトのフロントエンドエンジニアの @sadness_ojisanです。今月から「React 人材をどう育むか」という連載を行います、この記事はその第一弾です。 みなさーん！React 人材の採用はうまくいっていますか？？？私たちはまだまだ足りていません！ そこで最近では、React 人材を登用するために、採用だけでなく育成も試みています。 この連載では実際に行なった育成プランとその効果を紹介できればと思います。 私は社内で 2-30 人規模の React 勉強会の講師をしたり、社外でもプログラミング講座の先生などをやっています。 また、大学院では教育学を専攻していたこともあり、育成はかなり関心がある分野です。 この記事では、React 勉強会を開催しているなか、「この教え方や工夫が効いたよ」といった指導方略や、「受講生はここでつまづいたよ」という経験を紹介します。
(function($) {})(jQuery);って何？って思ったからいろいろ試してみた記録 - お勉強orz日和
どうでもいい話なのですが、inputタグのautocomplete属性について先日はじめてちゃんと知った気がしました（今更 それと日記見返すと、昔の方が雑記的だなぁと思った。。 うーん、そう考えるとローカルのもったいないメモは多そうだ。 今度書き出せたらいいなぁ。。 で本題ですが、先日jQueryを使っているプラグインのコードを見てて「(function($) {})(jQuery);」ってどういう意味？て思ったので、調べたりとかしてました。 謎って思ったのはおおまかに３つ。 何故全体を括弧で囲む必要があるのか。 function($)の「$」って何？ ２個目の括弧の中の「jQuery」って何？ これ、ほぼ「(function($) {})(jQuery);」の全てが謎っていってるようなものですねw http://q.hatena.ne.jp/1226297257 上記のURL先を参考にな
jQuery プラグイン Masonry の使い方と設定 | Web Design Leaves
jQuery プラグイン Masonry の使い方と設定 CATEGORY: jQuery | TAG: プラグイン, レスポンシブ 2014年12月6日 ブラウザの幅に応じて、配置した要素のレイアウトを整列してくれる jQuery プラグイン Masonry の使い方や設定に関する個人的なメモ。 Lazy Load や Magnific Popup も一緒に使ってみた。 ★ CSS Grid + JavaScript で Masonry レイアウト も御覧ください（こちらの方が新しい情報です）。 この時点でのバージョン：v3.2.1 目次 jQuery プラグイン Masonry のダウンロード Masonry のページの「Download masonry.pkgd.min.js」を右クリックで「名前をつけてリンク先を保存」を選択するか、「Download masonry.pkgd.mi
【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン | バシャログ。
はじめまして、今月よりバシャログのメンバーになったfukasawaと申します。 まだまだ勉強中で至らぬ点も多々あるとは存じますが、生温く見守っていただけると幸いです。 本題です。社内で行われているjQuery勉強会のネタ探しのためにWeb DesigningのjQuery Lab.を読んでいたのですが、記事の中でinviewというjQueryプラグインが使われていました。 記事では「グラフを描画する領域がブラウザの表示領域内に入ったタイミングで、アニメーションを実行しグラフを描画する」という動作を行うためにこのプラグインが使われているのですが、inviewを使うことで、このように「ブラウザ上で見えたときに処理を実行する」という動作を実現できるようです。 jquery.inview 気になったので使い方を調べてみました。 簡単な使い方 1. jQueryとjquery.inview.jsを読
【jQuery】レスポンシヴ対応の高機能・高品質スライダー［slick］の使い方。Ver.1.8.1対応
【jQuery】レスポンシヴ対応の高機能・高品質スライダー［slick］の使い方。Ver.1.8.1対応 高機能・高品質なjQueryスライダー［slick］の使い方を紹介します。 このjQueryスライダーは「FlexSlider」「BxSlider」「flickity」「Swiper」など、他の優良jQueryプラグインと並んで紹介されることも多く、公式サイトでは「the last carousel you’ll ever need.（訳：あなたが必要とする最後のカルーセル）」と謳われており、実際、オプションの豊富さや安定した挙動が評価され、多くの制作者様がオススメし、また実際のウェブサイトでもよく使われています。 公式サイトは以下。 公式サイト：slick 「get it now」というリンクを押した後、「Download Now」をクリックすると配布されているファイル一式をダウンロ
React + Railsで個人サービスを開発してみた話 - hi, my name is gonshi.
おはようございます。ゴールデンウィークいかがおすごしでしょうか。 これまでブログの中であまりエンジニア的な話はしてこなかったのですが、 改めて自己紹介をさせていただきますと、僕は横浜でWebのフロントエンドエンジニアをやっている者です。 名を田島といいます。どうぞよろしくお願いします。 さて、僕はエンジニアでありながらスロットも大好きなので、 最近ではその趣味が高じて、 誰でも言葉のスロットが作れる！スロットメーカー という、なさそうでなかったWebサービスを作ってみました。 slot-maker.com 制作に用いた技術はフロントエンドに React.js (フレームワークはFlux)、バックエンドにRuby on Rails (主にAPIのみ)という構成で実装しました。 今回はその技術的なお話を書こうと思います。 ところで、僕が普段やっている仕事は、 3分でわかる！事故予測検定 のよう
jQueryでノンリロードメールフォームを作る - 北海道苫小牧市のホームページ制作 STUDIO KEY
jQueryでメールフォームをノンリロードで処理する 以前同じエントリーを公開していましたが、今見るとあまりに稚拙！なので、一端削除して書き直しました。また、今回は自作プラグインぽいものを使い、より簡単に作る方向で解説していきます。 まず、入力チェックにはjquery.validationEngineを使います。 詳しくはこちらで解説してますのでご参考にどうぞ。 自作したプラグインぽいものはこちらからどうぞ めんどいから全部ちょうだい！って方はどうぞ 各ライブラリーやCSSを読み込みます validationEngine.jquery.css" rel="stylesheet" type="text/css"> src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> type="text/jav
jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
jQuery使いが知っておくべきjQueryテクニック8選
目次 1. jQuery 2.x vs 1.x2. イベントハンドリングには on() を使うべし3. AJAXには done(), fail() を使うべし4. ajax()だけじゃなくショートカット・メソッドも活用すべし5. find() を使って絞り込むべし6. カスタムイベントを定義する7. 属性を指定してDOMエレメントを生成できる8. form送信時は serialize() を使って値をまとめて取得すべし参考本記事はjQuery Advent Calendar 2013の23日目の記事となります。今回はjQuery使いとして覚えておきたいテクニックを個人的に8つピックアップしてみました。 日本との時差の関係で更新が24日になっているでしょうが気にせずいきましょう。 1. jQuery 2.x vs 1.x１つ目はテクニックというよりTipsになります。jQueryには最新版の
jQueryのDeferredを用いたモダンなAjax処理の書き方
目次 jQuery 1.4以前の書き方jQuery 1.5以上の書き方jQuery 1.8以上の書き方【発展編1】Deferredを用いた書き方 deferredとは何か？【発展編2】$.when() を用いた書き方参考本エントリは軽めのjQuery Advent Calendar 2012の14日目の記事として書きます。軽めといいながら少し重めになってしまった感がありますが、初めてのAdvent Calendar参加ということでご勘弁を。 ※ Twitter API仕様変更によりTwitter APIを使ったコード例は現在動作しなくなっていることにご注意。 jQuery 1.4以前の書き方まずは、少し古めのコード、昔のjQueryの本とかでよく見る書き方。 $.ajax({ url: "ajax.html", success: function(data) { alert('succes
jQuery のバブリング、preventDefault() や stopPropagation() の使用例 ｜ Tips Note by TAM
2014.06.16 jQuery のバブリング、preventDefault() や stopPropagation() の使用例 jQuery のイベントのバブリング (伝播) については下記のサイトがほんとに分かりやすくて、読んでいただければもうあらためて書くことはないのですが、 jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について (ふじこのプログラミング奮闘記 3行でまとめると、 クリックなどのイベントは、子要素から親要素へと伝播される（バブリング） preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。 return false; を使うと、その要素のイベントも親要素への伝播も両方キャンセルす
jQuery の on() と off() を理解する - tacamy--blog
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
【jQuery】無限スクロール［Infinite Scroll］を極限までカスタマイズ。 - ONZE
無限スクロールを実装する jQueryプラグインの［Infinite Scroll］を紹介します。 スクロールしてページの最下部まで移動すると、次のページの情報を自動で読み込み、ページの遷移無しで次々とコンテンツを表示してくれます。 ご存知のとおりFacebookのフィードやTwitterのタイムライン、TumblrのUIなど、超有名SNSサイトやモバイル版のアプリケーションでも導入されているので、その挙動は誰もが一度は体験しているでしょう。 最近ではクリエイティブ系のブログでも比較的多く実装されていて、需要も高まっているので、ウェブクリエイターの方々はマスターしておくべき技術の1つだと言えます。 さて。今日は、単に［Infinite Scroll］の実装方法を紹介するだけでなく、弊社オンズが実際に行った極限カスタマイズの方法も伝授します。 以下より本編をどうぞ。 基本の導入方法［Infi
slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
[JS]レスポンシブにも対応した使いやすいカルーセルを探す時はこのスクリプトがオススメ！ -slick | コリス
画像やコンテンツを配置したパネルを次々に水平・垂直にスライドして表示するカルーセルのスクリプトを紹介します。 自由度の高いカルーセルってなかなか無いのですが、「ラスト カルーセル」とサブタイトルがついてるくらい探し回って最後にたどり着くのはこれという出来です。 slick slick -GitHub slickの特徴 slickのデモ slickの使い方 slickの特徴 「the last carousel」とあるだけあって、カルーセルとしての機能は全て備えています。 レスポンシブ対応 CSS3はサポートブラウザ時に動作 オートプレイ対応 ナビゲーションはドット・アローの選択が可能 矢印キーでのキーボード操作に対応 ドラッグ・スワイプ操作に対応 無限ループ対応 slickのデモ デモでは、さまざまなカルーセルの動きを試せます。
jQuery-GetPath - Determine an Element’s Ancestors With jQuery
jQuery-GetPath - Determine an element’s ancestors with jQuery jQuery-GetPath is a plugin for the jQuery JavaScript library for determining an element’s ancestors. Author Dave Cardwell (jQuery plugins) Usage var path = $('#foo).getPath(); // e.g., "html > body > div#bar > ul#abc.def.ghi > li#foo" Download jQuery-GetPath is licensed under the MIT licenses. If you find a use for jQuery-GetPath I’d lo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 - かちびと. net
DevDocs
