読者です 読者をやめる 読者になる 読者になる

授業内容(filter機能を使ったアニメーション(ニューストリッカー)、css3フィルターアニメーション(blur,sepia,saturateなど))

過去の授業内容を踏まえてニューストリッカー(テロップのようなもの)を作りました。
paris1204.hatenablog.com

css3フィルターアニメーション
obomemo.com



フィルターを使用するときはCan I use でブラウザーが対応しているか確認すること。
今回はchromeを使用したのでベンダープレフィックスの設定をしました。

ブラー

f:id:paris1204:20160628221848p:plain

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>filter機能を使ったアニメーション</title>
<style>
p{-webkit-filter:blur(10px);/*can i use でベンダープレフィックすが必要か確認する。
クロームには必要*/
filter:blur(10px);
animation-name:textBlur;/*アニメーションを動かすための名前*/
animation-duration:3s;/*アニメーションの長さ*/
animation-timing-function:linear;
animation-iteration-count:1;/*アニメーションを繰り返す回数*/
animation-fill-mode:forwards ;/*再生後、最後のキーフレームの状態を保持する。*/
}

@keyframes textBlur {
	
	0%{-webkit-filter:blur(10px);
	}

20%{-webkit-filter:blur(8px);}

40%{-webkit-filter:blur(6px);}

60%{-webkit-filter:blur(4px);}

80%{-webkit-filter:blur(2px);}
         
				 100%{-webkit-filter:blur(0);}
         
        
         }




</style>
</head>

<body>

<p><img src="img/typographie.png" alt="#"></p>
</body>
</html>


ニューストリッカー
f:id:paris1204:20160628222333p:plain

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ニューストリッカー</title>

<style>
@charset "UTF-8";
/* CSS Document *//*reset*/
html,body,ul,li{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
margin:0;
padding:0;
line-height:1.0;}

ul,li{list-style:none;}

a{text-decoration:none;}

#news{
	 background:rgba(0,0,0,0.9);
   animation-name:bgColor;/*アニメーションの名前(名前は何でも良い)*/
   animation-duration:10s;/*アニメーションの時間の長さ*/
   animation-iteration-count:infinite;}/*ループの数*/
   


#news{
	width:100%;/*文字の数によって可変*/
	height:30px;/*3行あるliを1行だけ表示させるため*/
	overflow:hidden;/*3行あるliを1行だけ表示させるため*/
	margin:100px auto 0;
	font-size:20px;
	text-align:center;	
	}
	
	#news li{height:24px;
	line-height:24px;
	padding:3px;
	color:white;
}
	.news-ticker{ animation:ticker 10s infinite;/*  アニメーションプロパティのショートハンド
       ①keyframesにつける名前
       ②アニメの時間
       ③ループの回数*/
		}
		
		@keyframes ticker {
         /*1行目*/
         0%{opacity:0;transform:translate(0,0);}/*Yがない場合の括弧はxとy*/
         10%{opacity:1;transform:translate(0,0);}/*※Yは必ず大文字で*/
         20%{opacity:1;transform:translate(0,0);}
         33%{opacity:0;transform:translate(-400px,0);}
         
         /*2行目*/
         34%{opacity:0;transform:translate(400px,-30px);}
         43%{opacity:1;transform:translate( 0,-30px);}
         53%{opacity:1;transform:translate(0,-30px);}
         65%{opacity:0;transform:translate(-400px,-30px);}
         /*3行目*/
          66%{opacity:0;transform:translate(400px,-60px);}
         76%{opacity:1;transform:translate(0,-60px);}
         86%{opacity:1;transform:translate(0,-60px);}
         98%{opacity:0;transform:translate(-400px,-60px);}
				 100%{opacity:0;transform:translate(0,0);}
         }


</style>
</head>

<body>
<div id="news">
<ul class="news-ticker">

<li>おはよう</li>
<li>こんにちは</li>
<li>こんばんは</li>

</ul>
</div>
</body>
</html>


