CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
jQueryによるアニメーションエフェクトの基本 (1/5)
jQueryの特徴の1つは、Webサイトに動きを付ける「アニメーションエフェクト」を手軽に実装できることです。jQueryで実現できるのは、セレクターで指定したHTML/XHTML（以下、HTML）要素のサイズや位置、透明度を時間の経過とともに徐々に変化させ、動いているように見せる簡単なアニメーションですが、最近のWebデザインで用いられる“動きのあるUI”を作るのには重宝します。 今回は、jQueryに用意されているアニメーションエフェクト関連の命令を紹介します。 非表示状態の要素を表示するshow() show()は、CSSのdisplayプロパティの値が「none」、つまり非表示に設定されているHTML要素を、アニメーション付きで表示状態（display:bolck;）に切り換える命令です。要素の透明度を透明から不透明にしながら、サイズ（高さ／幅）を0から本来のサイズに変化させます。
透過PNG対応！jQueryでオリジナルツールチップ (1/3)
「ツールチップ」の完成画面。左から、CSSで装飾するツールチップ、透過GIFを使ったツールチップ、透過PNGを使ったツールチップ（画像クリックでサンプルページを表示します） CSSで装飾するシンプルなツールチップ 最初に作成するのは、リンク（a要素）にマウスカーソルが重なると補足テキストをフェードインで表示する、シンプルなツールチップです。ツールチップはマウスカーソルの右下にピッタリくっ付いて表示され、マウスの動きに合わせて移動します（サンプル01）。 HTML／XHTML（以下、HTML）は以下のようになります。ツールチップを設定するリンクはa要素で通常通りマークアップします。ツールチップ内に表示する補足テキストは、a要素の後ろにspan要素で記述します。span要素には「tooltip」というclass属性を設定します。 ▼サンプル01（HTML部分） <p>Lorem （中略） qu
jQueryによるトグル処理 | スタッフブログ｜dis-ドアズインターネットサービス｜WEB（ホームページ）制作、作成・SEO・FLASH・ビジネスブログ・ユーザビリティ・アクセシビリティ｜神戸・大阪
トグル処理はON／OFF交互に入れ替わるような処理のことです。 jQueryの「toggle() ：表示／非表示」を使用すればすごく簡単に実装できます。 例えば #buttonの要素をクリックするたびに #textの要素を表示／非表示させたい場合。 <p id="button">これは#buttonの内容です。</p> ←ここをクリック <p id="text">これは#textの内容です。</p> ←これを表示／非表示させたい 上記のHTMLを用意したら、 「jQuery」と「下記の内容を入力したjsファイル」を読み込むだけで完了です。 $(function(){ $("#button").click(function(){ $("#text").toggle(); }); }); たったこれだけ。 以下がサンプルです。 これは#buttonの内容です。 ←ここをクリック これは#tex
WordPressで自作のjQueryスクリプトを実行する方法
WordPressで自作のjQueryスクリプトを実行する方法 ただいま大人気のjQueryですが、Wordpressで使用する場合いろいろお決まりごとがあるようです。 なので今回はWordpressでjQueryスクリプトを書くときの注意事項をメモっておきます。 投稿日2010年07月30日 更新日2011年04月03日 通常のHTMLでのjQueryの使用 Wordpressを使用していない静的HTMLでのjQueryの使用方法から見ていきましょう。 例えば、h2を消したいなんて場合こんな感じになりますよね。 JavaScript <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $("h2
マウスの動きに追従して奥行きのある背景移動をするjQueryプラグイン「jquery.parallax.js」
Posted: 2011.05.30 / Category: javascript / Tag: jQuery, Plugin マウスの動きに追従して奥行きのある背景移動をするjQueryプラグイン「jquery.parallax.js」のご紹介です。 最新のはわかりませんがIEだと動かないかもです。 「jquery.parallax.js」のダウンロードとインクルード プラグインを下記URLからダウンロードします。 ここでは現時点で最新版である「0.2」を使用します。 jQuery Parallax | jQuery Plugins ダウンロードしたらjsファイルを読み込みましょう。 jQuery本体も忘れず読み込みます。 html <script type="text/javascript" src="jquery1.5.1.js"></script> <script type="te
サイトの背景で雲などが動く！アニメーション効果を出す JavaScript 集
最近は、コワーキングスペース タネマキ の方で、記事を更新しています。@uetsuhara でも気になったニュースや記事など流してます。良かったら覗いてみてください。 読了目安 1分58秒 宣伝ぽいですがてか宣伝になりますが、横浜のコワーキングスペースタネマキで、また背景の雲が動き始めました。やはりちょっと重い？とのことで、現在一時停止中です。別の方法を模索中。 understandard.net が実装してくれました。詳しいことは彼にｗ ついでに似たようなスクリプトを集めてみました。まぁタネマキでも使っている $fx というライブラリで十分な気もしますが。なかなか動きが軽い気がします。 背景を動かすスクリプト一覧 $fx – JavaScript animation library 僕らが今回使ったのはこちら。なかなか良いかと。高機能な割には、軽量ってのが売りのようです。雲などの画像レイ
スクロールすると雲の背景画像が動く
スクロールすると雲の背景画像が動きます。 背景画像を設置する要素名(id名やclass名)はサイトによって異なると思いますのでそれに合わせて要素名(id名やclass名)は変更してください。 このサンプルでは縦方向は0pxにしてあるので横方向のみ移動していきます。 スクロールすると背景が右に2pxづつ移動します。 htmlコード <div class="skinBody"> この中が記事などのコード </div> CSSコード .skinBody{ background:#63c3eb url(背景画像のアドレス) fixed 0 0; } JQueryコード <script type="text/javascript"> $(function() { var bgsc1 = 0; var bgsc2 = 0; $(window).scroll(function() { bgsc1+= 2
WanderWall – A jQuery, CSS3 & HTML5 Hover-Based Interface | AddyOsmani.com | Where Web Businesses Grow
Hey guys. Today I’m going to teach you how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. Why a hover-based interface? you might ask. Well, with the popularity of touch-based web applications simplifying the way that people can use sites on mobile devices, I think that there’s room for us to look into ways of making it even easier for people to use sites in
雪が舞い散るJavaScript「Snowfall」
冬ですね。サイトにも雪をふらせたくなってきましたね。 JavaScriptライブラリのjQueryプラグインSnowfall Pluginを使用すると、雪を舞い散らせることが可能です。 sponsors 使用方法 Snowfall Pluginからsnowfall.jquery.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="snowfall.jquery.js"></script> そしてbody前に以下のscriptを記述します。 <script type="text/javascript"> $(document).snowfall({ flakeCount: 200, /
JavaScriptで高さを取得計算後、別の要素に指定
JavaScriptで高さを取得計算後、別の要素に指定 2012.05.27 制作 CodingJavascriptjQuery 0 先日、とあるサイトの改善デザインとコーディングをしました。 そのときにJavaScriptの書き方を調べたのですが、また使う機会があるかもしれないのでメモです。 改善したページはECサイトの購入画面で、商品のオプションを選択する画面です。 ブロック1からオプションを選び、ブロック2には選んだオプションが表示されます。ブロック3にはオプション金額の合計と、次のステップに進むボタンが入ってます。 オプション選択は下向きに選んでいくのに合計金額やボタンが上部にあります。 なのでオプション選択後、次のページに進むにはページ上部に戻らなければなりません。わかりにくいしめんどくさい。 いくつか案を出して、下図のように改善方法に決定ました。 ブロック3をスクロールに応じて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Jquery と JqueryUIについて - BIGLOBEなんでも相談室
掲示板/JavaScript質問板［過去ログ］/一覧/jQuery toggleについて - TAG index Webサイト
婷婷综合久久狠狠色_亚洲国产AⅤ精品一区二区蜜桃_亚洲精品无码专区在线_亚洲欧美精品伊人久久_看黄A大片爽爽爽不打码
sample3
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門
jQueryのAjaxリクエスト 10
パセリんく
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
ColorBox