40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
RedLine Magazine : スペースは嫌、class付けるのも嫌な時用(追記有)
スペースは嫌、class付けるのも嫌な時用(追記有) >>081210：追記 コメント欄にてもっといい書き方教えて頂きました！ タイトル、なんのこっちゃ？って感じなんですが、そういう時があるんです。例えば会社概要なんかをマークアップした時、定義リストとして書く際にdtに社名、所在地、電話番号・・・って入れるじゃないですか。そういう部分の元原稿って「社 名」みたいな感じで２文字の部分に予めスペースが入ってて見た目を整えてあるものが多いんですね。なんちゃって均等割り付けみたいな感じ。 ところがwebの場合、そういうのってhtmlに直接スペース入れられないじゃないですか。アクセシビリティ的にも文書的にも。もちろんデザイナ目線でのその部分の見た目を整えたい気持ちも分かるんですね。なのでCSSのletter-spacingで左右揃ってなくてもとりあえずなんとなく全部間隔あけとくか、チマチマと例外部分
JavaScriptライブラリ「jQuery」関連サイト34 : skuare.net
twitter facebook hatena google pocket 米大統領選でクリントン氏と壮絶な攻防を繰り広げるオバマ氏のサイトでも使用されるなど、巷で大人気のjQuery。 今回はjQueryの関連サイトを紹介します。 追記： 2008/2/8 2サイト 2008/5/29 2サイト 2008/6/25 1サイト 2008/7/9 5サイト（jQuery UI系・Cheet Sheetを集めました） sponsors Reference ・jQuery リファレンス：v1.0.x、1.2.x ・jQuery 1.2 ドキュメント日本語訳 ・jQuery 開発者向けメモ：v1.1.x ・jQuery日本語リファレンス：v1.2.6 HowTo / Review ・jquery.jsを読み解く（追記：2008/2/8） ・jQueryの魔法 ・ニュータイプなJSライブラリjQue
画像の大きさをウィンドウ幅に合わせて変更するjavascript「autoscale」
リキッドレイアウトではウィンドウによって、エラスティックレイアウトではフォントによってデザインが変更されます。 このようなレイアウトを採用している場合画像の幅が微妙になることがあるかもしれません。 autoscaleはウィンドウ幅に合わせて画像の幅も自動に変更されます。 sponsors 使用方法 autoscaleからjquery.autoscale.jsをjQueryからjquery.js（v1.2.1）をダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jquery.autoscale.js" type="text/javascript"></script> <script type="text/jav
RedLine Magazine : 半透明ボックスに関するメモ
半透明ボックスに関するメモ ※2008年2月8日、IE6でinputボタンが押せない件について追記しました。 半透明ボックスに関してのメモ。 デザイナからの要望はこんな感じ。「よくあるタイプのコンテンツ部分の背景に単色ベタの土台を置くようなデザインじゃなくて、今回は背景画像を活かしたデザインにしたい、テキストやら写真やらの中身を入れるボックスだけ半透明にして見せたい背景画像をうっすら表示させたい。」 今回やっかいだなと思ったのが、コンテンツ部分が全面そういう風に背景の上で半透明になっているのではない点。タイトル画像が入る部分やそれぞれのセクションの余白部分は半透明ではなく、素の背景が見えるというもの。文章にするとややこしい・・・つまりこんな感じ↓。(背景とか色合いとか変だけどあくまでサンプルだから気にしないでください・・・。) 半透明のボックスって中身も半透明になるんだよね CSSだけでボ
jQueryでlightBoxを使うplugin | ユージック
jQueryでlightBoxを使うplugin 2007年10月16日 jQueryでlightBoxを使うpluginをご紹介します。lightBoxはprototype.jsを併用するJavascriptのスライドショーを実装する有名なライブラリですが、今回はjQueryで利用できます。かつ高機能です。 jQueryでlightBoxを使うpluginの英文のサイトはこちら 実装はいたって簡単です。まずは元サイトでスクリプトとCSSをDLして外部リンクします。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.3.js"></script> <link rel="stylesheet" type="te
Postal Search APIs & Solutions ブログ: Favicon Plugin for jQuery 1.1.2
2007-07-05 Favicon Plugin for jQuery 1.1.2 指定した URL からそのサイトの favicon (ファビコン) を表示する jQuery プラグインです。サイトによって favicon があったりなかったりしますが、Favicon Plugin は favicon が見つかったときだけ表示するようにしています。 http:// からはじまる任意の URL を指定できます。その URL からプロトコルとホスト名を切り出して favicon.ico の URL を組み立てます。ですので、相対パスは対応していません。 Favicon Plugin は img タグを操作することを前提としています。favicon.ico の URL を設定し、そのサイズを 16 × 16 としています。 はじめは非表示としておき favicon のロードが完了したとき表示
jQuery と prototype.js を同時に使う。（$(); のコンフリクト回避）｜JavaScriptプログラムメモ｜プログラムメモ
jQueryとprototype.js を同時に使いたい場面がまれにあります。 そのとき $('id_name'); といった書式を jQuery, prototype.js 共に持っているのですが、その動作（書式や戻り値）が違います。 例えば戻り値の場合、 prototype.js：DOMオブジェクトを返す jQuery：jQueryオブジェクトを返す という違いがあります。 そこで jQueryとprototype.jsを同時に使いたい場合は jQueryの $(); を違う名前に変更して使います。 <html> <head> <script src="prototype.js"></script> <script src="jquery.js"></script> <script> // 下記2行を追加 jQuery.noConflict(); var j$ = jQuery; <
ウノウラボ Unoh Labs: 簡単Ajaxライブラリ「jQuery」と便利なプラグインたち
こんにちわ、hideです。 最近は、jQueryというJavaScriptライブラリを使ってAjax関連の処理を書くことが多いです。なんといっても軽量で高速、XPathによる要素の指定がとても便利です。今回は、その便利なjQueryをもっと便利にするプラグインをいくつか紹介します。 ThickBox LightBoxのようなもので、画像の他にHTMLの表示も可能です。難点は、$()を使って書かれているので、他のライブラリと混ぜて使えないこと。僕はソース内の$()をすべてjQuery()に書き換えて使っています。 JSON for jQuery AjaxでJSONを取得して、処理できるようにするプラグイン。これは必須とも言っていいと思います。CallBack関数を指定してのJSONPも簡単。 BlockUI Plugin 画面の一部や全体を半透明のレイヤーで覆って操作できなくするものです
jQuery版script.aculo.usの「Interface elements」がすごい:phpspot開発日誌
Interface elements for jQuery - Real examples of Interface elements jQuery版script.aculo.usの「Interface elements」。 script.aculo.us 同様、エフェクト、ドラッグ＆ドロップ、アニメーション、スライダー、オートコンプリートのほか、 ３Dアニメーション、アイテム選択用UI、テキストエリアリサイズ、ツールチップヒント、MacOS X の Dock 風UI を実装するためのライブラリが同梱されています。 詳しくは以下のデモを使ってみればそのすごさが分かるはず。 Effects [opens in new window] (combined showcase) Test new animate function [opens in new window] Use new func
jQueryを使おう：jQueryってなに？: Recently Ajax
本Blogへのご訪問者で「jQuery」をキーワードに訪れる方が非常に多く、注目度が高いことが伺えるので、突然ですが jQueryの特集を連載してみます。 jQueryとはなにかから、主な機能の使い方を紹介していきましょう。 まずは、そもそも「jQuery」とはなんでしょうか。jQueryは、Ajaxのフレームワークの一種。prototype.jsや Yahoo! UI Library、Spryなどなどここ最近は、群雄割拠な状態ですが中でも注目度が高いのが、この jQueryです。 その特徴は、軽くて手軽。10KB弱の JavaScriptをコピーするだけで使え、JavaScriptの標準的な書式を一切無視した、超手軽な書き方が出来るようになります。例えば、次のプログラムコード$("p.surprise").addClass("ohmy").show("slow");たった、この一行でスラ
Lucky bag::blog: IE でも擬似的に子供セレクタ
ある要素の直接の子要素に対してだけ CSS で指定をしたい場合、子供セレクタ div > p が便利。しかし、IE がこれに対応していなくて残念って感じだったんだけど、meyer 氏が IE でも擬似的に直接の子要素を指定できる方法を発見した模様。 Eric's Archived Thoughts: Universal Child Replacement 例えば、下記の (X)HTML があったとして、id="content" の子要素の段落だけ背景色を #ff8800 に変えたいって場合。 <div id="content"> <p>content の直接子供要素の段落。ここだけ背景色を変えたい。</p> <div id="foo"> <p>この段落は色は変えたくない。</p> <p>この段落は色は変えたくない。</p> </div> </div> 子供セレクタに対応しているブラウザであ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はじめてのjQuery
lllcolor.com
lllcolor.com
http://zuzzu.blog100.fc2.com/blog-entry-25.html
lllcolor.com