以前作成したキリンサイトを模倣したサイトにニューストリッカーとフィルターアニメーションを導入

f:id:paris1204:20160628223023p:plain

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>キリンのサイトのように作る</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/slide.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/slide.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"><!--Fontawesome-->



<meta name="viewport" content="width=device-width"><!--スマホ用に作る時に必要-->
</head>

<body>


<header>
<ul class="nav">
<li><a class="a" href="#">商品情報</a></li>
<li><a class="b" href="#">キャンペーン</a></li>
<li><a class="c" href="#">エンタメ・レシピ</a></li>
<li><a class="d" href="#">CVS活動</a></li>
<li><a class="e" href="#">企業情報</a></li>
<li><a class="f" href="#">お客様相談</a></li>
</ul>

</header>
<div id="container">

<div class="wideslider">
<ul>
<li><a href="#1"><img src="img/slide_01.png" alt="" /></a></li>
<li><a href="#2"><img src="img/slide_02.png" alt="" /></a></li>
<li><a href="#3"><img src="img/slide_03.png" alt="" /></a></li>
<li><a href="#4"><img src="img/slide_04.png" alt="" /></a></li>

</ul>


</div><!--/.wideslider-->

<div id="news"><!--アニメーション-->
<ul class="news-ticker">
<li>CAFE DE LA PAIX</li>
<li>Le dome</li>
<li>CAFE DE FLEUR</li>
<li>LES DEUX MAGOTS</li>

</ul>
</div>



<ul class="sp_nav">
<li class="one"><a class="a" href="#">商品情報</a></li>
<li><a class="b" href="#">キャンペーン</a></li>
<li class="three"><a class="c" href="#">エンタメ・レシピ</a></li>
<li><a class="d" href="#">CVS活動</a></li>
<li class="four"><a class="e" href="#">企業情報</a></li>
<li><a class="f" href="#">お客様相談</a></li>
</ul>





<ul class="grid">


<li class="big"><a href="#"><img src="img/b_01.png"  alt="#"></a></li>
<li class="sp_01 midium"><a href="#"><img src="img/m_03_sp.png"  alt="#"></a></li>
<li class="midium aaa"><a href="#"><img src="img/m_01.png"  alt="#"></a></li>
<li class="small bbb"><a href="#"><img src="img/s_01.png" alt="#"></a></li>
<li class="small "><a href="#"><img src="img/s_02.png"  alt="#"></a></li>
<li class="midium ddd"><a href="#"><img src="img/m_02.png"  alt="#"></a></li>
<li class="small"><a href="#"><img src="img/s_03.png"  alt="#"></a></li>
<li class="small fff"><a href="#"><img src="img/s_04.png"  alt="#"></a></li>
<li class="small"><a href="#"><img src="img/s_05.png"  alt="#"></a></li>
<li class="small hhh"><a href="#"><img src="img/s_06.png"  alt="#"></a></li>
<li class="small iii"><a href="#"><img src="img/s_07.png"  alt="#"></a></li>
<li class="sp_02 small"><a href="#"><img src="img/s_08.png"  alt="#"></a></li>

</ul>

</div><!--#container-->

<footer>

<div class="inner_sp">

<div class="hako">
<p class="selected">商品情報<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></p>
<ul>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○</a></li>
<li><a href="#">○○○○</a></li>
</ul>
</div>


<div class="hako">
<p>キャンペーン<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></p>
<ul>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○○</a></li>
</ul>
</div>


<div class="hako">
<p>エンタメ・レシピ<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></p>
<ul>
<li><a href="#">○○○○</a></li>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○○○○○</a></li>
<li><a href="#">○○○○○○</a></li>
<li><a href="#">○○○○○</a></li>
<li><a href="#">○○○○</a></li>
</ul>
</div>

<div class="hako">
<p>CVS活動<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></p>
<ul>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○○○○○</a></li>
<li><a href="#">○○○○○○</a></li>
<li><a href="#">○○○○○○</a></li>
</ul>
</div>


