３月２３日 授業内容（jQueryのプラグイン、モーダルウィンドウ（総称：Light Box）,transition,transform関数（translate,rotate,scale）、メディアクエリ（レスポンシブデザイン）、サイト制作の参考にするポートフォリオについて,モバイルフレンドリーテスト）
03_23
※ｊQueryのプラグイン
yachin29.hatenablog.com
①demoでそれぞれの機能がどのようなものかを確認する。→download→今回は1.11.4(Stable, for jQuery1.6+にチェックを入れ、toggle allのチェックをはずす。
下記の必要なものにチックを入れる。（今回はWidgetsのtabsにチェック）
テーマの色を選ぶ→ダウンロード
②解凍して、htmlを開く
③必要な物意外を消す。
<!doctype html> <html lang="us"> <head> <meta charset="utf-8"> <title>jQuery UI Example Page</title> <link href="jquery-ui.css" rel="stylesheet"> <style> body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px; } .demoHeaders { margin-top: 2em; } div#tabs{width:600px; font-size:16px; margin:0 auto;} </style> </head> <body> <h1>Welcome to jQuery UI!</h1> <!-- Tabs --> <h2 class="demoHeaders">Tabs</h2> <div id="tabs"> <ul> <li><a href="#tabs-1">First</a></li> <li><a href="#tabs-2">Second</a></li> <li><a href="#tabs-3">Third</a></li> </ul> <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div> <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div> </div><!--#tabs--> <script src="external/jquery/jquery.js"></script> <script src="jquery-ui.js"></script> <script> $( "#tabs" ).tabs(); // Hover states on the static widgets $( "#dialog-link, #icons li" ).hover( function() { $( this ).addClass( "ui-state-hover" ); }, function() { $( this ).removeClass( "ui-state-hover" ); } ); </script> </body> </html>
モーダルウィンドウ（総称：Light Box）・・・javascriptのalertのような小さい画面で表示する機能のこと
※Light Box:下記のサイトでダウンロードする。解凍して中身を確認する。
lokeshdhakar.com
①大小の画像を４枚ずつつくる。
②Light BOXのフォルダにimgのフォルダを作って保存する。
③今回必要なのはｓｒｃ→jｓ,ｃｓｓ、imagesをすべてLight Boxの中に移す（imagesの画像を選択し、imgの中に移す）。
④下記の様に入力し、cssのimagesをimgに置換する。
※CSS,scriptのリンクを入力するときの順番に気をつけること
記事の下の方に記載のメデイアクエリでの表示
⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩
タブレット用
スマホ用
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>Light Box(http://lokeshdhakar.com/projects/lightbox2/)</title> <!--※下記のリンクの順番は必ず守ること--> <link rel="stylesheet" href="css/style.css"><!--①番目は自分が書いたcss--> <link rel="stylesheet" href="css/lightbox.css"><!--②番目はプラグイン用LightBoxのCSS--> <script> lightbox.option({ 'resizeDuration': 200, 'wrapAround': true }) </script> </head> <body> <div id="container"> <ul> <li><a href="img/01.png " data-lightbox="lightbox"><img src="img/01s.png" alt="pan"> <div id="cap"> <h2>Boulangerie</h2> <p>ここは１００年前から続くパン屋さんで、歴代の店主はフランスでのコンクールで優勝経験が多数あります。</p> </div> </a></li><!--http://lokeshdhakar.com/projects/lightbox2/のサイトのInitialize with HTMLの下の記述を同じように書く。名前だけ変更する--> <li><a href="img/02.png" data-lightbox="lightbox"><img src="img/02s.png" alt="pan2"> <div id="cap2"> <h2>Boulangerie</h2> <p>最近オープンしたばかりですが、常に行列ができる人気店です。</p> </div> </a></li> <li><a href="img/03.png" data-lightbox="lightbox"><img src="img/03s.png" alt="cake"> <div id="cap3"> <h2>Patisserie</h2> <p>有名パティシェが働くケーキ屋さん</p> </div> </a></li> <li><a href="img/04.png" data-lightbox="lightbox"><img src="img/04s.png" alt="cake2"> <div id="cap4"> <h2>ケーキ屋</h2> <p>あまり人気のないケーキ屋</p> </div> </a></li> </ul> <script src="js/jquery-1.12.2.min.js"></script><!--③番目はjqueryの本体を入れる。記述はbody--> <script src="js/lightbox.js"></script><!--④番目はプラグインのjQueryを入れる--> </div><!--#container--> </body> </html>
@charset "utf-8"; /* CSS Document */ @charset "utf-8"; /* CSS Document */ html,body,h1,h2,h3,p,ul,li{font-family:"Hiragino Kaku Gothic proN", Meiryo, sans-serif; padding:0; margin:0;} a{text-decoration:none;} ul,li{list-style:none; } img{vertical-align:bottom;} /*body*/ ul{width:1242px; padding:5px; margin:50px auto; overflow:hidden; border:1px solid black;} ul li{margin:5px; float:left; position:relative;/*positionの基準点*/ overflow:hidden;}/*大きさより外にあるものを隠す*/ /*#cap*/ div#cap{width:100%; height:200px;/*liの幅高さにめいっぱいということ*/ background:rgba(0,0,0,0.5); position:absolute; top:0; left:0; opacity:0;/*イベントが効いたときのみ表示したいので初期設定では消す*/ transition:1s;/*opacity:0;からopacity:1;に変わるまでの時間が１秒;*/ transition-timing-function:linear;/*P131*/ } li:hover #cap{opacity:1; color:white;} /*#cap2*/ div#cap2{width:100%; height:200px;/*liの幅高さにめいっぱいということ*/ background:rgba(10,80,20,0.5); position:absolute; top:-100%; left:0; opacity:0;/*イベントが効いたときのみ表示したいので初期設定では消す*/ transition:1s;/*opacity:0;からopacity:1;に変わるまでの時間が１秒;*/ transition-timing-function:cubic-bizer;/*P131*/ } li:hover #cap2{opacity:1; color:white; pasition:absolute; top:0; left:0;} /*#tab3 */div#cap3{width:100%; height:200px;/*liの幅高さにめいっぱいということ*/ background:rgba(10,20,99,0.5); position:absolute; top:0; left:-100%; opacity:0;/*イベントが効いたときのみ表示したいので初期設定では消す*/ transition:1s;/*opacity:0;からopacity:1;に変わるまでの時間が１秒;*/ transition-timing-function:cubic-bizer;/*P131*/ } li:hover #cap3{opacity:1; color:white; pasition:absolute; top:0; left:0;} /*#tab4*/ div#cap4{width:100%; height:200px;/*liの幅高さにめいっぱいということ*/ background:rgba(99,00,20,0.5); position:absolute; top:-100%; right:-100%; opacity:0;/*イベントが効いたときのみ表示したいので初期設定では消す*/ transition:1s;/*opacity:0;からopacity:1;に変わるまでの時間が１秒;*/ transition-timing-function:cubic-bizer;/*P131*/ } li:hover #cap4{opacity:1; color:white; pasition:absolute; top:0; right:0;} @media screen and (max-width:959px){/*カッコ内以外の記述はPCサイズのCSSを引き継ぐ*/ ul{width:620px; margin:100px; } } @media screen and (max-width:767px){/*カッコ内以外の記述はタブレットサイズのCSSを引き継ぐ*/ ul{width:310px; } }
※Transition （教科書P301)
Transformプロパティ（Transform関数）P294～
yachin29.hatenablog.com
一番上の箱は右に移動する
二番目は左に0.5秒間で１０回（3600度分）回転する
三番目は幅、高さともに0.5倍になる
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>P295 Transform</title> <style> div{width:200px; height:200px;} div.trans01{ background:#C63; }/*x軸、ｙ軸の順番*/ .trans01:hover{transform:translate(300px,0);/*動く位置の設定*/ transition:3s;}/*その位置に行くまでの時間の設定*/ .trans02{background:#066; transition:0.5s;} .trans02:hover{transform:rotate(-3600deg);}/*P297 1週は３６０度*/ .trans03{background:olive; transition:2s; width:200px; height:200px;} .trans03:hover{transform:scale(0.5,0.5);/*P297*/ } </style> </head> <body> <div class="trans01">右へ30px</div> <div class="trans02">下へ30px</div> <div class="trans03">下へ30px</div> </body> </html>
googleWebマスター向け公式ブログ
http://googlewebmastercentral-ja.blogspot.jp/
メディアクエリ（P305）・・・端末ごとの表示方法を変えることができる。HTMLはそのままでCSSで端末ごとの設定を変える
PCサイズ（１３６６〜９６０px）
タブレット用（７６８px〜９５９px）
スマートフォン用（７６７px以下）
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> <title>メディアクエリ(端末幅、表示画面の大きさによって表示を変える)</title> </head> <body> </body> </html>
@charset "utf-8"; /* CSS Document */ /*PCサイトのレイアウト*/ body{background:#096;} /*タブレットサイトのレイアウト*/ @media screen and (max-width:959px){ body{background:#c0c; } } /*959pxまでこの中の命令が効く*//*書き換えない限り上の記述が引き継がれる*/ /*スマホサイズのレイアウト*/ @media screen and (max-width:767px){ body{background:olive; } }
googleデベロッパーモバイルガイド
https://developers.google.com/webmasters/mobile-sites/mobile-seo/?hl=ja
⭐レスポンシブデザインの制作
yachin29.hatenablog.com
※モバイルフレンドリーテスト・・・これに合格していないとスマホ対応の表示が出ない
https://www.google.com/webmasters/tools/mobile-friendly/
参考サイト：http://enso.ne.jp/shop/760.html
※ポートフォリオ参考
http://nononono123.html.xdomain.jp/webworks/workprocess/
