2014-12-05
2014-12-05
可変レイアウト
可変
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="utf-8"> <title>リキッドレイアウト</title> <style> body { width: 78.125%; margin: 0 auto; } header, footer { height: 100px; background: #E9E9E9; } footer { clear: both; } #left, #middle, #right { height: 400px; float: left; } #left { width: 30%; background: #F6D4B1; } #middle { width: 40%; background: #CCF4C7; } #right { width: 30%; background: #BBF1F9; } </style> </head> <body> <header></header> <divid="content"> <divid="left"></div> <divid="middle"></div> <divid="right"></div> </div> <footer></footer> </body> </html>
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>可変するボックスに負のマージンを指定する</title> <style> #container { width: 100%; } #header { background-color: #DDD; height: 50px; } #wrapper { float: left; width: 100%; margin-right: -145px; overflow: hidden; } #primary { float: right; width: 100%; height: 200px; margin: 10px 0 10px -150px; background-color: #C7D5ED; } #content { height: 200px; margin: 0 160px; background-color: #CAEDC7; } #secondary { float: left; width: 145px; height: 200px; margin: 10px 0 10px 0px; background-color: #F9CFBA; } #advertisement { float: right; width: 145px; height: 200px; margin: 10px 0; background-color: #E5C7ED; } #footer { clear: both; background-color: #DDD; height: 50px; } </style> </head> <body> <divid="container"> <divid="header"></div> <divid="wrapper"> <divid="primary"> <divid="content"></div> </div> <divid="secondary"></div> </div> <divid="advertisement"></div> <divid="footer"></div> </div> </body> </html>
カラム指定
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>レスポンシブWebデザイン|35em</title> <style> body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; width: 70%; margin: 0 auto; line-height: 1.5; } @media screen and (min-width:60em) { p { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } } </style> </head> <body> <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。この書生の掌の裏でしばらくはよい心持に坐っておったが、しばらくすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないが無暗に眼が廻る。胸が悪くなる。到底助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。ふと気が付いて見ると書生はいない。たくさんおった兄弟が一疋も見えぬ。肝心の母親さえ姿を隠してしまった。その上今までの所とは違って無暗に明るい。眼を明いていられぬくらいだ。はてな何でも容子がおかしいと、のそのそ這い出して見ると非常に痛い。吾輩は藁の上から急に笹原の中へ棄てられたのである。ようやくの思いで笹原を這い出すと向うに大きな池がある。吾輩は池の前に坐ってどうしたらよかろうと考えて見た。別にこれという分別も出ない。しばらくして泣いたら書生がまた迎に来てくれるかと考え付いた。ニャー、ニャーと試みにやって見たが誰も来ない。そのうち池の上をさらさらと風が渡って日が暮れかかる。腹が非常に減って来た。泣きたくても声が出ない。仕方がない、何でもよいから食物のある所まであるこうと決心をしてそろりそろりと池を左に廻り始めた。どうも非常に苦しい。そこを我慢して無理やりに這って行くとようやくの事で何となく人間臭い所へ出た。ここへ這入ったら、どうにかなると思って竹垣の崩れた穴から、とある邸内にもぐり込んだ。縁は不思議なもので、もしこの竹垣が破れていなかったなら、吾輩はついに路傍に餓死したかも知れんのである。一樹の蔭とはよく云ったものだ。この垣根の穴は今日に至るまで吾輩が隣家の三毛を訪問する時の通路になっている。さて邸へは忍び込んだもののこれから先どうして善いか分らない。そのうちに暗くなる、腹は減る、寒さは寒し、雨が降って来るという始末でもう一刻の猶予が出来なくなった。仕方がないからとにかく明るくて暖かそうな方へ方へとあるいて行く。今から考えるとその時はすでに家の内に這入っておったのだ。ここで吾輩は彼の書生以外の人間を再び見るべき機会に遭遇したのである。第一に逢ったのがおさんである。これは前の書生より一層乱暴な方で吾輩を見るや否やいきなり頸筋をつかんで表へ抛り出した。いやこれは駄目だと思ったから眼をねぶって運を天に任せていた。しかしひもじいのと寒いのにはどうしても我慢が出来ん。吾輩は再びおさんの隙を見て台所へ這い上った。すると間もなくまた投げ出された。吾輩は投げ出されては這い上り、這い上っては投げ出され、何でも同じ事を四五遍繰り返したのを記憶している。その時におさんと云う者はつくづくいやになった。この間おさんの三馬を偸んでこの返報をしてやってから、やっと胸の痞が下りた。吾輩が最後につまみ出されようとしたときに、この家の主人が騒々しい何だといいながら出て来た。下女は吾輩をぶら下げて主人の方へ向けてこの宿なしの小猫がいくら出しても出しても御台所へ上って来て困りますという。主人は鼻の下の黒い毛を撚りながら吾輩の顔をしばらく眺めておったが、やがてそんなら内へ置いてやれといったまま奥へ這入ってしまった。主人はあまり口を聞かぬ人と見えた。下女は口惜しそうに吾輩を台所へ抛り出した。かくして吾輩はついにこの家を自分の住家と極める事にしたのである。吾輩の主人は滅多に吾輩と顔を合せる事がない。職業は教師だそうだ。学校から帰ると終日書斎に這入ったぎりほとんど出て来る事がない。家のものは大変な勉強家だと思っている。当人も勉強家であるかのごとく見せている。しかし実際はうちのものがいうような勤勉家ではない。吾輩は時々忍び足に彼の書斎を覗いて見るが、彼はよく昼寝をしている事がある。時々読みかけてある本の上に涎をたらしている。彼は胃弱で皮膚の色が淡黄色を帯びて弾力のない不活溌な徴候をあらわしている。その癖に大飯を食う。大飯を食った後でタカジヤスターゼを飲む。飲んだ後で書物をひろげる。二三ページ読むと眠くなる。涎を本の上へ垂らす。これが彼の毎夜繰り返す日課である。吾輩は猫ながら時々考える事がある。教師というものは実に楽なものだ。人間と生れたら教師となるに限る。こんなに寝ていて勤まるものなら猫にでも出来ぬ事はないと。それでも主人に云わせると教師ほどつらいものはないそうで彼は友達が来る度に何とかかんとか不平を鳴らしている。 吾輩がこの家へ住み込んだ当時は、主人以外のものにははなはだ不人望であった。どこへ行っても跳ね付けられて相手にしてくれ手がなかった。いかに珍重されなかったかは、今日に至るまで名前さえつけてくれないのでも分る。吾輩は仕方がないから、出来得る限り吾輩を入れてくれた主人の傍にいる事をつとめた。朝主人が新聞を読むときは必ず彼の膝の上に乗る。彼が昼寝をするときは必ずその背中に乗る。これはあながち主人が好きという訳ではないが別に構い手がなかったからやむを得んのである。その後いろいろ経験の上、朝は飯櫃の上、夜は炬燵の上、天気のよい昼は椽側へ寝る事とした。しかし一番心持の好いのは夜に入ってここのうちの小供の寝床へもぐり込んでいっしょにねる事である。この小供というのは五つと三つで夜になると二人が一つ床へ入って一間へ寝る。吾輩はいつでも彼等の中間に己れを容るべき余地を見出してどうにか、こうにか割り込むのであるが、運悪く小供の一人が眼を醒ますが最後大変な事になる。小供は――ことに小さい方が質がわるい――猫が来た猫が来たといって夜中でも何でも大きな声で泣き出すのである。すると例の神経胃弱性の主人は必ず眼をさまして次の部屋から飛び出してくる。現にせんだってなどは物指で尻ぺたをひどく叩かれた。吾輩は人間と同居して彼等を観察すればするほど、彼等は我儘なものだと断言せざるを得ないようになった。ことに吾輩が時々同衾する小供のごときに至っては言語同断である。自分の勝手な時は人を逆さにしたり、頭へ袋をかぶせたり、抛り出したり、へっついの中へ押し込んだりする。しかも吾輩の方で少しでも手出しをしようものなら家内総がかりで追い廻して迫害を加える。この間もちょっと畳で爪を磨いだら細君が非常に怒ってそれから容易に座敷へ入れない。台所の板の間で他が顫 えていても一向平気なものである。吾輩の尊敬する筋向の白君などは逢う度毎に人間ほど不人情なものはないと言っておらるる。白君は先日玉のような子猫を四疋産まれたのである。ところがそこの家の書生が三日目にそいつを裏の池へ持って行って四疋ながら棄てて来たそうだ。白君は涙を流してその一部始終を話した上、どうしても我等猫族が親子の愛を完くして美しい家族的生活をするには人間と戦ってこれを剿滅せねばならぬといわれた。一々もっともの議論と思う。また隣りの三毛君などは人間が所有権という事を解していないといって大に憤慨している。元来我々同族間では目刺の頭でも鰡の臍でも一番先に見付けたものがこれを食う権利があるものとなっている。もし相手がこの規約を守らなければ腕力に訴えて善いくらいのものだ。しかるに彼等人間は毫もこの観念がないと見えて我等が見付けた御馳走は必ず彼等のために掠奪せらるるのである。彼等はその強力を頼んで正当に吾人が食い得べきものを奪ってすましている。白君は軍人の家におり三毛君は代言の主人を持っている。吾輩は教師の家に住んでいるだけ、こんな事に関すると両君よりもむしろ楽天である。ただその日その日がどうにかこうにか送られればよい。いくら人間だって、そういつまでも栄える事もあるまい。まあ気を永く猫の時節を待つがよかろう。</p> </body> </html>
2014-12-04
2014-12-04
使い方：メソッド
メソッド
- セレクタで指定した箇所（要素 / 属性）に対して「何をさせる」と指示を与えること
jQueryでCSSスタイルを追加・変更する
１つの指示を出す場合
<script> //1つの指示を出す（記述方法1） $('セレクタ').css('color', '#f00'); //文字を赤色に </script>
<script> //1つの指示を出す（記述方法2） $('セレクタ').css({ 'color' : '#f00'//文字を赤色に }); </script>
《例》
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド：１つの指示を出す場合</title> <scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function(){ //1つの指示を出す（記述方法1） $('#first').css('color', '#f00'); //文字を赤色に //1つの指示を出す（記述方法2） $('#second').css({ 'color' : '#f00'//文字を赤色に }); }); </script> </head> <body> <divid="first">吾輩（わがはい）は猫である。</div> <divid="second">名前はまだ無い。</div> </body> </html>
複数指示を出す場合
<script> //複数指示を出す $('セレクタ').css('color', '#f00'); $('セレクタ').css('background-color', '#fff'); $('セレクタ').css('border', '1px solid #555'); </script>
<script> //共通セレクタに複数指示を出す $('セレクタ').css({ 'color' : '#f00', 'background-color' : '#fff', 'border' : '1px solid #555' }); </script>
《例》
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド：複数指示を出す場合</title> <scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function(){ //1つのセレクタに対して複数のスタイルを指定（記述方法1） $('#first').css('color', '#f00'); $('#first').css('background-color', '#fff'); $('#first').css('border', '1px solid #555'); //1つのセレクタに対して複数のスタイルを指定（記述方法2） $('#second').css({ 'color' : '#f00', 'background-color' : '#fff', 'border' : '1px solid #555' }); }); </script> </head> <body> <divid="first">国境の長いトンネルを抜けると雪国であった。</div> <divid="second">夜の底が白くなった。信号所に汽車が止まった。</div> </body> </html>
HTMLを操作するメソッド
《よく使われるHTML要素の操作メソッド一覧》
| メソッド | 概要 |
|---|---|
| $('セレクタ').html(); |
HTML要素内文字列を取得または書き換える（文字列内にHTMLを記述した場合はHTML処理して表示される） |
| $('セレクタ').text(); | HTML要素内文字列を取得または書き換える（文字列内にHTMLを記述した場合は文字列で表示される） |
| $('セレクタ').val(); | input要素から値を取得または書き換える |
| $('セレクタ').attr(); | HTML要素の属性名を指定して値を取得または書き換える |
| $('セレクタ').prepend(); | 要素の先頭にHTML要素を追加 |
| $('セレクタ').append(); | 要素の最後にHTML要素を追加 |
| $('セレクタ').before(); | 要素の前にHTML要素を挿入 |
| $('セレクタ').after(); | 要素の後にHTML要素を挿入 |
| $('セレクタ').empty(); | 子要素をすべて削除 |
| $('セレクタ').remove(); | 要素をすべて削除 |
文字列の取得と書き換え
- htmlメソッド
- HTML要素に対して、文字列を書き換えたり文字列を取得したりできます
- HTMLタグを記述した際にHTMLとして扱うのが特徴です
文字列を取得する
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド：文字列を取得する</title> <scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function(){ alert($('#first').html()); }); </script> </head> <body> <pid="first">一人の下人が、羅生門の下で雨やみを待っていた。</p> </body> </html>
文字列を上書き変更する
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド：文字列を上書き変更する</title> <scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function(){ $('#first').html('<small>文字列を要素に追加</small>'); }); </script> </head> <body> <pid="first"></p> </body> </html>
文字列を空にする
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド：文字列を空にする</title> <scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function(){ $('#first').html(''); //空だと文字列を消します。 }); </script> </head> <body> <pid="first">石炭をば早や積み果てつ。</p> </body> </html>
テキストを操作する
- textメソッド
文字列を取得
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド：文字列を取得する</title> <scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function(){ alert($('#first').text()); }); </script> </head> <body> <pid="first">一人の下人が、<small>羅生門</small>の下で雨やみを待っていた。</p> </body> </html>
文字列を上書き変更
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド：文字列を上書き変更</title> <scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function(){ $('#first').text('<small>文字列を要素に追加</small>'); }); </script> </head> <body> <pid="first"></p> </body> </html>
文字列を空にする
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>メソッド：文字列を空にする</title> <scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function(){ $('#first').text(''); //空だと文字列を消します。 }); </script> </head> <body> <pid="first">石炭をば早や積み果てつ。</p> </body> </html>
2014-12-03
2014-12-03
セレクタ演習問題
jQuery演習
- 表示結果のようになるよう記述しなさい
要素セレクタ（element）
$('div')
<!DOCTYPE html> <html> <head> <metacharset="UTF-8"> <title>jQuery：要素セレクタ</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> </head> <body> <h1>Heading</h1> <p>The quick brown fox jumps over the lazy dog.</p> <ul> <li>The quick brown fox jumps over the lazy dog.</li> <li>The quick brown fox jumps over the lazy dog.</li> </ul> </body> </html>
IDセレクタ
$('#idValue')
<!DOCTYPE html> <html> <head> <metacharset="UTF-8"> <title>jQuery：IDセレクタ</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> </head> <body> <ul> <li>fox</li> <liid="cat">cat</li> <li>fish</li> <liid="dog">dog</li> <li>bird</li> </ul> </body> </html>
<!DOCTYPE HTML> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>jQuery：IDセレクタ</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> </head> <body> <divid="div1">div1</div> <divid="div2">div2</div> <divid="div3">div3</div> </body> </html>
CLASSセレクタ
$('.className')
<!DOCTYPE html> <html> <head> <metacharset="UTF-8"> <title>jQuery：CLASSセレクタ</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> </head> <body> <ul> <liclass="man">Paul</li> <liclass="man">Billy</li> <liclass="woman">Alice</li> <liclass="man">Taro</li> <liclass="woman">Hanako</li> </ul> </body> </html>
子孫セレクタ（ancestor descendant）
$('p strong')
<!DOCTYPE HTML> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>jQuery：子孫セレクタ</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> </head> <body> <div> <p>I have a <strong>pen</strong>.</p> </div> <ul> <li>His <strong>pen</strong> is red.</li> <li>I need his <strong>pen</strong>.</li> </ul> <p>She doesn't need a <strong>pen</strong>.</p> </body> </html>
子セレクタ
$('p > strong')
<!DOCTYPE HTML> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>jQuery：子セレクタ</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> </head> <body> <div> <p>I have a <strong>pen</strong>.</p> </div> <ul> <li>His <strong>pen</strong> is red.</li> <li>I need his <strong>pen</strong>.</li> </ul> <p>She doesn't need a <strong>pen</strong>.</p> </body> </html>
隣接セレクタ
$('#second + li')
<!DOCTYPE HTML> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>jQuery：隣接セレクタ</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> </head> <body> <ul> <liid="first">Paul</li> <liid="second">Billy</li> <liid="third">Alice</li> <liid="fourth">Taro</li> </ul> </body> </html>
first-child擬似クラス
$('li:first-child')
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>jQuery：first-child擬似クラス</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> </head> <body> <ul> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> </ul> <ul> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> </ul> </body> </html>
否定擬似クラス
$('li:not(:first-child)')
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>jQuery：否定擬似クラス</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> </head> <body> <ul> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> <li>テキストテキストテキストテキストテキスト</li> </ul> <script> $(function(){ $('li:not(:first-child)').css('color','red'); }); </script> </body> </html>
2014-12-02
2014-12-02
使い方：セレクタ
最低限、使うものだけ覚える
- すべてを覚えようとしないこと
JavaScriptの読み込み順序
- HTMLをすべて読み込み後に、jQueryの処理を実行する
<script> $(document).ready(function(){ //この中に処理を記述 }); </script>
この記述であれば、bodyの終了タグの前でも、script内でも問題なく動作します。
短縮形
<script> $(function(){ //この中に処理を記述 }); </script>
デバッグ
- jQueryやJavaScriptの動作確認やエラーチェックをする作業
- 変数の値を確認するには、console.log( 変数名 ) を記述する
jQueryを使うための流れ
- どの箇所に対して
- 何をさせる
- どのタイミングで
jQueryの文法
セレクタ
- CSSセレクタとjQueryセレクタは同じ記述
- $('要素名') → <div>要素指定</div>
- $('#id名') → <div id="id名">id指定</div>
- $('.class名') → <div class="class名">class指定</div>
セレクタ
HTML要素を指定
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>セレクタ：要素に対して</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ //$('要素名')に対してstyle='color:#f00;'を設定 $('div').css('color','#f00'); //文字を赤色に }); </script> </head> <body> <divname="test"> <p>これはdiv要素の子要素</p> </div> <p>これはp要素</p> </body> </html>
name属性を指定
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>セレクタ：name属性に対して</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ //$('name属性=name属性値')に対してstyle='color:#f00;'を設定 $('[name="test"]').css('color','#f00'); //文字を赤色に }); </script> </head> <body> <!-- name=testにのみ、赤色のスタイルが設定される --> <divname="test"> <p>これはname属性”test”の子要素。</p> <p>これはname属性”test”の子要素。</p> </div> <!-- name=demoには、赤色のスタイルが設定されない --> <divname="demo"> <p>これはname属性”demo”の子要素。</p> <p>これはname属性”demo”の子要素。</p> </div> </body> </html>
id属性を指定
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>セレクタ：id属性に対して</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ //$('#id名')に対してstyle='color:#f00;'を設定 $('#test_id').css('color','#f00'); //文字を赤色に }); </script> </head> <body> <!-- #test_idに対してのみ、赤色のスタイルが設定される --> <divid="test_id"> <p>これはid属性”test_id”の子要素。</p> <p>これはid属性”test_id”の子要素。</p> </div> <!-- #demoに対しては、赤色のスタイルが設定されない --> <divid="demo"> <p>これはid属性”demo”の子要素。</p> <p>これはid属性”demo”の子要素。</p> </div> </body> </html>
cass属性を指定
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>セレクタ：class属性に対して</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ //$('.class名')に対してstyle='color:#f00;'を設定 $('.test_class').css('color','#f00'); //文字を赤色に }); </script> </head> <body> <!-- .test_classに対してのみ、赤色のスタイルが設定される --> <divclass="test_class"> <p>これはclass属性”test_class”の子要素。</p> <p>これはclass属性”test_class”の子要素。</p> </div> <!-- ＃test_classに対しては、赤色のスタイルが設定されない --> <divid="test_class"> <p>これはid属性”test_class”の子要素。</p> <p>これはid属性”test_class”の子要素。</p> </div> </body> </html>
すべての要素を指定
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>セレクタ：class属性に対して</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ //$('すべての要素')に対してstyle='color:#f00;'を設定 $('*').css('color','#f00'); //文字を赤色に }); </script> </head> <body> <div> <p>すべての要素が対象になる（div要素のなかのp要素）</p> <p>すべての要素が対象になる（div要素のなかのp要素）</p> </div> <p>すべての要素が対象になる（p要素）</p> <ul> <li>すべての要素が対象になる（ul要素のなかのli要素）</li> <li>すべての要素が対象になる（ul要素のなかのli要素）</li> </ul> </body> </html>
要素名もしくはid名に一致する要素を指定
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>セレクタ：要素名もしくはid名に一致する要素に対して</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ //$('要素名, #id名')に対してstyle='color:#f00;'を設定 $('div, #test').css('color','#f00'); //文字を赤色に }); </script> </head> <body> <!-- div要素もしくは#testに対してのみ、赤色のスタイルが設定される --> <div>div要素</div> <pid="test">p要素のid属性=”test”</p> <!-- #no2に対しては、赤色のスタイルが設定されない --> <pid="no2">p要素のid属性=”no2”</p> </body> </html>」
id名の子である特定の要素を指定
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>セレクタ：id名の子である特定の要素に対して</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ //$('#id名 要素名')に対してstyle='color:#f00;'を設定 $('#test div').css('color','#f00'); //文字を赤色に }); </script> </head> <body> <divid="test"> <!-- #testの子要素divに対してのみ、赤色のスタイルが設定される --> <div>これはid属性”test”の子要素（div要素）</div> <p>これはid属性”test”の子要素（p要素）</p> <div>これはid属性”test”の子要素（div要素）</div> <p>これはid属性”test”の子要素（p要素）</p> </div> </body> </html>
id名の子である特定の要素すべてに対して
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>セレクタ：id名の子である特定の要素すべてに対して</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ //$('#id名 > 要素名')に対してstyle='color:#f00;'を設定 $('#test > p').css('color','#f00'); //文字を赤色に }); </script> </head> <body> <divid="test"> <!-- #testの子要素pに対してのみ、赤色のスタイルが設定される --> <div>これはid属性”test”の子要素（div要素）</div> <p>これはid属性”test”の子要素（p要素）</p> <div>これはid属性”test”の子要素（div要素）</div> <p>これはid属性”test”の子要素（p要素）</p> </div> </body> </html>
class名1の要素以下にあるclass名2の要素に対して
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>セレクタ：class名1の要素以下にあるclass名2の要素に対して</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ //$('.Class名1 .Class名2')に対してstyle='color:#f00;'を設定 $('.test .demo').css('color','#f00'); //文字を赤色に }); </script> </head> <body> <divclass="test"> <!-- .testの子要素.demoに対してのみ、赤色のスタイルが設定される --> <divclass="demo">これはclass属性”test”の子要素（クラス名demo）</div> <p>これはclass属性”test”の子要素（クラス名なし）</p> <divclass="demo">これはclass属性”test”の子要素（クラス名demo）</div> <p>これはclass属性”test”の子要素（クラス名なし）</p> </div> </body> </html>
class名1・class名2の両方をもつ要素に対して
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>セレクタ：class名1・class名2の両方をもつ要素に対して</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ //$('.Class名1.Class名2')に対してstyle='color:#f00;'を設定 $('.test.demo').css('color','#f00'); //文字を赤色に }); </script> </head> <body> <div> <!-- .testと.demoが両方指定されている箇所に対してのみ、赤色のスタイルが設定される --> <divclass="test demo">これはdiv要素の子要素（クラス名：test、demo）</div> <pclass="test">これはdiv要素の子要素（クラス名：test）</p> <divclass="demo test">これはdiv要素の子要素（クラス名：demo、test）</div> <pclass="test">これはdiv要素の子要素（クラス名：test）</p> </div> </body> </html>
最初の対象要素に対して
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>セレクタ：最初の対象要素に対して</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ //$('要素名:first')に対してstyle='color:#f00;'を設定 $('p:first').css('color','#f00'); //文字を赤色に }); </script> </head> <body> <div> <!-- p要素の一番最初の要素に対してのみ、赤色のスタイルが設定される --> <p>1番目のp要素</p> <p>2番目のp要素</p> <p>3番目のp要素</p> <p>4番目のp要素</p> <p>5番目のp要素</p> <p>6番目のp要素</p> </div> </body> </html>
最後の対象要素に対して
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>セレクタ：最後の対象要素に対して</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ //$('要素名:last')に対してstyle='color:#f00;'を設定 $('p:last').css('color','#f00'); //文字を赤色に }); </script> </head> <body> <div> <!-- p要素の一番最初の要素に対してのみ、赤色のスタイルが設定される --> <p>1番目のp要素</p> <p>2番目のp要素</p> <p>3番目のp要素</p> <p>4番目のp要素</p> <p>5番目のp要素</p> <p>6番目のp要素</p> </div> </body> </html>
対象要素名が複数ある場合、indexで偶数番目に対して
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>セレクタ：対象要素名が複数ある場合、indexで偶数番目に対して</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ //$('要素名:even')に対してstyle='color:#f00;'を設定 $('p:even').css('color','#f00'); //文字を赤色に }); </script> </head> <body> <div> <!-- p要素の偶数番目の要素に対してのみ、赤色のスタイルが設定される --> <p>0番目のp要素</p> <p>1番目のp要素</p> <p>2番目のp要素</p> <p>3番目のp要素</p> <p>4番目のp要素</p> <p>5番目のp要素</p> </div> </body> </html>
対象要素名が複数ある場合、indexで奇数番目に対して
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>セレクタ：対象要素名が複数ある場合、indexで奇数番目に対して</title> <scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ //$('要素名:odd')に対してstyle='color:#f00;'を設定 $('p:odd').css('color','#f00'); //文字を赤色に }); </script> </head> <body> <div> <!-- p要素の奇数番目の要素に対してのみ、赤色のスタイルが設定される --> <p>0番目のp要素</p> <p>1番目のp要素</p> <p>2番目のp要素</p> <p>3番目のp要素</p> <p>4番目のp要素</p> <p>5番目のp要素</p> </div> </body> </html>
2014-12-01
2014-12-01
jQueryの基本
よく使うJavaScriptを簡単に使えるようにしたもの
- JavaScriptのライブラリのひとつ
- HTMLやCSSを操作して、要素・属性・スタイルを追加・変更・削除できる
- 要素に対してアニメーションできる
- 主要なブラウザをサポート（ブラウザ依存を気にしなくてよい）
- 記述の仕方は、CSSに似ている
- オープンソース（MITライセンス+GPLライセンス）
- 「Write Less, Do More」がモットー
- jQueryのバージョンは、1.x系と2.系に分類できます
- jQuery2は、IE8以前のサポートを除いたことで、より軽量化を図っています
- http://iquery.com/
デザイナーのためのjQuery
- 「メニューの開閉」「要素の非表示・表示」「画像のポップアップ表示」などWebページの表示されているものに対しての操作が中心
プログラマーのためのjQuery
Ajax通信
jQueryを導入したい
ダウンロードして利用する場合
- 2.xは旧ブラウザには対応していません
- compressed～……改行などを除去してファイルサイズを抑えたファイル
- uncompressed～……圧縮前の元ファイル。構造が見やすい
head内に記述
- 管理フォルダーの「js」フォルダー内に保存してパスを記述します
<scriptsrc="js/jquery-1.11.0.min.js"></script>
外部にあるソースのリンクを利用する場合
CDNを利用する
- Content Delivery Network
- ネットワーク経由でコンテンツを提供するサービス
- Minified（改行が除かれた圧縮版）
jQuery CDN
Google Ajax API CDN
記述する場所
<head> ・・・ <scriptsrc="js/jquery-1.11.0.min.js"></script> </head>
<body> ・・・ <scriptsrc="js/jquery-1.11.0.min.js"></script> </body>
基本形
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>jQuery</title> </head> <body> <scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> //jQueryを利用したコード </script> </body> </html>
CDNの障害に備えて記述する場合
- あらかじめ jQuery-1.11.0.min.jsダウンロードしておく
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>jQuery</title> </head> <body> <scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> window.jQuery || document.write('<script src="jquery-1.11.0.min.js"><\/script>');</script> </script> </body> </html>
HTTP/HTTPSに対応する方法
<scriptsrc="//code.jquery.com/jquery-1.11.0.min.js"></script>
2014-11-30
2014-11-30
タイムラインコントロール - クロスフェード
Flashムービー
- PhotoshopのレイヤーをFlashのレイヤーにコンバート
- 各写真を「シンボルに変換」
- 時間を設計しながら「キーフレームの挿入」
- モーションを設定
- 各レイヤーをクロス状態にずらしていく
- 必要があれば、ActionScriptを記述する
Photoshopでの準備
- 必要な画像のサイズで写真をひとつのファイルにする
- Photoshop形式で保存
- 背景レイヤーは削除しておく
Flashでの作業
新規ドキュメントに読み込む
シンボルに変換
- 「修正」メニュー→「シンボルに変換」
- グラフィックを選択
トゥイーンを作成
- この場合、キーフレームを先に配置してあるので「クラシックトゥイーンを作成」
- Shiftキーで、必要なレイヤーを選択する
- タイムラインの「１フレーム」を選択後に、ステージのインスタンスをすべて選択
- 「プロパティ」→「カラー効果」→「アルファ」
- 「アルファ：0」で透明にする
同様に「最終フレーム」も、「アルファ：0」にする
- レイヤー名をクリックし、フレーム全体を選択する
- クロスする位置までずらす
- すべてのレイヤーを同様にする
この時点では「再生」を繰り返します。
 |
Gadgets powered by Google |
- 最後の写真がフェードして見えなくなるまえに動きを止めます
空白キーフレームの挿入
- 空白キーフレームの位置にActionScriptを記述する
- ムービーが停止した瞬間に、外部サイトに移動する
- ガジェットからは、移動しません
- ムービー上をクリックすると、再び再生します
|
Gadgets powered by Google |
応用
- 「グラフィック」シンボルのままで、移動のタイミングを重ねます
|
Gadgets powered by Google |
- シンボルを「ムービークリップ」で作成すると「ぼかし」の効果を適用できます
|
Gadgets powered by Google |
