4月5日 授業内容(復習(clickイベントとtransform、slideToggle応用)、flexslider,SVG画像の作成)

clickイベントとtransform

yachin29.hatenablog.com


classを付け加えてcssを指定してもdivにidが指定されているとそれを優先してしまうので注意

f:id:paris1204:20160405165231p:plain


↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

f:id:paris1204:20160405165243p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>transform,transition復習</title>
<script src="js/jquery-1.12.1.min.js"></script>
<script>
$(function(){
$('.box').on('click',function(){//div.boxをクリックした
		$(this).toggleClass('red');
});

$('.top').on('click',function(){
		$(this).toggleClass('translate');
});
	
	$('.mid').on('click',function(){
		$(this).toggleClass('rotate');
		});
		
		$('.btm').on('click',function(){
		$(this).toggleClass('scale');
		});
		
	});
</script>
<style>
.box{width:200px;
height:200px;
margin-bottom:20px;}

.top{background:olive;
  }
  
 

.mid{background:yellow;
  }

.btm{background:aqua;
  }
  
.red{background:red;
}

.translate{transform:translate(200px,0);/*横方向に移動*/
transition:1s;}

.rotate{transform:rotate(3600deg);/*回転*/
transition:1s;}

.scale{transform:scale(1.5);/*大きさを変える*/
transition:1s;}

</style>
</head>

<body>
<div class="box top">右に200px移動</div>
<div class="box mid">360度回転</div>
<div class="box btm">1.5倍に拡大</div>
</body>
</html>

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

テストに出る
slideToggle

f:id:paris1204:20160405182452p:plain
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

f:id:paris1204:20160405182524p:plain

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>slideToggle</title>
<script src="js/jquery-1.12.1.min.js"></script>
<script>
$(function(){
	$('.box').on('click',function(){
		$('.menu').slideToggle(200);//1000分の200秒(0.2秒で動作が完了する。)
		//display:block;とdisplay:noneを繰り返す;
		});
	});
</script>

<style>
/*reset*/
@charset "utf-8";
/* CSS Document */

html,body,div,ul,li{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
padding:0;
margin:0;}

a{text-decoration:none;}

ul,li{list-style:none;}

/*body*/