<div class="hako">
<p>企業情報<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></p>
<ul>
<li><a href="#">○○○○○○○○</a></li>
<li><a href="#">○○○○○○○○</a></li>
<li><a href="#">○○○○</a></li>
<li><a href="#">○○○○</a></li>
</ul>

</div>


<div class="hako">
<p>お客様情報<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></p>
<ul>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○○○○○○○</a></li>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○○○○</a></li>
<li><a href="#">○○○○○○○○</a></li>
</ul>
</div>

</div>


<script>
$(function(){
	var w =$(window).width();//ブラウザの幅を取得
	var x = 767;//ブレークポイントを設定
	
  if(w <= x){
	$('.inner_sp ul').hide();
	$('p').on('click',function(){
		
		$('.selected').removeClass();
		$(this).addClass('selected')
		$('footer ul').slideUp('slow');
		$('+ul:not(:animated)',this).slideDown('slow');
		return false;



	});//クリックの閉じ
	};
	});//1つ目の$functionの閉じ
	
	

</script>

</footer>

</body>
</html>


/*reset*/
html,body,h1,h2,ul,li,div,header,footer,p{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
margin:0;
padding:0;
line-height:1.0;}

ul{list-style:none;}

a{text-decoration:none;}

img{vertical-align:bottom;}


body{font-size:16px;}

#container{background:#C1BABA;
margin:0 auto;
}

/*ナビゲーション設定*/
ul.nav{width:960px;
margin:30px auto 0;
overflow:hidden;
height:50px;
background:#FFFFFF;}

ul.sp_nav{display:none;}

ul.nav li{width:160px;
border-left:1px solid black;
box-sizing:border-box;
height:30px;
float:left;}

ul.nav li:last-child{border-right:1px solid black;
box-sizing:border-box;
}

ul.nav a.a {display:block;
line-height:30px;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
background:url(../img/css_sprite_pc.png) no-repeat 0 0;
}

ul.nav a.a:hover{background:url(../img/css_sprite_pc.png) no-repeat 0 0;
line-height:47px;
border-bottom:3px red solid;}



ul.nav a.b {display:block;
line-height:30px;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
background:url(../img/css_sprite_pc.png) no-repeat 0 -50px;
}

ul.nav a.b:hover{background:url(../img/css_sprite_pc.png) no-repeat 0 -50px;
line-height:47px;
border-bottom:3px blue solid;}



ul.nav a.c {display:block;
line-height:30px;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
background:url(../img/css_sprite_pc.png) no-repeat 0 -100px;
}

ul.nav a.c:hover{background:url(../img/css_sprite_pc.png) no-repeat 0 -100px;
line-height:47px;
border-bottom:3px yellow solid;}



ul.nav a.d {display:block;
line-height:30px;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
background:url(../img/css_sprite_pc.png) no-repeat 0 -150px;
}

ul.nav a.d:hover{background:url(../img/css_sprite_pc.png) no-repeat 0 -150px;
line-height:47px;
border-bottom:3px green solid;}


ul.nav a.e {display:block;
line-height:30px;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
background:url(../img/css_sprite_pc.png) no-repeat 0 -200px;
}

ul.nav a.e:hover{background:url(../img/css_sprite_pc.png) no-repeat 0 -200px;
line-height:47px;
border-bottom:3px aqua solid;}


ul.nav a.f {display:block;
line-height:30px;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
background:url(../img/css_sprite_pc.png) no-repeat 0 -250px;
}

ul.nav a.f:hover{background:url(../img/css_sprite_pc.png) no-repeat 0 -250px;
line-height:47px;
border-bottom:3px violet solid;}



#news{
	 background:rgba(0,0,0,1.0);
   }/*ループの数*/
   


