jQueryでマウスオーバーすると全体的にピカーンってなるやつ マウスオーバーは普通同じ大きさの画像を切り替えたりしますが、他の要素の背景画像を変えることで派手なマウスオーバーにすることができます。 投稿日2011年10月11日 更新日2011年10月12日 準備 htmlは特に変わったことはしません、適当な要素にクラスを割り当てます。 html <p class="button"><a href="#">ボタン</a></p> その他マウスオーバーしたときの大きめの画像を用意します。 ここでは「bg.jpg」という名前で1000×1000の画像を使用します。 bodyのbackgroundを指定する方法 一番単純な方法はボタンをマウスオーバーしたときbodyのbackgroundを変更する方法です。 jQueryでimageとpositionの設定をしますので、cssでその他の設定をして
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ(透過PNGの黒ずみなど)対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね!インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク(仕
jQuery treeTable Plugin Documentation 階層構造が作れるテーブルを実現できるjQueryプラグイン「treeTable」 次のようなエクスプローラ風の階層を持ったテーブルを作ることができます。 カラムも別れており、それぞれ情報を表示でき、階層の折りたたみもできます。 テーブルを決められたルールに従って定義したら、$(element).treeTable();として初期化するだけです。 シンプルですがなかなか使えそうです 関連エントリ ヘッダ固定の分かりやすいテーブルを簡単実装できるjQueryプラグイン「jQuery.FixedTable」 縦長テーブルをスクロール対応にするシンプルなjQueryプラグイン「Lightweight Scrollable Tables」
1. 概要の理解 jQueryを一切知らない場合はまずは概要の理解から始めます。 ノンプログラマーのためのjQuery入門 http://www.slideshare.net/hayatomizuno/jquery-7665168 はじめてのjQuery http://higashizm.sakura.ne.jp/jquery_first/ 2. 基本的な使い方を理解する サンプルを見ながら具体的なコードを作成し理解を深めます。 40分で覚えるjQuery速修講座 http://ascii.jp/elem/000/000/498/498710/ jQuery基礎文法最速マスター http://blog.webcreativepark.net/2010/02/02-111519.html jQueryサンプル集 http://www.designwalker.com/2008/04/jque
ウェブサイトを構築する際、FlashとjQueryは非常に魅力的なツールです。コンテンツを実装する際にどちらを使用すべきか迷うこともあると思います。 両方の特徴を把握し、実装する際に適切に選択するための重要なファクターを紹介します。 A Closer Look at Choosing Between Flash and jQuery 下記は各ポイントを意訳したものです。 はじめに 1. FlashとjQuery どちらにするか重要なファクター 2. jQueryとFlashサイトのショーケース まとめ はじめに HTML5の登場により、それがFlashを破るか否かに関わらずこれらはウェブコミュニティで議論の的でした。この議論が活発に行われる中、Flash vs. JavaScriptの話題は少し失われていました。 ここではJavaScriptの中から特に人気の高い「jQuery」をとりあげ
個人的にjQuery関連のブクマ が分かりにくくなってきたので 整理も兼ねてシェア。プラグ インを探す時にだいたい巡回 しているサイトをまとめます。 かなり情報が多くなってきたjQuery。使いやすいし、知識の無い僕でも簡単に使えるので重宝してます。そんなjQueryですが、多すぎて探すのも大変ですね。以前ご紹介したサイトも兼ねて、ブックマークの整頓がてら、順回しているサイトをご紹介します。 codrops jQueryと言えば個人的にここを思い浮かべます。情報も新しく早い。英語OKならRSS購読推奨です。 codrops css-tricks こちらはWebデザイナー目線で情報を配信しています。有益jQuery情報多数ですが、タグやカテゴリが無い(あるかもだけど、見当たらない)のがおしいところ。/tag/等も404なんですよね・・最新記事はサイドバーに表示されます。 css-tricks
これで自前でGoogleカレンダーを持てる!jQuery&PHPで実現されたプログラム 2010年06月07日- Plugins | jQuery Plugins これで自前でGoogleカレンダーを持てる!jQuery&PHPで実現されたプログラム。 なかなかリッチなUIとGoogleカレンダーばりの操作性を持つ便利なスクリプトになっています。 Googleカレンダーに登録するのもよいのですが、ちょっと外部に流したくないこととかも結構あるので、自前で構築したいというニーズもあるのではないでしょうか。 タイムライン上をドラッグ&ドロップして予定を入れられます。ポップアップがでるので予定を入れます。日本語もOK 見ての通りUIもなかなかいい感じです。 スケジュール管理等に活用できますね。 関連エントリ GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-w
連載:改造WebアプリケーションUIビフォー/アフター 第2回 Webアプリ改造の前に「速習! jQuery/jQuery UI」 葛西秋雄 2010/03/05 はじめに 前回では、ASP.NETのデータ・コントロールを利用した3階層のWebアプリケーションである「ITブック」を紹介しました。今回は第3回の準備編として、jQueryのAPIとjQuery UIのプラグインの使い方をざっくり理解していただきます。 jQueryのHello World jQueryは、米国のJohn Resig氏が中心となって開発したJavaScriptのライブラリです。わずか数行のコードを記述するだけでアニメーションなどのエフェクトをWebアプリケーションに組み込むことができます。 jQueryはDOM(Document Object Model)の要素を検索したり、属性を書き換えたりするためのAPIを豊
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く