４月８日 授業内容（ブロックレベル要素とインライン要素,「 display: table」を使ったタブパネル、アニメーションで電光掲示板をつくる、アニメーション（桜））
★「 display: table」を使ったタブパネル
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-2.2.1.min.js"></script> <script src="js/script.js"></script> <title>「 display: table」を使ったタブパネル</title> </head> <body> <div id="panel"> <h1>世界の街並み</h1> <ul class="tab"> <li class="current"><a href="#paris">パリ</a></li> <li><a href="#nice">ニース</a></li> <li><a href="#venezia">ベネチア</a></li> <li><a href="#firenze">フィレンツェ</a></li> </ul> <div class="tabContent current" id="paris"> <div class="round"> <p> <a href="#"> <img src="img/bg1.png" alt="paris"> </a> </p> </div><!--.round--> <p class="text">パリ（仏: Paris[1]、巴里）は、フランスの首都であり、イル＝ド＝フランス地域圏の首府である。フランス最大の都市であり、同国の政治、経済、文化などの中心である。ニューヨーク、ロンドン、東京などと並ぶ世界トップクラスの世界都市でもある。行政上では、1コミューン単独で県を構成する特別市であり、ルーヴル美術館を含む1区を中心に、時計回りに20の行政区が並ぶ（エスカルゴと形容される[2]</p> </div><!--.tabContent--> <div class="tabContent" id="nice"> <div class="round"> <p> <a href="#"> <img src="img/bg2.png" alt="nice"> </a> </p> </div> <p class="text">ニース（Nice）は、フランスの南東部に位置する都市で、アルプ＝マリティーム県の県庁所在地である。プロバンス語（ニサール語）ではニッサ（Niça、Nissa）、イタリア語ではニッツァ（Nizza）という。 地中海・コート・ダジュールに面する、世界的に有名な保養地・観光都市である。</p> </div> <div class="tabContent" id="venezia"> <div class="round"> <p> <a href="#"> <img src="img/bg3.png" alt="venezia"> </a> </p> </div> <p class="text">ヴェネツィア（イタリア語: Venezia ( 聞く)[4]）は、イタリア共和国北東部に位置する都市で、その周辺地域を含む人口約26万人の基礎自治体（コムーネ）。ヴェネト州の州都、ヴェネツィア県の県都である。ヴの表記によりベネチアと表記されることもある。 中世にはヴェネツィア共和国の首都として栄えた都市で、「アドリア海の女王」「水の都」「アドリア海の真珠」などの別名をもつ。英語では「Venice」と呼ばれ、これに由来して日本語でもヴェニス、ベニスと呼ばれることもある。</p> </div> <div class="tabContent" id="firenze"> <div class="round"> <p> <a href="#"> <img src="img/bg4.png" alt="firenze"> </a> </p> </div> <p class="text">フィレンツェ（イタリア語: Firenze ( 聞く)）は、イタリア共和国中部にある都市で、その周辺地域を含む人口約36万人の基礎自治体（コムーネ）。トスカーナ州の州都、フィレンツェ県の県都である。 中世には毛織物業と金融業で栄え、フィレンツェ共和国としてトスカーナの大部分を支配した。メディチ家による統治の下、15世紀のフィレンツェはルネサンスの文化的な中心地となった。 市街中心部は「フィレンツェ歴史地区」としてユネスコの世界遺産に登録されている。1986年には欧州文化首都に選ばれた。</p> </div> </div><!--#panel--> </body> </html>
@charset "utf-8"; /* CSS Document */ html,body,h1,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*/ body{overflow-y:scroll;/*文字が多くてレイアウトがずれてしまうのを防止する為に元からスクロールバーを表示させる*/ font: 14px/1.3 sans-serif; /*font指定のショートハンド*/} #panel{width:630px; margin:10px auto 0; background:#666; padding:10px;} h1{color:#fff; font-size:16px; padding:10px 5px;} ul.tab { display:table;/*中身が横並びにする*/ width: 100%; } ul.tab li{ display: table-cell; width: 25%;/*今回は４つのliなので25%ずつ*/ text-align:center;} ul.tab li a { display: block; background: #aaa; background-image: linear-gradient(to bottom, #eeedf2, #717171 4%, #2b2b2b 74%); border: 1px solid #444444; border-bottom: none; border-radius: 5px 5px 0 0; box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); color: #fff; font-size: 12px; margin: 0 2px; padding: 20px; text-align: center; } .tabContent{display: none; padding: 0 3px} .tabContent.current{display:block;} ul.tab li.current a { background: #FCFCFC; color: #000; } div.round { background: #FCFCFC; border-radius: 0 0 5px 5px; padding: 10px; text-align: center; height: 400px; } p.text { margin: 10px; line-height: 1.4; }
$(function(){
//タブ
$('.tab a').on('click',function(){
$(this).parent().addClass('current').siblings('.current').removeClass('current');
//クリックしたliの親要素(li)にcurrentをつける。他の要素にcurrentがついている場合は削除する。
var tabTarget=$(this).attr('href');//クリックしたa hrefの値変数化する
$(tabTarget).addClass('current').siblings('.current').removeClass('current');
//クリックされたタブの中身の切替
return false;
});//click
});
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
★アニメーションで電光掲示板をつくる
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style3.css"> <title>アニメーションで電光掲示板をつくる</title> </head> <body> <div id="container"> <img src="img/felica.png" alt="felica"> <div id="news"> <ul class="news-ticker"> <li>【GW】早割がお得！！！</li> <li>【海外】ハワイ５日間１０万円</li> <li>【国内】北海道新幹線で行く函館２日間</li> </ul> </div><!--/*#news*/--> </div><!--#container--> </body> </html>
@charset "utf-8"; /* CSS Document */ html,body,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{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);} } #news{width:800px;/*文字の数によって可変*/ height:30px;/*３行あるliを１行だけ表示させるため*/ overflow:hidden;/*３行あるliを１行だけ表示させるため*/ margin:100px auto 0; font-size:24px; text-align:center;} #news li{ height:24px;/*３行あるliを１行だけ表示させるため*/ line-height:24px;/*３行あるliを１行だけ表示させるため*/ padding:3px; color:olive; } .news-ticker{ animation:ticker 10s infinite; /* アニメーションプロパティのショートハンド ①keyframesにつける名前 ②アニメの時間 ③ループの回数*/ } @keyframes ticker { /*１行目*/ 0%{opacity:0;transform:translateY(0);}/*※Yは必ず大文字で*/ 10%{opacity:1;transform:translateY(0);} 20%{opacity:1;transform:translateY(0);} 33%{opacity:0;transform:translateY(0);} /*２行目*/ 34%{opacity:0;transform:translateY(-30px);} 43%{opacity:1;transform:translateY(-30px);} 53%{opacity:1;transform:translateY(-30px);} 65%{opacity:0;transform:translateY(-30px);} /*３行目*/ 66%{opacity:0;transform:translateY(-60px);} 76%{opacity:1;transform:translateY(-60px);} 86%{opacity:1;transform:translateY(-60px);} 100%{opacity:0;transform:translateY(-60px);} }
。。。。。。。。。。。。。。。。。。。。。
アニメーション（桜）
photoshopのペンツールで桜を描く。(向きの違う桜の画像を２つ作る。)
①新規作成（幅高さ２５ｐｘ）。
②新規レイヤーを開く。
③ペンツールで桜を描く。
※ペンツールで描いたものに色を塗るときはウインドウ→パスを選択し、描いた桜のサムネイルをctrl + クリックしアウトライン表示にする。
レイヤーに戻って好きな色で塗りつぶす。
④描いた桜のレイヤーをコピーし、編集→変形→水平方向に反転させる。
⑤両方の画像をweb用に保存する。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style4.css"> <title>アニメーション（桜）</title> </head> <body> <div id="container"> <div class="inner"> <div class="sakura1"></div> <div class="sakura2"></div> <div class="sakura3"></div> <div class="sakura4"></div> <div class="sakura5"></div> <div class="sakura6"></div> <div class="sakura7"></div> <div class="sakura8"></div> <div class="sakura9"></div> <div class="sakura10"></div> <div class="sakura11"></div> <div class="sakura12"></div> <div class="sakura13"></div> <div class="sakura14"></div> <div class="sakura15"></div> <div class="sakura16"></div> <div class="sakura17"></div> <div class="sakura18"></div> <div class="sakura19"></div> <div class="sakura20"></div> </div> </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;} #container{width:100%; background:black; } .inner{width:300px; height:700px; margin:0 auto; position:relative;} .inner div{ opacity:0; animation-name:Drop; animation-duration:5s; animation-iteration-count:infinite; animation-timing-function:linear; position:absolute; display:block; width:25px; height:25px; background:url(../img/sakura1.png) no-repeat;} .sakura2,.sakura4,.sakura6,.sakura8,.sakura10,.sakura12,.sakura14,.sakura16,.sakura18,.sakura20{ background:url(../img/sakura2.png) no-repeat !important;/*同じところにcssを指定するときでも親要素から詳しく記述したほうが 優先されるのでそれを避けるためにこれを入力*/ background-size:24px 14px !important; } .sakura1{left:9px;animation-delay:0.6s;animation-duration:6s !important;} .sakura2{left:18px;animation-duration:3s !important;} .sakura3{left:25px;animation-delay:0.3s;} .sakura4{left:50px;animation-duration:4.5s !important;} .sakura5{left:60px;animation-delay:0.2s;} .sakura6{left:65px;animation-delay:0.6s;animation-duration:4.7s !important;} .sakura7{left:79px;animation-duration:5.5s !important;} .sakura8{left:92px;animation-delay:0.7s;animation-duration:4.5s !important;} .sakura9{left:110px;animation-delay:0.4s;} .sakura10{left:123px;animation-delay:0.9s;animation-duration:6s !important;} .sakura11{left:130px;animation-delay:0.5s;animation-duration:4.8s !important;} .sakura12{left:145px;animation-delay:0.1s;} .sakura13{left:160px;animation-delay:0.3s;animation-duration:5.2s !important;} .sakura14{left:175px;animation-delay:0.7s;animation-duration:5.3s !important;} .sakura15{left:196px;} .sakura16{left:220px;animation-delay:0.9s;animation-duration:4s !important;} .sakura17{left:230px;animation-delay:0.6s;animation-duration:4.2s !important;} .sakura18{left:260px;animation-delay:0.1s;animation-duration:5.1s !important;} .sakura19{left:280px;animation-delay:0.8s;} .sakura20{left:285px;animation-delay:0.3s;animation-duration:3.8s !important;} @keyframes Drop{ 0%{transform:translate(0,0);opacity:0;} 20%{transform:translate(20px,100px);opacity:1;} 40%{transform:translate(50px,250px);opacity:1;} 60%{transform:translate(70px,400px);opacity:1;} 80%{transform:translate(10px,350px);opacity:1;} 100%{transform:translate(-30px,500px);opacity:0.2;} }