#news{
	width:100%;/*文字の数によって可変*/
	height:30px;/*3行あるliを1行だけ表示させるため*/
	overflow:hidden;/*3行あるliを1行だけ表示させるため*/
	font-size:20px;
	text-align:center;	
	margin-bottom:30px;
	position:absolute;
	top:450px;
	z-index:1000;
	
	}
	
	#news li{height:24px;
	line-height:24px;
	padding:3px;
	color:white;
}
	.news-ticker{ animation:ticker 20s infinite;/*  アニメーションプロパティのショートハンド
       ①keyframesにつける名前
       ②アニメの時間
       ③ループの回数*/
		}
		
		@keyframes ticker {
         /*1行目*/
         0%{opacity:0;transform:translate(0,0);}/*Yがない場合の括弧はxとy*/
         10%{opacity:1;transform:translate(0,0);}/*※Yは必ず大文字で*/
         20%{opacity:1;transform:translate(0,0);}
         24%{opacity:0;transform:translate(-400px,0);}
         
         /*2行目*/
         25%{opacity:0;transform:translate(400px,-30px);}
         35%{opacity:1;transform:translate( 0,-30px);}
         45%{opacity:1;transform:translate(0,-30px);}
         49%{opacity:0;transform:translate(-400px,-30px);}
         /*3行目*/
          50%{opacity:0;transform:translate(400px,-60px);}
         60%{opacity:1;transform:translate(0,-60px);}
         70%{opacity:1;transform:translate(0,-60px);}
         74%{opacity:0;transform:translate(-400px,-60px);}
				 
				 
				 /*4行目*/
          75%{opacity:0;transform:translate(400px,-90px);}
         85%{opacity:1;transform:translate(0,-90px);}
         95%{opacity:1;transform:translate(0,-90px);}
         99%{opacity:0;transform:translate(-400px,-90px);}
				 100%{opacity:0;transform:translate(0,0);}
				 
         }










.sp_01,.sp_02{display:none;}





ul.grid{width:940px;
position:relative;
padding:10px;
overflow:hidden;
margin:0 auto;
background:rgba(0,0,0,0.8);
}

.grid li{float:left;
margin:10px;}

.ddd a:hover,.big a:hover{
-webkit-filter:sepia(100%);
animation-name:sepia;/*アニメーションを動かすための名前*/
animation-duration:3s;/*アニメーションの長さ*/
animation-timing-function:linear;
animation-iteration-count:1;/*アニメーションを繰り返す回数*/
animation-fill-mode:forwards ;/*再生後、最後のキーフレームの状態を保持する。*/

}

@keyframes sepia {
	
	0%{-webkit-filter:sepia(100%);
	}

20%{-webkit-filter:sepia(80%);}

40%{-webkit-filter:sepia(60%);}

60%{-webkit-filter:sepia(40%);}

80%{-webkit-filter:sepia(20%);}
         
				 100%{-webkit-filter:sepia(0);}
         
        
         }
				 
				 
				 .grid li a:hover{
-webkit-filter:saturate(100%);
animation-name:saturate;/*アニメーションを動かすための名前*/
animation-duration:3s;/*アニメーションの長さ*/
animation-timing-function:linear;
animation-iteration-count:1;/*アニメーションを繰り返す回数*/
animation-fill-mode:forwards ;/*再生後、最後のキーフレームの状態を保持する。*/

}

@keyframes saturate {
	
	0%{-webkit-filter:saturate(100%);
	}

20%{-webkit-filter:saturate(120%);}

40%{-webkit-filter:saturate(180%);}

60%{-webkit-filter:saturate(240%);}

80%{-webkit-filter:saturate(270%);}
         
				 100%{-webkit-filter:saturate(300%);}
         
        
         }
				 
				 
				 
				 				 .grid li.bbb a:hover{
-webkit-filter:invert(100%);
animation-name:invert;/*アニメーションを動かすための名前*/
animation-duration:3s;/*アニメーションの長さ*/
animation-timing-function:linear;
animation-iteration-count:1;/*アニメーションを繰り返す回数*/
animation-fill-mode:forwards ;/*再生後、最後のキーフレームの状態を保持する。*/

}

