４月７日 授業内容（before要素とafter要素,ボタンにアニメーションを追加,ハンバーガーメニューにアニメーションを追加,CSS3によるアニメーション）
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>ハンバーガーメニュー構造</title> <script src="js/1.8.2.js"></script> <script> $(function(){ $('ul.hunbergarlist a.plus').each(function(){ $(this).click(function(){ $(this).next('ul').slideToggle(300); $(this).next('div').slideToggle(300); $(this).toggleClass('minus'); return false; }); }); }); </script> </head> <body> <div class="header"> <h3>Item</h3> <ul class="hunbergarlist" style="display: block;"> <li class=""> <a href="#" class="plus">BRAND</a> <ul class="brand_list" style="display: none;"> <li><a href="">財布</a> <li><a href="">バッグ</a> <li><a href="">小物</a> <li><a href="">コート</a> </ul><!-- .brand_list --> </li> </ul><!-- .hunbergarlist --> <h3>SERIES</h3> <ul class="hunbergarlist" style="display: block;"> <li class=""> <a href="#" class="plus">COLLECTION</a> <ul class="brand_list" style="display: none;"> <li><a href="">Spring Summer 2018</a> <li><a href="">Spring Summer 2019</a> </ul><!-- .brand_list --> </li> </ul><!-- .hunbergarlist --> </div><!-- .header --> </body> </html>
before要素とafter要素
http://yachin29.hatenablog.com/entry/2016/04/07/132815yachin29.hatenablog.com
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>before要素とafter要素</title> <style> p:before{content:"★";} p:after{content:"★";} </style> </head> <body> <p><img src="img/img.png" alt="パスタ"></p> </body> </html>
..............................................................
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>線を動かす</title> <link rel="stylesheet" href="css/style2.css"> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ $('.btn').on('click',function(){ $('.btn-icon').toggleClass('close'); $('#menu').slideToggle(500);//0.5秒 return false; }); }); </script> </head> <body> <div id="header"> <h1>線を動かす</h1> <div class="btn"> <a href="#"> <span class="btn-icon"></span> </a></div><!--.btn--> </div><!--#header--> <div id="menu"> <ul> <li><a href="a">ケーキ</a></li> <li><a href="a">クッキー</a></li> <li><a href="a">団子</a></li> <li><a href="a">味噌汁</a></li> </ul> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ html,body,h1,span,div,header,ul,li{font-family:"Hiragino Kaku Gothic proN", Meiryo, sans-serif; padding:0; margin:0;} a{text-decoration:none;} ul,li{list-style:none;} #header{height:280px; background:aqua; text-align:center; padding-top:20px;} .btn a{height:200px; width:200px; margin:0 auto; display:block; background:white; border-radius:20px; position:relative;} .btn-icon{width:100px; height:4px; background:aqua; position:absolute; top:50%;/*この状態では中心線を基準に合わせてあるので線の幅と高さ分をマイナスマージンを使って真ん中にする。*/ left:50%; margin-left:-50px; margin-top:-2px; } /*position以外にmarginを使わないときはtop,right,bottom,leftを0にしてmargin:;autoでも同じ結果になる*/ .btn-icon:after{display:block; content:""; width:100px; height:4px; background:aqua; top:0; right:0; bottom:0; left:0; margin:auto; transform:rotate(90deg); } /*下記の２つはspan.btn-iconに.closeが着いたものなのでクリックすると中のcssが効く*/ .btn-icon.close{background:transparent; transition:1s; } .close:after{transform:rotate(0deg); transition:0.5s;} ul{background:olive; height:200px;} li{height:50px; text-align:center; box-sizing:border;} li:nth-child(-n+3){border-bottom:1px solid white;} li a{color:white; line-height:50px; display:block;} li a:hover{background:orange;}
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>線を動かす</title> <link rel="stylesheet" href="css/style3.css"> <script src="js/jquery-2.2.1.min.js"></script> <script> $(function(){ $('.btn').on('click',function(){ $('.btn-icon').toggleClass('close'); $('#menu').slideToggle(500);//0.5秒 return false; }); }); </script> </head> <body> <div id="header"> <h1>線を動かす</h1> <div class="btn"> <a href="#"> <span class="btn-icon"></span> </a></div><!--.btn--> </div><!--#header--> <div id="menu"> <ul> <li><a href="a">ケーキ</a></li> <li><a href="a">クッキー</a></li> <li><a href="a">団子</a></li> <li><a href="a">味噌汁</a></li> </ul> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ html,body,h1,span,div,header,ul,li{font-family:"Hiragino Kaku Gothic proN", Meiryo, sans-serif; padding:0; margin:0;} a{text-decoration:none;} ul,li{list-style:none;} #header{height:280px; background:aqua; text-align:center; padding-top:20px;} .btn a{height:150px; width:150px; margin:0 auto; display:block; background:white; border-radius:20px; position:relative;} .btn-icon{width:100px; height:4px; background:aqua; position:absolute; top:50%;/*この状態では中心線を基準に合わせてあるので線の幅と高さ分をマイナスマージンを使って真ん中にする。*/ left:50%; margin-left:-50px; margin-top:-2px; } .btn-icon:before{display:block; content:""; width:100px; height:4px; background:aqua; position:absolute; top:50%;/*この状態では中心線を基準に合わせてあるので線の幅と高さ分をマイナスマージンを使って真ん中にする。*/ left:50%; margin-left:-50px; margin-top:-20px; } .btn-icon:after{display:block; content:""; width:100px; height:4px; background:aqua; position:absolute; top:50%;/*この状態では中心線を基準に合わせてあるので線の幅と高さ分をマイナスマージンを使って真ん中にする。*/ left:50%; margin-left:-50px; margin-top:20px; } .close:before{transform:rotate(45deg); transition:0.5s; position:absolute; top:50%; left:50%; margin-left:-50px; margin-top:-2px;} .btn-icon.close{background:transparent; } .close:after{transform:rotate(-45deg); transition:0.5s; position:absolute; top:50%;/*この状態では中心線を基準に合わせてあるので線の幅と高さ分をマイナスマージンを使って真ん中にする。*/ left:50%; margin-left:-50px; margin-top:-2px;} /*.menu*/ ul{background:olive; height:200px;} li{height:50px; text-align:center; box-sizing:border;} li:nth-child(-n+3){border-bottom:1px solid white;} li a{color:white; line-height:50px; display:block;} li a:hover{background:orange;}
CSS3によるアニメーション
http://yachin29.hatenablog.com/entry/2015/01/05/205732yachin29.hatenablog.com
今回は初めに幅、高さ1300px ,300pxの画像を制作する。
容量を小さくするためにしたのサイトで変換する。
Mac tiny ping
http://homes-designers.hatenablog.com/entry/2015/06/11/172146homes-designers.hatenablog.com
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> <title>CSS3によるアニメーション</title> </head> <body> <div id="container"> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ html,body{font-family:"Hiragino Kaku Gothic proN", Meiryo, sans-serif; padding:0; margin:0;} a{text-decoration:none;} ul,li{list-style:none;} img{border:0;} /*body*/ body{background-image:url(../img/sable2.png); /* 画像を常に天地左右の中央に配置 */ background-position: center center; /* 画像を繰り返し表示しない */ background-repeat: no-repeat; /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */ background-attachment: fixed; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */ background-size: cover; /* 背景画像が読み込まれる前に表示される背景のカラー */ background-color: #464646;} #container{width:100%; height:2000px; background:rgba(150,0,0,0.3); animation-name:bgColor;/*アニメーションの名前（名前は何でも良い）*/ animation-duration:10s;/*アニメーションの時間の長さ*/ animation-iteration-count:infinite;}/*ループの数*/ @keyframes bgColor { 0%{background-color:rgba(150,0,0, 0.3);} 33%{background-color:rgba(0,0,0, 0.9);} 66%{background-color:rgba(255,255,10, 0.3);} 100%{background-color:rgba(150,0,0, 0.3);} }
......................................
★photoshopで画像を制作する。
①新規作成（幅６００ｐｘ、高さ３００ｐｘ）
②新規レイヤー作成して、背景を黒で塗る
③文字ツールで文字を書く。文字に色をつける
④文字の部分をサムネイルで選択。
⑤黒く塗ったレイヤーを選択しbackspaceでくり抜く。
⑥黒く塗ったレイヤー以外の表示を目の玉をクリックして見えなくする。
⑦web用に保存（透過にチェックを入れること）
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style2.css"> <title>アニメーションで背景色を変化させる</title> </head> <body> <div id="container"> <img src="img/felica.png"> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ html,body{font-family:"Hiragino Kaku Gothic proN", Meiryo, sans-serif; padding:0; margin:0;} a{text-decoration:none;} ul,li{list-style:none;} img{border:0;} /*body*/ body{ background-color: #000;} #container{width:600px; height:300px; margin:50px auto; background:rgba(150,0,0,0.3); animation-name:bgColor;/*アニメーションの名前（名前は何でも良い）*/ animation-duration:10s;/*アニメーションの時間の長さ*/ animation-iteration-count:infinite;}/*ループの数*/ @keyframes bgColor { 0%{background-color:rgba(150,0,0, 0.3);} 33%{background-color:rgba(0,0,0, 0.9);} 66%{background-color:rgba(255,255,10, 0.3);} 100%{background-color:rgba(150,0,0, 0.3);} }