.box{width:300px;
height:300px;
background:#333;}

.menu{width:300px;
height:200px;
background:olive;
display:none;}/*はじめは見えていないようにする*/

li{height:50px;
width:300px;
box-sizing:border-box;}/*幅、高さの固定*/

li a{line-height:50px;
color:white;
display:block;
text-align:center;
}

li a:hover{background:aqua;}

ul li:nth-child(-n+3){border-bottom:1px solid #FFF;}
</style>
</head>

<body>
<div class="box"></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>
</body>
</html>

。。。。。。。。。。。。。。。。。。。。。。。。。。


slideToggle,Flexslider
今回は前に作った枝豆のデータを下に作りました。

PC表示
f:id:paris1204:20160405210033p:plain


スマホ表示
f:id:paris1204:20160405210101p:plain

フレックススライダー

FlexSlider 2

・上のサイトよりデータをダウンロードする。入力するhtmlがあるフォルダの同一階層に入れる。

・必要な画像(今回は960px x 300px)を用意する。
 jsとcssの記述をサイトを参考にして入力する。

js用
f:id:paris1204:20160405202449p:plain

css

f:id:paris1204:20160405202505p:plain

<!DOCTYPE HTML>
<html kang="ja">
<head>
<meta charset="utf-8">
<title>枝豆隊長 slideToggle,Flexslider</title>
<meta name="viewport" content="width"=device-width><!--レスポンシブウェブデザインでは必ず入力する。-->
<link rel="stylesheet" href="css/style_nth-child_slideToggle.css">
<link rel="stylesheet" href="Flexslider/flexslider.css"><!--Flexslider用css-->
<script src="js/jquery-2.2.1.min.js"></script>
<script src="Flexslider/jquery.flexslider.js"></script>
<script>
$(function(){
	$('.box').on('click',function(){
		$('.menu').slideToggle(200);//スマホのmenu画面用
		});
	});
	
	$(window).load(function() {//flexslider用の記述
  $('.flexslider').flexslider({
    animation: "slide"
  });
});
	
</script>

</head>

<body>
<header>
<h1><img src="img/logo.svg" alt="mame"></h1>
<h2>豆はカラダにイイ</h2>
<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><!--.menu-->
</header>

<div id="wrapper">
<div class="flexslider">
<ul class="slides">
<li><img src="img/bxslide1.png" alt="ryouri"></li>
<li><img src="img/bxslider2.png" alt="cofee"></li>
<li><img src="img/bxslide3.png" alt="natto"></li>
</ul>
</div><!--.flexslider-->
<div id="main">
<h3>枝豆の栄養素はスゴい</h3>

<p>枝豆は大豆が未成熟で収穫したものですが、たくさんの栄養がつまっています。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出する手伝いをしています。<p>
<h4>代表的な豆料理</h4>
<h5>枝豆</h5>
<img src="img/01.jpg" alt="edamame">

<p>枝豆は未成熟の大豆を収穫したもの。枝付きのままゆでたので「枝豆」と呼ばれるようになりました。塩ゆでして食べると非常に美味。しかし塩ゆでするときは沸騰した湯で茹でる。茹で上がった豆を冷水でさらしてはいけない。濃厚な風味がそこなわれることになる。</p>

<h5>ずんだ</h5>
<img src="img/02.jpg" alt="zunda">

<p>ゆでた枝豆をすり潰したもの。ずんだを餅にまぶしたものは「ずんだ餅」といって宮城県の特産品です。主に夏の時期に食べられます。非常に枝豆の風味が良いのが特徴です。</p>
</div><!--#main-->

<div id="sidebar">

<h5>枝豆隊隊長</h5>
<img src="img/03.jpg">

<p>枝豆隊隊長は、枝豆について知識をもち、新しい枝豆料理につねにチャレンジしています。</p>
</div><!--#sidebar-->
</div><!--#wrapper-->

<footer>
<p>2004-2012©枝豆隊</p>
</footer>

</body>
</html>


</body>
</html>
@charset "utf-8";
/* CSS Document */

html,body,h1,h2,h3,h4,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:center;
max-width:100%;}/*親要素に画像のサイズを自動的に合わせる*/

/*body*/

header{margin:0 auto;}

h1{margin-top:10px;}

h1,h2{text-align:center;
margin-bottom:20px;}

nav{
background:#600;
background:-webkit-linear-gradient(top,#600,#A6482D);
background:linear-gradient(to bottom,#600,#A6482D);/*グラデーション*/

margin-bottom:10px;
}

nav ul{width:960px;
 overflow:hidden;
margin:0 auto;
line-height:50px;}

nav ul li{float:left;
width:25%;
text-align:center;
box-sizing:border-box;
border-right:1px solid white;
}

.menu ul li:first-child{border-left:1px white solid;}


.menu ul li a{color:white;
display:block;
}
.menu ul li a:hover{background:#F30;
background:-webkit-linear-gradient(top,#f30,#CC3);
background:linear-gradient(to bottom,#f30,#CC3);}


/*#wrapper
*/
#wrapper{width:960px;
margin:0 auto;
overflow:hidden;}

#main{width:620px;
float:left;
padding:5px;}
#main img{margin-bottom:24px;
box-shadow:0 0 10px #000;}

#sidebar{width:320px;
 float:right;}
 
 #sidebar img{margin-bottom:24;
 box-shadow:0 0 10px #000;}
 
 h3,h4,p{margin-bottom:20px;}
 
 footer{line-height:50px;
 background:olive;}
 
 footer p{color:white;
 text-align:center;}
 
 @media screen and (max-width:959px){
   
  nav ul{width:100%;}
 
   
   #wrapper{width:100%;}
   
   #main{width:100%;
   float:none;}
   
   #sidebar{width:100%;
   float:none;}
   
   #main,#sidebar{width:98%;
   padding:0 1%;}/*余白を作るため*/
   
 }
 
 
 @media screen and (max-width:767px){
  
  /*スマホ用ナビボタン*/
  .box{width:44px;
  height:44px;
  background:url(../img/botton.png) no-repeat center center;
  float:right;}
  
 .menu{clear:both;/*※注意*/
 display:none;}
  
  
  .menu ul li{float:none;
text-align:center;
border-right:none;
width:100%;
box-sizing:border-box;
}

.menu li:nth-child(-n+3){border-bottom:1px solid #FFF;}


。。。。。。。。。。。。。。。。。。。。。。。。。。。。

SVG画像の作成

f:id:paris1204:20160405204259p:plain
イラストレーターのペンツールを使って、豆の画像を書く
①新規作成→配置→画像を選ぶ→テンプレートにチェックを入れて開く。
②描く
③描けた画像をドラッグしてオブジェクト→アートボード→選択オブジェクトに合わせる。
④別名保存→ファイルの種類→SVGを選ぶ→下の画像と同じ用に設定して保存する。
f:id:paris1204:20160405204632p:plain



※上手くペンツールを使えないときは、元画像を開く→ドラッグする→ライブトレース横の下矢印→トレースオプション→しきい値
調整しトレースボタンを押す。拡張を押す。保存方法は④と同じ