@keyframes invert {
	
	0%{-webkit-filter:invert(100%);
	}

20%{-webkit-filter:invert(80%);}

40%{-webkit-filter:invert(60%);;}

60%{-webkit-filter:invert(50%);;}

80%{-webkit-filter:invert(40%);;}
         
				 100%{-webkit-filter:invert(0);;}
         
        
         }
				 
				 
				  .grid li.ccc a:hover{
-webkit-filter:grayscale(100%);
animation-name:grayscale;/*アニメーションを動かすための名前*/
animation-duration:3s;/*アニメーションの長さ*/
animation-timing-function:linear;
animation-iteration-count:1;/*アニメーションを繰り返す回数*/
animation-fill-mode:forwards ;/*再生後、最後のキーフレームの状態を保持する。*/

}

@keyframes  grayscale {
	
	0%{-webkit-filter: grayscale(100%);
	}

20%{-webkit-filter: grayscale(80%);}

40%{-webkit-filter: grayscale(60%);}

60%{-webkit-filter: grayscale(40%);}

80%{-webkit-filter: grayscale(20%);}
         
				 100%{-webkit-filter: grayscale(0);}
         
        
         }
				 
				 
				 
				



.grid li.eee a:hover{
-webkit-filter: opacity(0.2);
animation-name: opacity;/*アニメーションを動かすための名前*/
animation-duration:3s;/*アニメーションの長さ*/
animation-timing-function:linear;
animation-iteration-count:1;/*アニメーションを繰り返す回数*/
animation-fill-mode:forwards ;/*再生後、最後のキーフレームの状態を保持する。*/

}

@keyframes   opacity {
	
	0%{-webkit-filter: opacity(0.2); 
	}

20%{-webkit-filter: opacity(0.5);}

40%{-webkit-filter:opacity(0.6);}

60%{-webkit-filter: opacity(0.7);}

80%{-webkit-filter: opacity(0.8);}
         
				 100%{-webkit-filter: opacity(1.0);
         
        }
}



.grid li.fff a:hover{
-webkit-filter: contrast(150%);
animation-name: contrast;/*アニメーションを動かすための名前*/
animation-duration:3s;/*アニメーションの長さ*/
animation-timing-function:linear;
animation-iteration-count:1;/*アニメーションを繰り返す回数*/
animation-fill-mode:forwards ;/*再生後、最後のキーフレームの状態を保持する。*/

}

@keyframes   contrast {
	
	0%{-webkit-filter: contrast(200%); 
	}

20%{-webkit-filter: contrast(180%);}

40%{-webkit-filter:contrast(160%);}

60%{-webkit-filter: contrast(140%);}

80%{-webkit-filter: contrast(120%);}
         
				 100%{-webkit-filter: contrast(100%);
         
        }
}

.grid li.ggg a:hover{
-webkit-filter: contrast(150%);
animation-name: blur;/*アニメーションを動かすための名前*/
animation-duration:3s;/*アニメーションの長さ*/
animation-timing-function:linear;
animation-iteration-count:1;/*アニメーションを繰り返す回数*/
animation-fill-mode:forwards ;/*再生後、最後のキーフレームの状態を保持する。*/

}

@keyframes   blur {
	
	0%{-webkit-filter:  blur(10px);;
	}

20%{-webkit-filter:  blur(7px);}

40%{-webkit-filter: blur(5px);}

60%{-webkit-filter:  blur(3px);}

80%{-webkit-filter:  blur(1px);}
         
				 100%{-webkit-filter:  blur(0px);
         
        }
}

























.big{width:356px;
}

.midium{width:356px;
}

.small{width:168px;
}



/*フッター*/
footer{height:200px;}

.inner_sp{width:960px;
display:block;
margin:0 auto;

}

div.hako{float:left;
width:160px;
}





