CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
初心者向けのjQuery入門講座
使い方 まず最初にチェックするコンテンツです。どのような考えをもとにプログラムを組み立てていくか、設計力を学びます。 サンプル 使い方で学んだことを生かして、簡単なサンプルの作成を学んでいきます。 プラグイン jQueryで利用できる便利なプラグインを紹介していきます。 リファレンス jQueryのリファレンスです。辞書代わりにご利用ください。 使用例 企業サイトでのjQueryの使用例を紹介していきます。 始めに jQueryはデザイナーにも利用しやすいjavaScriptプラグインです。このサイトはhtmlやcssを充分に理解しており、さらに基礎的なjavaScriptをマスターしている方を対象に記事を書いています。 現在はスマートフォン用のゲーム制作に注力しているため、本サイトの更新は休止状態（2014年3月が最終更新）です。ゲーム制作に関するブログ：スマゲー作るよ！はほぼ毎日更新し
jQueryを使い始めたときに感じる13の疑問 : tech.kayac.com - KAYAC engineers' blog
来週は私が夏休みなので更新はない予定です。agoです。 最近、人にjQueryを解説する機会があったので、昔を思い出してjQueryを使い始めた頃に感じる疑問を書いてみたいと思います。 1 そもそも何で使うの？いまでも困ってないよ 作成する内容にもよりますが、慣れると使用しない場合に比べて記述するコード量が3分の1程度まで減ります。 また、変数、条件分岐、繰り返しが減るのでバグが発生しにくくなります。 2 何か特殊なことができる？ 結局できることは変わりません。 jQuery自体JSで書かれてますし、記述の自由度もJSの制約に制限されます。 3 何が難しいの？ 文法がややjQuery的になります。 参考 jQuery言語入門 jQuery自体のコード量は少ないのですが、独特の記述法が多く慣れるまで多少時間がかかるかもしれません。 また、CSS Selectorの知識はほぼ必須です。 特にマ
HTMLの使い方！「トップに戻る」ボタンをつくるには [ホームページ作成] All About
HTMLの使い方！「トップに戻る」ボタンをつくるにはWebページが指定距離だけスクロールされた際に「トップに戻る」ボタンを動的に表示する方法を解説。JavaScriptで「現在のスクロール位置」を取得し、「指定量以上スクロールされたかどうか」を判定してボタンの表示・非表示を切り替える処理は、jQueryを使えば簡単。HTMLで作成したリンクをCSSでボタン型に装飾し、常に画面の右下にボタンが表示されるように作ります。 ある程度スクロールされたら「トップに戻る」ボタンを表示する方法 縦に長いWebページを読んでいる際には、「今すぐWebページの最上部に戻りたい」と思うことがあります。PC用ブラウザを使っているならスクロールバーを使えば簡単ですが、タブレットやスマホ用ブラウザを使っている場合は操作が面倒なこともあります。 そこで便利な機能が、下図のような「トップに戻る」ボタンです。Webページ
![HTMLの使い方！「トップに戻る」ボタンをつくるには [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/37ba5302f1c27c3939be91282b0f41570dc68737/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F4%2F4%2F8%2F1%2F6%2F1563259474%2Ftopimg_original.png)
見栄えがよくなった！Web制作するなら知っておきたいjQueryプラグインまとめ
作成：2014/05/7 更新：2014/11/01 Web制作 > ギャラリーサイトやECサイトなどで、最近よく見かけるデザインやエフェクトなど、制作前に知っておくと助かる、「どっかで見たことあるけど何だっけ？」といった感じのjQueryプラグインや最近のトレンドなるものをまとめました。ページにちょっとした工夫を凝らしたいとき、動きのある仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー １．フィーチャーリスト ２．スティッキーヘッダー 画像エフェクト ３．マウスオーバーで画像にキャプション ４．イメージビューア ５．ズームインエフェクト ６．ブラーエフェクト スクロール ７．Infinite Scroll(無限スクロール) ８．画像シーケンス ９．横スクロール １０．フリック機能 レイアウト １１．画面全
[JS]jQueryのプラグイン100選 -2013年総集編
今年も数多くの素晴らしいjQueryのプラグインがリリースされました。当ブログで紹介したものをはじめ、未紹介のものまで、jQueryのプラグイン100+α選です。 今年目立ったのは、アニメーションを使ったスクロール関連のスクリプト。 スクロール前提の1ページサイト、パララックスなど、コンテンツをより大きなサイズで楽しむものが増えました。また、スマフォ・タブレットに大きく影響を受けたインタラクションも目立ちましたね。 1ページコンテンツ用のスクロール関連 パララックス スクロール関連 スクロールで定位置関連 その他スクロール操作・補助関連 スクロールバー関連 レスポンシブ関連 エフェクト関連 ナビゲーション関連 レイアウト関連 画像ギャラリー関連 画像拡大・配置・キャプション関連 コンテンツスライダー関連 カルーセル関連 アニメーション関連 フォーム関連 コンテンツのツアー関連 テキスト関連
テキストや数字をスロットの様に回転させるJavaScript「ODOMETER」＆jQuery「a simple jquery slot machine effect」「tally_counter」｜BLACKFLAG
Webページ上のテキストや数値を表示する演出で スロットマシンの様な回転アニメーションの必要性に駆られた事がこれまでに何度かあり その度に苦労していたのですがとても簡単に同様のアニメーションを実装することができる スクリプトがあったので自分用メモとして紹介してみます。 Odometer – Transition numbers with ease Odometer – Transition numbers with ease 開始値と終了値とアニメーション時間を設定するだけで 簡単にスロットマシンのような回転アニメーションを実装できる「Odometer」 （jQueryを使わずに使用できます） デモページでは様々なテーマパターンが紹介されていて CSSを切り替えるだけで簡単に見た目を選択することが可能なようです。 数字だけでなくテキストも回転させることが可能になっているので スロットマシン
簡単に実装できる、ボタン画像のマウスオーバーイベント 10+ - NxWorld
画像のオンオフ切り替えといったようなマウスオーバーイベントで、簡単に実装できるものをいくつか紹介します。 CSS3やjQueryを使ってちょっと変わった動きを取り入れるサイトも見かけることも多くなりましたが、今回は普段も使用頻度が高いと思う定番のものに絞りました。 サンプルで使用する画像とDEMOについて 各マウスオーバーの動きを実装するにあたって上のような3タイプのボタン画像を用いており、各ボタンはそれぞれ以下のようになっています。 type A 単体のボタン画像 type B オンとオフを1枚の画像にした、スプライト型 type C オンとオフをそれぞれ別の画像にし、オフ時のものは_off、オン時のものは_onを拡張子前に入れています。 また、サンプルも用意したので実際の動きはこちらで確認して下さい。 CSS：マウスオーバー時に透過させる CSSのopacity（IEはfilter）の
[JS]スマフォアプリのように左右にスライドしてコンテンツを表示するスクリプト -mmenu
mmenuの使い方 スクリプトの使い方は下記ページにステップごとの解説があります。 tutorial Step 1: 外部ファイル head内に「jquery.js」と当スクリプト・スタイルシートを記述します。 <head> <script type="text/javascript" language="javascript" src="jquery.js"></script> <script type="text/javascript" language="javascript" src="jquery.mmenu.js"></script> <link type="text/css" media="all" rel="stylesheet" href="jquery.mmenu.css" /> </head> Step 2: HTML コンテンツの基本構造は、下記のようになります。
jQueryを実務で使う人がまず手に取って欲しい本 -jQueryデザイン入門 改訂新版（1.9対応）
HTML, CSSが使えるようになり、jQueryのプラグインを利用している人、専門用語ばかりでなく実制作に役立つ知識を基本からしっかり学びたい人にオススメの一冊「jQueryデザイン入門 改訂新版」を紹介します。 jQueryの入門書を買う時は、必ずこの本と比較することをオススメします。 通称「ドーナツ本」が3年ぶりに改訂新版としてでました。 改訂はjQuery1.9の対応だけではありません。 jQueryは1.3.2から、1.9.0に。 サンプルは全てXHTMLから、HTML5に。 IE6のテクニックは減らし、スマフォ向けテクニックを追加 お値段も3,500円から、2.980円（税別）に！ ※値段変更は情報量はそのまま、レイアウトの密度をあげページ数削減でがんばったそうです。 サンプルは全て商用利用OKで、著作権表記の必要もなく、改変も自由です 購入者用のダウンロードページも用意されて
爆速でわかるjQuery.Deferred超入門
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
おそろしく簡単にカレンダーを表示できるjQueryプラグイン「pickadate.js」
twitter facebook hatena google pocket フォームの入力は簡単にすることで離脱率を下げることが可能です。 日付を入力させるところもカレンダーで表示すると、簡易化できまたわかりやすいので、誤入力が減りそうです。 Pickadate.jsはこれを実現するjQueryプラグインです。 sponsors 使用方法 導入は非常に簡単です。 Pickadate.jsからファイル一式をダウンロード。 <link rel="stylesheet" href="pickadate.01.default.css"> //好きなテーマを選んでください <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="pickadate.mi
[jQuery]レスポンシブ対応の超クールなカレンダー「pickadate.js」 | Web活メモ帳
レスポンシブに対応したクールなカレンダーライブリーを見つけたのでご紹介。 jQueryプラグインなので、簡単に組み込む事が出来ますよ。 ↑画面のようなカレンダーを表示します。 jQeury UIのようにフォームをクリックした際に表示したりする他に、 常に表示させて置くことも簡単に出来ました。 これはかなり使えそうです。 使い方も簡単でjQueryとPickadate.jsを読み込んだ後に、以下の処理を追加するだけでした。 $('.datepicker').pickadate(); オプションがすごく豊富 オプション設定が非常に豊富で、細かな気遣いが感じられます。 ↑年と月をプルダウンで選択する事も $( '.datepicker' ).pickadate({ monthSelector: true, yearSelector: true }) ↑指定した範囲のみ選択する事も可能です。 $(
![[jQuery]レスポンシブ対応の超クールなカレンダー「pickadate.js」 | Web活メモ帳](https://cdn-ak-scissors.b.st-hatena.com/image/square/cd37ad8b886aff0fa2a7e8630908180bb35c1ebe/height=288;version=1;width=512/https%3A%2F%2Fblog.verygoodtown.com%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F01%2F20130124-01.png)
http://mtw.cocotte.jp/blog/diary/html/2011/06/22-1955.php
Warning: set_time_limit() [function.set-time-limit]: Cannot set time limit in safe mode in /home/users/1/cocotte.jp-mtw/web/cms/wp-content/plugins/rvg-optimize-database/rvg-optimize-database.php on line 23 404 Not Found ??????????????????? ?????? URL ? https://mtw.cocotte.jp/blog/diary/html/2011/06/22-1955.php ?????????????????????????????
新JavaScript例文辞典
説明 CrossSlideライブラリでスライド画像を上下左右に移動させながらフェードイン／アウトさせるには、画像を表示するためのコンテナをdivタグ等で用意します。divタグには必ずスタイルシートで横幅と縦幅を設定しておきますが、この横幅と縦幅はスライドさせる画像の幅よりも小さくしておく必要があります。画像がスライドするだけの十分な幅が確保できない場合はエラーとなり動作しません（Firefox + Firebugであればコンソールにエラーメッセージが表示されます）。 crossSlide()の最初のパラメータにはspeedに移動量(ピクセル)を指定します（fadeオプションも指定）。crossSlide()の2番目のパラメータには配列要素として画像の情報を設定しますが、この時にsrcオプションに加えて、移動方向を示すdirオプションを指定します。このdirオプションは画像ごとに設定でき、'
[JS]画像をクロスフェードで変更するスライドショーの超軽量スクリプト -Simplest Slideshow
余計な機能は一切なく、シンプルで画像を洗練されたエフェクトで次々に表示するスライドショーのスクリプトをSnook.caから紹介します。 Simplest jQuery Slideshow demo このスクリプトを作成したきっかけは、知人からの依頼だそうです。 当サイトでも多数紹介しているjQueryのプラグインで同様の動作をするものがありますが、多機能すぎるためクロスフェードするだけのシンプルで軽量のものを作成することにしたそうです。 そこで、コードの目標を20行以下で挑んだところ、作成してみると、下記のように大幅に短いものになってしまったとのことです。 ※動作には別途jquery.jsが必要です。 JavaScript <textarea name="code" class="html" cols="60" rows="5"> $(function(){ $('.fadein img:
[JS]jQueryのプラグイン100選 -2012年総集編
2012年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年目立ったのは、やはりレスポンシブ、そしてCSS3アニメーションでしょうか。 スライダーやギャラリー系もレスポンシブ・アニメーション対応、ナビゲーションやPinterst風のレイアウトなど、多くのプラグインにそれら二つの要素が組み合わさっています。 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 ナビゲーション関連 レイアウト関連 レスポンシブ関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
HOME>jQuery>7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。（っていうかそんな偉そうなこと言える程修めてない
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
