40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
均等割り付けで美しい表デザインを実現するjQueryを作ってみました。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ライター内藤です。 本日は日本人の大好きな「均等割り付け」を超軽量jQueryで実現します。 特にtableのthタグなどで利用頻度が高いかと思いますが、block要素でも使えます。 Wordで言うと、これ です。 両端揃えではなく均等割り付けが必要な理由 下の図が分かりやすいと思います。 text-align: justify; text-justify: inter-ideograph; 上記のcssは、1行に満たない文字に関しては左寄せになります。 この命令の趣旨は、書籍の紙面を想像してもらうとわかりますが、複数に渡る行の右端を揃えることにあります。 ですので、thタグに上記のcssを適用しても、図中2行目以降のようになってしまいます。 つまり、横幅よりも少ない文字列を均等割り付けできないわけです。 cssでは実現できないので、jQueryを使う 拙筆webkit系ブラウザ（Chr
Facebook風の無限スクロールが作れるinfinite scroll｜こうめの“これから使える”jQueryプラグイン
圧倒的な人気を誇るJavaScriptのライブラリー「jQuery」。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、「こうめ」さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。（編集部） 「infinite scroll」は、スクロールしてページ下部まで移動すると、次のページを自動的に読み込んで表示するjQueryプラグインです。 インフィニティスクロールという機能でTwitterのタイムラインや、Facebookのフィードでも採用されており、ユーザーが手動でページ送りする手間を軽減します。 WordPressのブログ記事や、ECサイトの商品ページ、またギャラリーサイトなどで効果的な表現になりそうですね。 step1 jQueryプラグインの読み込み jQuery本体をjQuery
こうめの“これから使える”jQueryプラグイン
圧倒的な人気を誇るJavaScriptのライブラリー「jQuery」。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、「こうめ」さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。
jRumble | A jQuery Plugin That Rumbles Elements
Latest Version: 1.3 Latest Release Date: December 3, 2011 Original Release Date: March 30, 2011 Compressed: 1.47kb Uncompressed: 4.84kb View GitHub Repository About The Plugin jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element. 2016-11-04 Update This project is no longer being
jQueryでマウスオーバーしたテーブル行(tr要素)をハイライトさせる方法 | 1bit::memo
仕事ですごく縦長の表を作ることになり、似たような内容が並ぶため、今自分がどこを見ているのかが分からなくなる事があったので実装した時のメモ。 確認環境 jQuery1.7.1 htmlコード 以下のようなテーブルがあるとします。jQueryの読み込みなどは省略していますので、適宜記述してください。 <table class="hoge"> <tr> <th>見出し</th> <th>見出し</th> <th>見出し</th> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> </tr> </table> jQueryコード jQueryでは、対象となるtr要素をマウスオーバーしたら、trにクラスhvを振り、マウスアウトしたらhvを削除するという、シンプルな
デザイナーさんの為のjQuery講座 Lv.1 [入門編] | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
暑いですね。 鳥よしです。 あまりにも暑くてネタが切れたので、先日LIGのデザイナーさんとやったjQuery勉強会の備忘録をかかせていただきます。 サボってるわけではないのです。 勉強会の内容を見直してもらえればいいのです。 1.jQueryを使用するために まずは何はともあれ、jQueryを使用するために以下の記述をhead内に書きます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> これは、jQueryの実ファイルをgoogleさんから参照しているので、ネットにつながっていないと使用できない書き方ですね。 今回は何も考えずサクッと動かしたいのでこれで行きます。 これによってjQueryが使用できるようになります。 2.jQueryの書き方 jQueryの書き
![デザイナーさんの為のjQuery講座 Lv.1 [入門編] | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作](https://cdn-ak-scissors.b.st-hatena.com/image/square/36b3c17f2138ca9bd535315fa23b022ac2679ee6/height=288;version=1;width=512/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2013%2F07%2Fthumbnail6.jpg)
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
jQueryでプレゼンテーションできる「Fathom.js」
twitter facebook hatena google pocket コーディングに慣れた人はパワーポイントよりもhtmlでプレゼン資料を作るほうが簡単なのではないでしょうか。 Fathom.jsを利用することで手軽にプレゼン資料を作成可能です。 sponsors 使用方法 Fathom.jsからファイルをダウンロード。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="fathom.min.js"></script> <script type="text/javascript"> $(function() { $('#presentation').fathom(); }); </script> 上記を記述したら、次のルールでスラ
jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
jQueryでページの「トップに戻る」ボタンを実装。スクロールに応じてフェードイン・アウト[WordPress] | DelightMode
@Mori2ndです。最近jQueryを利用していろいろカスタマイズするのに凝ってます。 今回はスクロールに応じてフェードイン・フェードアウトして出現する、ページの「トップに戻る」ボタンをPC向けサイトに実装してみました！ ページの「トップに戻る」ボタンでやりたいこと ページの「トップに戻る」ボタンを実装するにあたってやりたかったことは以下の3つ。 スクロールに応じてフェードイン・フェードアウトする。 「トップに戻る」ボタンを実行した後もURLが変わらない。 WordPress用のプラグインはなるべく使わない。 この条件で調べていたところドンピシャの記事がみつかりました。グレート！ [Я]トップに戻るボタンをjQueryでニュルッと改造する ： りくまろぐ jQueryを利用して実装 先ほどの記事を参考にしてさっそく実装です。 jQueryのファイルを読み込む 最初にjQueryを利用す
jQuery 日本語リファレンス
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ？'); }, function(){ $(this).text('ヌー'); } );
jQuery UIのDatepickerでカレンダーから楽々日付入力
フォーム入力で日付を扱うことあると思いますが、数字だけの割にはいろいろと制御が面倒な部分でもあります。 入力フォーマット、年・月・日の制御など、作る側としてはかなり見えない部分の仕事が増えます。 入力するユーザの立場としても、フォームがドーンとあっただけでは入力に迷いますし、こういう局面ではカレンダーなどで曜日や日にち間隔を確認しますよね。 この両者の不便さを解消する方法として、jQueryのプラグインである「jQuery UI」の１機能、「Datepicker」で解消できます。 Datepickerを使用することで、フォームへの日付入力の際、カレンダーを表示して入力補助をするインターフェースを、簡単に実装できます。 jQueryを用意するjQuery UIはjQueryのプラグインであるため、jQuery本体が必要となります。 jQuery本体の準備は以前「「CrossSlide」写真や
レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」:phpspot開発日誌
レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 2013年05月29日- samsono/Easy-Responsive-Tabs-to-Accordion GitHub レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 よくあるタブ型のUI、スマホではちょっと幅が足りない、ということでアコーディオンに変更してしまえるプラグインです。 次のようにアコーディオン式に。スマホでも困りません タブにするんじゃなくて、UIのタイプそのものを変えてしまうというところがいいですね。 関連エントリ レスポンシブでクールなドロップダウンメニュー実装例 アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル レスポンシブ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://textextjs.com/
http://daily.d3js.info/?p=296
展開可能なリッチ・メニューを生成するには？
http://toybox-design.net/?p=66
2/3 jQuery でグラフ作成 [Javascript] All About![2/3 jQuery でグラフ作成 [Javascript] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