@media screen and (max-width:959px){
	#container{width:100%;}
	
	/*ナビゲーション*/
ul.nav{width:100%;
}

ul.nav li{width:16.66%;
}



ul.nav a.a {
background:url(../img/css_sprite_tablet.png) no-repeat 0 0;
}

ul.nav a.a:hover{background:url(../img/css_sprite_tablet.png) no-repeat 0 0;
}



ul.nav a.b {display:block;
line-height:30px;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
background:url(../img/css_sprite_tablet.png) no-repeat 0 -50px;
}

ul.nav a.b:hover{background:url(../img/css_sprite_tablet.png) no-repeat 0 -50px;
line-height:47px;
border-bottom:3px blue solid;}



ul.nav a.c {
background:url(../img/css_sprite_tablet.png) no-repeat 0 -100px;
}

ul.nav a.c:hover{background:url(../img/css_sprite_tablet.png) no-repeat 0 -100px;
}



ul.nav a.d {
background:url(../img/css_sprite_tablet.png) no-repeat 0 -150px;
}

ul.nav a.d:hover{background:url(../img/css_sprite_tablet.png) no-repeat 0 -150px;
}


ul.nav a.e {
background:url(../img/css_sprite_tablet.png) no-repeat 0 -200px;
}

ul.nav a.e:hover{background:url(../img/css_sprite_tablet.png) no-repeat 0 -200px;
}


ul.nav a.f {
background:url(../img/css_sprite_tablet.png) no-repeat 0 -250px;
}

ul.nav a.f:hover{background:url(../img/css_sprite_tablet.png) no-repeat 0 -250px;
}
	
	
	
	
		
img{max-width:100%;}/*imgを拡大・縮小させる時は必須*/
.sp_01,.sp_02{display:none;}

ul.grid{width:98%;/*940/960*/
padding:1%;/*10/940*/
}

.grid li{
margin:1%;/*10/940*/
}

.big{width:37.6%;/*356/940*/
}

.midium{width:37.87%;
}

.small{width:17.87%;
}
	

/*フッター*/

.inner_sp{width:100%;
display:block;
margin:0 auto;

}

div.hako{float:none;
width:100%;
}

	}
	
	
	
	@media screen and (max-width:767px){
		
		/*ナビゲーション*/
		ul.sp_nav{display:block;
		width:100%;
		}
		
		ul.nav{display:none;
		}
		
		ul.sp_nav li{width:50%;
		background:white;
		border-bottom:1px solid #333333;
		height:50px;
		line-height:30px;
		float:left;
		box-sizing:border-box;}
		
		ul.sp_nav li a{
		display:block;
		border-left:3px solid red;
		margin:10px 0 0 20px;
		padding-left:5px;}
		
		.one,.three,.four{border-right:1px solid #333333;
		height:50px;}
		
		ul.sp_nav li a.a:hover{border-left:3px solid red;}
		
		ul.sp_nav li a.b:hover{border-left:3px solid blue;}
		
		ul.sp_nav li a.c:hover{border-left:3px solid yellow;}
		
		ul.sp_nav li a.d:hover{border-left:3px solid green;}
		
		ul.sp_nav li a.e:hover{border-left:3px solid aqua;}
		
		ul.sp_nav li a.f:hover{border-left:3px solid violet;}
		
		
	
		
		
		
		/*2カラムに設定する*/
		
			
.sp_01,.sp_02{display:block;}


.big{display:none;}

img{max-width:100%;}/*imgを拡大・縮小させる時は必須*/


ul.grid{width:98%;/*940/960*/
padding:1%;/*10/940*/
}

.grid li{
margin:1%;/*10/940*/
}

.big{width:98%;
}

.midium{width:98%;
}

.small{width:48%;/*168/940*/
}
img{width:100%;}/*今回は画像の大きさが小さいので画像をliの大きさに引伸ばす*/
	

/*フッター*/


footer{height:200px;}



footer .inner_sp p{background:#D4C8C8;
border-bottom:1px solid black;
text-align:center;
line-height:50px;}

footer .inner_sp ul{float:none;
text-align:center;
width:100%;
}



footer .inner_sp ul li{
line-height:50px;
background:#E3DEDE;
border-bottom:1px solid black;
}

footer .inner_sp p{position:relative;
font-size:16px;}

footer .inner_sp p i{position:absolute;
padding-top:17px;
right:5%;}








		
		
	}