jQuery:タブパネル
display-tableを使ったタブパネル:完成版にリンク
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>display-tableを使ったタブパネル</title> <link rel="stylesheet" href="css/style_tab01.css"> <script src="js/jquery-2.2.1.min.js"></script> <script src="js/current.js"></script> </head> <body> <section id="panel"> <h1>世界の風景</h1> <ul class="tab"> <li class="current"><a href="#alaska">アラスカ</a></li> <li><a href="#ny">ニューヨーク</a></li> <li><a href="#alps">アルプス</a></li> <li><a href="#dobai">ドバイ</a></li> </ul> <div class="tabContents current" id="alaska"> <div class="round"> <p><a href="#"><img src="img/01.png" alt=""></a></p> </div><!--.round--> <p class="text">アラスカは寒く、白熊だって暮らしています。名物料理には、海鳥をアザラシの中に詰めこみ、地中に長期間埋めて作る、キビヤックがあります。</p> </div><!--.tabContents .current"#alaska--> <div class="tabContents" id="ny"> <div class="round"> <p><a href="#"><img src="img/02.png" alt=""></a></p> </div><!--.round--> <p class="text">ニューヨークには、たくさんの種類のひとが暮らしています。かっこいいですもんね。鳩は、人がたくさん暮らすところに出没します。えさ、もらえますもんね。</p> </div><!--.tabContents .current"#ny--> <div class="tabContents" id="alps"> <div class="round"> <p><a href="#"><img src="img/03.png" alt=""></a></p> </div><!--.round--> <p class="text">アルプスでの暮らし、それは大変きびしく、山の中でなく、山の麓で暮らすほうがよいでしょう。運がよければハイジに会えるかもしれません。</p> </div><!--.tabContents .current"#alps--> <div class="tabContents" id="dobai"> <div class="round"> <p><a href="#"><img src="img/04.png" alt=""></a></p> </div><!--.round--> <p class="text">ドバイ、そこはお金持ちしか入ることのできない、なぞの国です。もしも入国することがあれば、大事なのは平常心です。</p> </div><!--.tabContents .current"#dobai--> </section> </body> </html>
@charset "utf-8"; /* CSS Document */ /* reset */ html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } table { border-collapse: collapse; border-spacing: 0; } ul, ol { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ } img { border: 0; } img, input { vertical-align: bottom; } article, aside, dialog, figure, footer, header, main, menu, nav, section { display: block; } /*----------------------------------*/ /* font-size */ html { font-size: 62.5%; } /* =10px */ body { font-size: 16px; font-size: 1.6rem; } /* =16px */ h1 { font-size: 32px; font-size: 3.2rem; } h2 { font-size: 24px; font-size: 2.4rem; } h3 { font-size: 20px; font-size: 2.0rem; } h4 { font-size: 18px; font-size: 1.8rem; } p { font-size: 16px; font-size: 1.6rem } /*----------------------------------*/ body { background: #333; font: 14px/1.3 sans-serif; /*font指定のショートハンド*/ overflow-y: scroll; /*最初からスクロールバーを出しておく*/ } #panel { width: 630px; margin: 10px auto 0; background: #666; color: #FFF; padding: 10px; } h1 { color: #FFF; font-size: 16px; padding: 10px 5px; letter-spacing: 2px; } ul.tab { display: table; width: 100%; border-collapse: collapse; } ul.tab li { display: table-cell; width: 25%; } ul.tab li a { display: block; background: #aaa; background-image: linear-gradient(to bottom, #999,#CCC); border: 1px solid #666; border-bottom: none; border-radius: 5px 5px 0 0; border-shadow: 0 0 3px rgba(0,0,0,0.2); color: #FFF; font-size: 12px; font-weight: bold; margin: 0 2px; padding: 20px; text-align: center; letter-spacing: 2px; } ul.tab li.current a { background: #FCFCFC; color: #000; } div.tabContents { display: none; padding: 0 3px; } div.tabContents.current { display: block; } div.round { background: #FCFCFC; border-radius: 0 0 5px 5px; padding: 10px; text-align: center; height: 400px; } div.tabContents p.text { margin: 10px; line-height: 1.4; }
jQuery:プラグイン:FlexSlider2:SVG:枝豆隊長
枝豆隊長:完成版にリンク
★以前の枝豆隊長に手を加える
・ハンバーガーメニューを作ってみる
- 別ファイルで作成して、スマホ画面用のメディアクエリ部分に当てはめる
- 幅指定、ボーダーの指定を修正する
・ハンバーガーメニューで推奨されるサイズは44px以上
★FlexSliderを適応させる
ulはサイトに複数でてくるので、必ずクラス名をつける
FlexSlider用のulには、クラス名をつける
FlexSlider 2
cssとjsをリンクさせたあと、ホームページにあるscript
// Can also be used with $(document).ready() $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); });
の挿入をわすれない。
PCサイト版
スマホサイズ版
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>枝豆隊長</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style_mame.css"> <link rel="stylesheet" href="FlexSlider/flexslider.css"> <script src="js/jquery-2.2.1.min.js"></script> <script src="FlexSlider/jquery.flexslider.js"></script> <script> // Can also be used with $(document).ready() $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); </script> <script> $(function(){ $('.box').on('click',function(){ //div.boxをクリックしたら $('.menu').slideToggle(200); //div.boxにクラス名redが追加される //display: block; と display: none; が切り替わっている }); }); </script> </head> <body> <header> <h1>枝豆隊ロゴ</h1> <p id="p_header">豆はカラダにイイ</p> <div class="box"></div> <nav class="menu"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">枝豆一覧</a></li> <li><a href="#">枝豆隊</a></li> <li><a href="#">アクセス</a></li> </ul> </nav> </header> <div id="container"> <div class="flexslider"> <ul class="slides"> <li><img src="img/mame01.png" alt="#"></li> <li><img src="img/mame02.png" alt="#"></li> <li><img src="img/mame03.png" alt="#"></li> </ul> </div><!--.slides--> <div id="wrapper"> <section id="vitamin"> <h2>枝豆の栄養素はスゴい</h2> <p>枝豆は大豆が未成熟で収穫したものですが、たくさんの栄養がつまっています。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。</p> </section> <section id="reciept"> <h2>代表的な豆料理</h2> <h3>枝豆</h3> <img class="img_shadow" src="img/mame01.jpg" alt="枝豆"> <p class="reciept_mame">枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。</p> <h3>ずんだ</h3> <img class="img_shadow" src="img/mame02.jpg" alt="ずんだ"> <p class="reciept_mame">ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。</p> </section> </div> <div id="sub"> <aside> <h3>枝豆隊隊長</h3> <img class="taicho" src="img/mame03.jpg" alt="肖像 枝豆隊長"> <p>枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p> </aside> </div> </div> <footer><p><small>2004-2012©枝豆隊</small></p></footer> </body> </html>
自分でかいたものだけ、他にFlexSlider2のcssもリンクさせている
@charset "utf-8"; /* CSS Document */ /*reset*/ html,body,h1,h2,h3,h4,ul,li,p { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo,; } ul { list-style: none; } a { text-decoration: none; } body { font-size: 16px; } img { border: none; vertical-align: bottom; margin-bottom: 20px; } p { line-height: 1.5em } /*----------------------------------*/ /* font-size */ html { font-size: 62.5%; } /* =10px */ body { font-size: 16px; font-size: 1.6rem; } /* =16px */ h1 { font-size: 32px; font-size: 3.2rem; } h2 { font-size: 24px; font-size: 2.4rem; } h3 { font-size: 20px; font-size: 2.0rem; } h4 { font-size: 18px; font-size: 1.8rem; } p { font-size: 16px; font-size: 1.6rem } /*layout*/ header { padding-top: 20px; } #container { width: 960px; margin: 0 auto; background: #FFF; overflow: hidden; } #wrapper { width: 600px; padding: 10px; float: left; } #sub { width: 300px; float: right; } header { margin-bottom: 40px; } h1 { margin: 0 auto; width: 71px; height: 72px; background: url(../img/mame.svg) no-repeat; white-space: nowrap; text-indent: 100%; overflow: hidden; } #p_header { text-align: center; font-size: 36px; font-weight: bold; margin-bottom: 10px; } nav { width: 100%; height: 48px; background: -webkit-linear-gradient(#754435,#5D1C05); background: linear-gradient(#754435,#5D1C05); } .menu ul { width: 960px; margin: 0 auto; overflow: hidden; } .menu li { width: 25%; box-sizing: border-box; text-align: center; font-weight: bold; letter-spacing: 2px; background: -webkit-linear-gradient(#754435,#5D1C05); background: linear-gradient(#754435,#5D1C05); float: left; border-right: 1px solid #FFF; } .menu li:first-child { border-left: 1px solid #FFF; } .menu li a{ display: block; color: #FFF; line-height: 48px; } .menu li a:hover{ color: #6F3; background: -webkit-linear-gradient(#5D1C05,#754435); background: linear-gradient(#5D1C05,#754435); } #vitamin { margin-bottom: 30px; } #reciept { margin-bottom: 30px; } .img_shadow { max-width: 580px; box-shadow: 5px 5px 5px #999; } .taicho { max-width: 300px; } #sub { margin-bottom: 30px; } h2,h3 { margin-bottom: 20px; } .reciept_mame { margin-bottom: 30px; } footer { width: 100%; letter-spacing: 3px; background: #629E3C; } footer p { color: #FFF; line-height: 3em; text-align: center; } @media screen and (max-width: 999px) { .menu ul { width: 100%; } .menu li { border-right: 1px solid #FFF; } .menu li:first-child { border-left: none; } #container { width: 96%; } #wrapper { width: 98%; padding: 1%; } #sub { width: 98%; padding: 1%; float: none; } nav { margin-bottom: 30px; } .menu li { width: 25%; } .taicho { max-width: 580px; box-shadow: 5px 5px 5px #999; } } @media screen and (max-width: 767px) { nav { clear: both; } img { width: 98%; } #wrapper { text-align: center; width: 98% } #sub { text-align: center; } /*スマホ用ナビボタン*/ .box { cursor: pointer; width: 44px; height: 44px; background: url(../img/humburger.svg) no-repeat; float: right; margin-right: 10px; } /*--------------------------*/ /*jQueryで変化するもの1*/ .menu { display: none; /*はじめは隠しておいて、クリックすると出てくる*/ cursor: pointer; width: 100%; height: 200px; clear: both; } .menu li { width: 100%; float: none; font-weight: bold; text-align: center; border: none; } .menu li a { display: block; line-height: 50px; color: #FFF; } .menu li a:hover { color: #FFF; background: #98CC23; } .menu li a:nth-child(-n+3) { /*3番目まで全部*/ border-bottom: 2px solid #FFF; } }
jQuery:onclickイベント:アニメーション:toggleClassとslideToggle
★CSS3とjQueryでのアニメーションの使い分け
極力CSSでアニメーションさせる
★hoverでは無く、jQueryのclickイベントを使ってtransformを適用させる練習
toggleClass
:指定したCSSクラスが要素に無ければ追加し、あれば削除する。
アニメーション1:完成版にリンク
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>アニメーション1</title> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ $('.top').on('click',function(){ //div.boxをクリックしたら $(this).toggleClass('red'); //div.boxにクラス名redが追加される }); $('.mid').on('click',function(){ //div.boxをクリックしたら $(this).toggleClass('rotate'); //div.boxにクラス名rorateが追加される }); $('.btm').on('click',function(){ //div.boxをクリックしたら $(this).toggleClass('scale'); //div.boxにクラス名scaleが追加される }); });</script> <style> #container { width: 200px; margin: 30px auto; } .box { cursor: pointer; width: 200px; height: 200px; margin: 10px; } p { font-weight: bold; text-align: center; padding-top: 20px; } /*--------------------------*/ .top { background: #CCC; transition: 1.5s; } /*--------------------------*/ .mid { background: #9CC; transition: 1s; } /*--------------------------*/ .btm { background: #FC9; transition: 1s; } /*--------------------------*/ /*jQueryで変化するもの1*/ .red { background: #F00; transform: translate(200px,0); /*translate( X軸方向の距離, Y軸方向の距離 );*/ } /*--------------------------*/ /*jQueryで変化するもの2*/ .rotate { transform: rotate(45deg); /*rotate( 角度deg );*/ } /*--------------------------*/ /*jQueryで変化するもの3*/ .scale { transform: scale(1.5,1.5); /*scale( X軸方向の距離, Y軸方向の距離 );*/ } </style> </head> <body> <div id="container"> <div class="box top">右に200px移動</div> <div class="box mid">45度回転</div> <div class="box btm">1.5倍に拡大</div> </div><!--#container--> </body> </html>
★slideToggle
:各要素の高さを操作して、slideDown/slideUpの動作を交互に行います。
アニメーション効果は指定したスピードで実行されます。
速度は、”slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で指定します。
例えば”1500”であれば、1.5秒かけてアニメーションが行われます。
省略された場合は、”normal”が用いられます。
アニメーション2:完成版にリンク
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>アニメーション2</title> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ $('.box').on('click',function(){ //div.boxをクリックしたら $('.menu').slideToggle(200); //div.boxにクラス名redが追加される //display: block; と display: none; が切り替わっている }); }); </script> <style> /*reset*/ html,body,ul,li,div,p { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } body { font-size: 16px; background: #FFF url(img/back.jpg); } a { text-decoration: none; } ul { list-style: none; } /*----------------------------------*/ .box { cursor: pointer; width: 200px; height: 200px; background: #999; } /*--------------------------*/ /*jQueryで変化するもの1*/ .menu { display: none; /*はじめは隠しておいて、クリックすると出てくる*/ cursor: pointer; width: 200px; height: 200px; background: #CCC; } li { width: 200px; height: 50px; font-weight: bold; text-align: center; } li a { display: block; line-height: 50px; color: #FFF; } li a:hover { background: #3C3; } li a:nth-child(-n+3) { /*3番目まで全部*/ border-bottom: 2px solid #FFF; } </style> </head> <body> <div id="container"> <div class="box"><p>Menu</p></div> <div class="menu"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">枝豆一覧</a></li> <li><a href="#">枝豆隊</a></li> <li><a href="#">アクセス</a></li> </ul> </div> </div><!--#container--> </body> </html>
HTML:h1の扱い
★h1とpについては、必ず文章を入力すること!
★画像にしてはいけない。大企業だけが、画像をいれることをしてよい。
★検索するひとは、会社名でなく、地域やサービス内容で検索する。
※サイトについて、画像と文章が一致していませんが、練習のため。
観光ガイド_復習:完成版にリンク
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>観光ガイド_復習</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <header> <h1>浅草観光ガイド</h1> <p class="lead">石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。亜熱帯気候のため、マングローブの森や色とりどりの南国の花が咲き、赤瓦屋根の民家、そして何よりも、鮮やかなコバルトブルーの海岸は、多くの観光客をひきつけ、特にダイバーやシュノーケリングを楽しむ人にとっては格好の場所になっています。</p> </header> </div><!-- /#conteiner --> </body> </html>
@charset "UTF-8"; /* CSS Document */ /*reset*/ html,body,h1,p,header { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } body { font-size: 16px; background: #FFF url(img/back.jpg); } img { border: none; vertical-align: bottom; } /*----------------------------------*/ /*どのような画面でも見やすい文字に自動調整する機能(モバイル対応)*/ /* font-size */ html { font-size: 62.5%; } /* =10px */ body { font-size: 16px; font-size: 1.6rem; } /* =16px */ h1 { font-size: 32px; font-size: 3.2rem; } h2 { font-size: 24px; font-size: 2.4rem; } h3 { font-size: 20px; font-size: 2.0rem; } h4 { font-size: 18px; font-size: 1.8rem; } p { font-size: 16px; font-size: 1.6rem } /*body*/ body { background: #9BB9AB; } /*---------------------------*/ #container { width: 760px; margin: 0 auto; padding: 20px; background: #FFF; } h1 { width: 730px; height: 170px; /*最初は画像の高さで指定して、padding後にいらない高さを削る*/ color: #FFF; text-align: right; padding: 150px 100px 0 0; background: url(img/skytree_trim.jpg) no-repeat; } .lead { line-height: 1.5; }
CSS:ナビゲーション:基本
★レギュレーション:複数ページをつくるときのルールになる型
いつでも作れるようにしておく
◎縦ナビゲーション
縦ナビゲーション:完成版にリンク
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>縦ナビゲーション</title> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ //ページが開いたら $('p').on('click',function(){ }); }); </script> <style> /*reset*/ html,body,nav,ul,li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } a { text-decoration: none; } body { font-size: 16px; } .nav { /*レスポンシブでは親要素に幅をつける*/ width: 300px; margin: 100px auto; } li { /*文字についてのことだけ書く*/ font-size: 20px; font-weight: bold; } li a{ display: block; cursor: pointer; line-height: 50px; margin-bottom: 5px; color: #FFF; padding-left: 1em; background: #000; } li a:link, li a:visited { background: #69C; } li a:hover{ background: #F90; } /*----------------------------------*/ </style> </head> <body> <nav> <ul class="nav"> <li><a herf="#">カテゴリA</a></li> <li><a herf="#">カテゴリB</a></li> <li><a herf="#">カテゴリC</a></li> </ul><!--.nav--> </nav> </body> </html>
◎横ナビゲーション
横ナビゲーション:完成版にリンク
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>横ナビゲーション</title> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ //ページが開いたら $('p').on('click',function(){ }); }); </script> <style> /*reset*/ html,body,nav,ul,li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } a { text-decoration: none; } body { font-size: 16px; } .nav { /*レスポンシブでは親要素に幅をつける*/ width: 600px; margin: 100px auto; overflow: hidden; } li { /*文字についてのことだけ書く*/ width: 200px; height: 50px; /*line-heightと同じでよい*/ font-size: 20px; font-weight: bold; float: left; } li a{ display: block; cursor: pointer; line-height: 50px; color: #FFF; text-align: center; border-left: 2px solid #FFF; background: #000; } li:first-child a { border-left: none; } li a:link, li a:visited { background: #69C; } li a:hover{ background: #F90; } /*----------------------------------*/ </style> </head> <body> <nav> <ul class="nav"> <li><a herf="#">カテゴリA</a></li> <li><a herf="#">カテゴリB</a></li> <li><a herf="#">カテゴリC</a></li> </ul><!--.nav--> </nav> </body> </html>
jQuery:おさらい
【1問目】
ブログ0619_まとめ_idセレクタ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ブログ0619_まとめ_idセレクタ</title> <!--「要素」を選ぶ--> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ //ページが開いたら $('#test').on('click',function(){ $(this).text('クリックされました'); }); }); </script> </head> <body> <p id="test"><a href="#">idセレクタ:ココをクリックすると文字が変更されます</a></p> </body> </html>
【2問目】
ブログ0619_まとめ_classセレクタ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ブログ0619_まとめ_classセレクタ</title> <!--「要素」を選ぶ--> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ //ページが開いたら $('.test').on('click',function(){ $(this).text('クリックされました'); }); }); </script> </head> <body> <p class="test"><a href="#">classセレクタ:ココをクリックすると文字が変更されます</a></p> </body> </html>
【3問目】
ブログ0619_まとめ_要素セレクタ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ブログ0619_まとめ_要素セレクタ</title> <!--text--> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ //ページが開いたら $('p').on('click',function(){ $(this).text('クリックされました'); }); }); </script> </head> <body> <p class="test"><a href="#">classセレクタ:ココをクリックすると文字が変更されます</a></p> <div><a href="#">(これは、divタグ)ココをクリックしても何も起こりません</a></div> <ul> <li><a href="#">(これは、liタグ)ココをクリックしても何も起こりません</a></li> </ul> </body> </html>
【4問目】
ブログ0619_まとめ_子孫セレクタ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ブログ0619_まとめ_子孫セレクタ</title> <!--text--> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ //ページが開いたら $('div p').on('click',function(){ $(this).text('クリックされました'); }); }); </script> </head> <body> <div><p><a href="#">(divの中のpタグ)ココをクリックすると文字が変わります</a></p></div> <p class="test"><a href="#">(これは、pタグ)ココをクリックしても何も起こりません</a></p> </body> </html>
【5問目】
ブログ0619_まとめ_クリックイベント
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ブログ0619_まとめ_クリックイベント</title> <!--「実行タイミング」を選ぶ--> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ //ページが開いたら $('p').on('click',function(){ $(this).text('クリックされました'); }); }); </script> </head> <body> <p><a href="#">ココをクリックすると文字が変更されます</a></p> </body> </html>
【6問目】
ブログ0619_まとめ_マウスオーバーイベント
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ブログ0619_まとめ_マウスオーバーイベント</title> <!--onmouseover--> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ //ページが開いたら $('p').on('mouseover',function(){ $(this).text('マウスオーバーしました'); }); }); </script> </head> <body> </body><body> <p><a href="#">ココにマウスを乗せると文字が変更されます</a></p> </body> </html>
【7問目】
ブログ0619_まとめ_マウスアウトイベント
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ブログ0619_まとめ_マウスアウトイベント</title> <!--onmouseout--> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ //ページが開いたら $('p').on('mouseout',function(){ $(this).text('マウスアウトしました'); }); }); </script> </head> <body> <p><a href="#">ココからマウスを外すと文字が変更されます</a></p> </body> </html>
【8問目】
ブログ0619_まとめ_テキストボックスの色を変更する
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ブログ0619_まとめ_テキストボックスの色を変更する</title> <!--実行する処理を書く--> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ //ページが開いたら $('input').on('focus',function(){ $('input').css('background-color','#ff0') }).on('blur',function(){ $('input').css('background-color','#fff') }); }); </script> <style> p { cursor: pointer; } input { width: 50%; height: 30px; } </style> </head> <body> <p><input type="text" value="フォーカスすると黄色になって、外すと元に戻ります"></p> </body> </html>
【9問目】
ブログ0619_まとめ_マウスオーバーでdivの背景色を変更する
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ブログ0619_まとめ_マウスオーバーでdivの背景色を変更する</title> <!--実行する処理を書く--> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ //ページが開いたら $('#bg01').on('mouseover',function(){ $(this).css('background-color','#777'); }); $('#bg02').on('mouseover',function(){ $(this).css('background-color','#999'); }); $('#bg03').on('mouseover',function(){ $(this).css('background-color','#ccc'); }); $('#bg04').on('mouseover',function(){ $(this).css('background-color','#eee'); }); }); </script> <style> div { cursor: pointer; display: inline-bloclk; padding: 18px; margin: 10px; border: 1px solid #ccc; } </style> </head> <body> <div id="bg01">01</div> <div id="bg02">02</div> <div id="bg03">03</div> <div id="bg04">04</div> </body> </html>
【10問目】
ブログ0619_まとめ_マウスオーバーでdivをフェードアウトする
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ブログ0619_まとめ_マウスオーバーでdivをフェードアウトする</title> <!--実行する処理を書く--> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ //ページが開いたら $('#bg01').on('mouseover',function(){ $(this).fadeOut('slow'); }); }); </script> <style> div { cursor: pointer; display: inline-block; padding: 18px; margin: 10px; border: 1px solid #ccc; } </style> </head> <body> <div id="bg01">マウスオーバーするとフェードアウトします</div> </body> </html>
【11問目】
ブログ0619_まとめ_クリックで新しいdivを作り出す
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ブログ0619_まとめ_クリックで新しいdivを作り出す</title> <!--実行する処理を書く--> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ //ページが開いたら $('p').on('click',function(){ $('p').after('<div>test</div>'); }); }); </script> <style> div { cursor: pointer; display: inline-block; padding: 18px; margin: 10px; border: 1px solid #ccc; } </style> </head> <body> <p><a href="#">ココをクリックすると新しいdivが作られます</a></p> </body> </html>
【12問目】
ブログ0619_まとめ_クリックでdivの幅と高さを変更する
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ブログ0619_まとめ_クリックでdivの幅と高さを変更する</title> <!--実行する処理を書く--> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ //ページが開いたら $('div').on('click',function(){ $(this).css('width','40px').css('height','40px'); }); }); </script> <style> div { cursor: pointer; display: inline-block; width: 20px; height: 20px; padding: 18px; margin: 10px; border: 1px solid #ccc; } </style> </head> <body> <div id="bg01">01</div> <div id="bg02">02</div> <div id="bg03">03</div> <div id="bg04">04</div> </body></html>
【13問目】
ブログ0619_まとめ_クリックでclassの付け替えをする
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ブログ0619_まとめ_クリックでclassの付け替えをする</title> <!--実行する処理を書く--> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ //ページが開いたら $('p').on('click',function(){ if($(this).hasClass('on')){ //hasClass→「あったら」(検証) $(this).removeClass('on'); $('a',this).text('ココをクリックすると「on」というクラスがつきます') } else { $(this).addClass('on'); $('a',this).text('「on」というclassがつきました。もう一度クリックすると元に戻ります') } }); }); </script> <style> .on { background: #ccc; } </style> </head> <body> <p><a href="#">ココをクリックすると「on」というclassがつきます</a></p> </body> </html>