初心者向けのjQuery入門講座
使い方 まず最初にチェックするコンテンツです。どのような考えをもとにプログラムを組み立てていくか、設計力を学びます。 サンプル 使い方で学んだことを生かして、簡単なサンプルの作成を学んでいきます。 プラグイン jQueryで利用できる便利なプラグインを紹介していきます。 リファレンス jQueryのリファレンスです。辞書代わりにご利用ください。 使用例 企業サイトでのjQueryの使用例を紹介していきます。 始めに jQueryはデザイナーにも利用しやすいjavaScriptプラグインです。このサイトはhtmlやcssを充分に理解しており、さらに基礎的なjavaScriptをマスターしている方を対象に記事を書いています。 現在はスマートフォン用のゲーム制作に注力しているため、本サイトの更新は休止状態（2014年3月が最終更新）です。ゲーム制作に関するブログ：スマゲー作るよ！はほぼ毎日更新し
レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」:phpspot開発日誌
VenoBox - responsive jQuery modal window plugin レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 LightBox派生スクリプトは多々ありますが、レスポンシブでクールなフラットデザインで、地図、動画、画像、iframeなどなんでも埋め込めるので、今の時代にかなり使いやすそう。 関連エントリ フラットデザインが美しいレスポンシブなLightbox「Nivo Lightbox」 動画/地図/画像のポップアップが可能でレスポンシブなLightBox実装jQueryプラグイン「MagnificPopup」 スワイプできるLightBox実装jQueryプラグイン「Swipebox」 LightBoxはここまで進化したよ「VisualLightBox」
jQueryを高速に動作させるためのポイント５つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近東京にこなれてきたどうも僕です。何がこなれてきたって？電子マネーさ！東京ならSuica、Edy、Waon、なんでもタッチで買えちゃうんだぜ！コンビニで清算するとき、「支払いはEdyで」と一言、そして、読み取り機にソフトタッチ。支払いのシャリーンという音とともに僕の白い歯がキラーンとかがやくのさっ！ そんな東京にこなれてきた僕が、今日はjQueryを使う上で気をつけておきたいポイントを何点か紹介しようと思うよ！ jQueryって便利だけど、もとはJavaScriptで、インタプリタ言語で、コンパイル時に最適化なんてされないから、書き方一つで意外とパフォーマンスに差が出てくるんだよね！開発時は高スペックのPCで見てるから気づかないかもしれないけど、あなたのサイト、低スペックマシンとかモバイル端末でみたら、もっさもさかもよ！ っというわけで、jQueryを使う上で気をつけたいポイントを挙げて
[JS]最近よく見かける縦長ページ用のさまざまなアニメーションが簡単に実装できるスクリプト -ScrollReveal
デモページ フッタはダイナミックに3Dで表示されます。 ScrollRevealの使い方 Step 1: 外部ファイル 当スクリプトとAni.jsを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"> </head> <body> ... <script src="anijs-min.js"></script> <script src="helpers/scrollreveal/anijs-helper-scrollreveal-min.js"></script> </body> Step 2: HTML 各要素のアニメーションの設定は、HTMLに記述
bxslider | Creative Demos
2枚目以降の画像もブラウザの幅全体に表示。 コントローラー（next/prev）クリック後に自動再生をする。 html 画像の幅と高さを指定 <div id="image-bloc"> <ul class="slider"> <li class="slide"><img src="../img/01.jpg" width="800" height="400" alt=""></li> <li class="slide"><img src="../img/02.jpg" width="800" height="400" alt=""></li> <li class="slide"><img src="../img/03.jpg" width="800" height="400" alt=""></li> <li class="slide"><img src="../img/04.jpg" w
jQuery＋CSSによるカルーセルパネルの作り方 (1/3)
「カルーセルパネル」は、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。Amazonの「この商品を買った人はこんな商品も買っています」で利用されているので、名前は知らなくてもご存じの方は多いでしょう。カルーセル（Carousel：回転木馬）は、メリーゴーラウンド（merry-go-round）のことで、パネルをスライドしていくと一周して元のスライドに戻ることから「カルーセルパネル」と呼ばれています。今回はjQueryでカルーセルパネルを作成する方法を解説します。 HTML/CSSでカルーセルのベースを作成する 今回作成するカルーセルパネルのHTML／XHTML（以下、HTML）は次のようになっています。カルーセル全体を囲むdiv要素を配置し、id属性に「carouselWrap」を設定します。div要素の内側にはパネルを左方向にスライドさせる「戻る」ボタン用のp
横メニューの作り方
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記 2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi
アコーディオンまとめ8選！ | 株式会社LIG
(……きこえますか……きこえますか) Σ(◉◒◉)ん？ (……どうもです……はやちです(:3_ヽ)_) ？？？(◉◒◉)三(◉◒◉)？？？ (いま……あなたの……心に……直接……呼びかけています…(:3_ヽ)_) (◉◒◉;)お 俺にか……？？ (以前「スマホサイトに入れると使いやすくなる！おすすめjQuery4選！」の中でアコーディオンメニューを紹介しましたが、他にも参考になるデザインとUIはないかなと思い集めてみました。ご紹介します……(:3_ヽ)_) (◉◒◉;)ほ ほほう Flexible Slide-to-top Accordion （矢印がくるっと回ってアコーディオンが開くタイプ。矢印の動きがおもしろいですね。_(:3」∠)_) (◉◒◉)ほほう DEMO http://tympanus.net/Tutorials/FlexibleSlideToTopAccordion/ SI
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
Coveloping
box-shadowでふわりとした影をつくるCSSのジェネレーター、レスポンシブのチェック、アスペクト比の計算機、CSS/JSの軽量化など、たくさんの便利な時短ツールがありますが、それらの便利なツールを一つの場所にまとめたCovelopingを紹介します。 FacebookのOPGチェックやGoogle Mapsの地図生成ツールもあり、新しいプロジェクトを始める時にも役立つものが揃っています。 Coveloping 便利ツールは現在23種類、アスペクト比の計算や一つのカラーに黒と白を加えたバリエーションを生成したり、box-shadowでふわりとした影をつけたり、jQueryのアニメーションのエフェクトなどがあります。 これからもどんどん増えていくそうです。 その中から、いくつか紹介します。
ページを移動（離脱）するときにjQueryで警告を出す方法
Facebookなどでフォーム入力中にページを移動（離脱）しようとすると警告が表示されます。 この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。 １．ページを移動するときに警告を出す ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $(window).on('beforeunload', function() { return '投稿が完了していません。このまま移動しますか？'; }); }); </script> <form method="post" acti
jqueryを効率よく学ぶ方法は？ - プログラミング学習の窓口
jQueryを学ぼうと思ってネット検索をしても、色々な情報が出てきてどの情報を参考にすればいいか分からないという経験をした方はいるのではないでしょうか。 特に独学で学ぼうとすると、その壁によくぶつかります。ドットインストールのようなメジャーなサービスも使ったことがなければ、その価値は分かりません。 そこでおすすめなのがプログラミングスクールの活用です。最初に何から学ぶべきかといった説明はもちろんのこと、キャリアプランまで相談に乗ってくれるので、ただ単に学んで終わるということが減らせます。 The post jqueryを効率よく学ぶ方法は？ first appeared on プログラミング学習の窓口.
jQueryで要素を追加するメソッドのまとめ
jQueryで要素を追加するメソッドをまとめてみました。 このエントリーはビギナーの方向けの内容です。 jQueryを呼び出すためのscript要素（以下）は本文中のサンプルでは省略してますので、適宜追加してください。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> １．指定した要素の直後に要素を追加する 指定した要素の直後に要素を追加するには、after()メソッドを利用します。 <script> $(function() { var div = $('<div id="bar"></div>'); $("#foo").after(div); }); </script> <div id="foo"></div> 実行結果 <div id="foo"></div>
簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」｜BLACKFLAG
最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法として、パララックス（少々今さら感も感じますが・・・）効果に加えて最近ではコンテンツ全体をフルスクリーン表示にして、スクロールすることで1コンテンツ分が自動でスクロールされ、次画面へ遷移するさせる技法がよく見られます。 そんなWebページ内でスクロール効果を使った動作を実装する際に役立ちそうなJSスクリプト＆jQueryプラグインを3つほど紹介してみます。 skrollr – parallax scrolling for the masses skrollr – parallax scrolling for the masses スクロールによって様々なパララックス効果を簡単に実装することができる軽量JSスクリプト「skrollr」。 デモページを見るだけでもこの「skrollr」で様々なパターンのパララックス
[JS]最近のウェブサイトで見かける面白い仕掛けを実装するスクリプトのまとめ
fullPage.js ポートフォリオや企業のプロモーションでもよく見かける1ページで構成されたサイトで、フルスクリーンの垂直スクロール、そして水平のスライドにも対応したウェブサイトを作るためのスクリプト。 こういう作りは特にタブレットで操作がしやすいですね。 FancyScroll.js スマフォやタブレットのようにページの終わりまでスクロールした際にバウンドするのをはじめ、ちょっと面白いさまざまなエフェクトをスクロールに与えるスクリプト。
どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509
jquery.validation.jsというフォームバリデーションプラグインを公開していますが、使える場面が割と限定されてしまうような作りだったので、より幅広く使えるようにexValidationという名前で新しいjQueryプラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。 ルールを割り当てる際のclass名がhogeからchkhogeに代わりました。アップデートして使う場合は注意してください。 サンプル1: エラーを右上に表示 サンプル2: エラーを下に表示 トピックス ダウンロード 使い方 1. JSファイルを読み込む 2. 基本バリデーションルール 3. select, checkbox、radio、複数項目の場合 4
リアルタイムフォームバリデーション jQuery.validation.js :: 5509
お知らせ（10.08.06）： jQuery.validation.jsはアップデート・修正対応などを終了しました。 仕様などを変更したバリデーションプラグインを公開したので、そちらの方を参考にしてください。（validation.jsにはあるのにexValidationでは実装していない機能もありますが、基本的に実装は行いません） どんなフォームにも使えるjQueryのフォームバリデーションプラグイン: exValidation jQuery.validation.jsはフォーム入力のイライラを軽減して、Webブラウジングとかショッピングをもっと快適にするためのjQueryプラグインです。(もちろんサーバサイドでのチェックは必須ですが…) jQuery.validation.jsのサンプルを見てみる トピックス 特徴 ダウンロード 導入方法 1.JSファイルを読み込む 2.input要素
フォームのバリデーション用jQueryプラグインいろいろ+α
個人的なメモ。普段さほど使うことが 無いので、必要な時に探すのに時間 掛からないようにまとめておきます。 沢山ある必要はさほど無いのですが、 勉強用も兼ねていろいろと数を揃えて おきました。 お問い合わせフォームのユービザリティ向上として導入されるバリデーション用のjQueryプラグインのまとめと、その他Tipsやフォームデザイン周りの情報をちょろっと。一応動作だけIE6、7でも確認しています。 exValidation 安心(?)の国産プラグインです。複雑なフォームにも対応できるのでとりあえずこれを覚えておけば安心ではないかと思います。 どんなフォームにも使えるjQueryのフォームバリデーション exValidation jquery.validate.js Validationの日本語Ver.です。シンプルなので使い勝手いいですね。日付の確認用プラグインも派生していますので合わせて。
[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher
デモページ：Super Slider スライドのスーパー版で、斜め方向のスライドで画像を切り替えます。 bgStretcherの主な特徴 セットアップはシンプル 全てのモダンブラウザをサポート 画像は一枚だけでなく、複数枚にも対応 対応ブラウザ Internet Explorer 6, 7, 8, 9 Firefox 2, 3, 4 Opera 9+ Safari Chrome bgStretcherの使い方 Step 1: ファイルのダウンロード サイトの「Download」よりファイル一式をダウンロードします。 一式には必要なファイル全て（jqeury.jsも）が含まれています。 Step 2: 外部ファイル 外部ファイルを下記のように<head>～</head>に記述します。 <script type="text/javascript" src="../jquery-1.5.2.mi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
