6月21日 授業内容(CSSスプライト用画像をフォトショップで作成しPC,タブレット、スマホ用にレイアウト(jsでスマホの時のみアコーディオンになる設定))

CSSスプライト用画像をフォトショップで作成(作成途中)
今回はPC用は幅960px,高さ300px タブレットは幅128px(タブレットの最小単位768pxの6分割),高さ300pxで画像を作成する。
スマホは画像ではなくcssで指定する。

完成形
f:id:paris1204:20160622172434p:plain


①PC用サイズで新規作成し、新規レイヤーを作成し白に塗りつぶす。

②表示→新規ガイドで水平方向50,100,150,200,250pxの間隔で作る
文字枠として水平方向で30,80,130,180,230,280の間隔で新規ガイドを作る


③次に文字ツールで個別ページの名前を入力する。
長方形選択ツールで30pxのガイドを作成した範囲を囲みアートボードツールをクリックして位置を中心に調整する。
文字の位置は中央に設定しておくこと。


④新規レイヤーを作成し、多角形ツールで以下の指定で三角形を作り、水平方向に向きを合わせる。
色をつける。
※使用するccによって三角形の大きさが変わるので適宜変更してください。



f:id:paris1204:20160622174347p:plain

⑤文字、三角形のレイヤーをグループ化して5つぶんコピーを作成して名前をわかるように変更する。
f:id:paris1204:20160622175016p:plain

⑥それぞれのグループ科したコピーを選んでshift + 下矢印で初めに引いた50px間隔のガイドに配置する。

⑦グループごとのレイヤーを開いて文字と色の変更をする。
PC用はこれで完成。Web用に保存する

タブレット用はPC用を使用します。
下記の設定をし、幅に合うようにそれぞれの文字の大きさを調整します。
f:id:paris1204:20160622175330p:plain


これでタブレット用は完成。Web用に保存する。




PC,タブレットスマホ用にレイアウト

PC
f:id:paris1204:20160622155232p:plain




f:id:paris1204:20160622155252p:plain


スマホ


f:id:paris1204:20160622155304p:plain



f:id:paris1204:20160622155318p:plain


PCサイズのulをスマホの時にアコーディオンにする方法
yachin29.hatenablog.com



<!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-->

<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"><a href="#"><img src="img/m_01.png"  alt="#"></a></li>
<li class="small"><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"><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"><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"><a href="#"><img src="img/s_06.png"  alt="#"></a></li>
<li class="small"><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;}



.sp_01,.sp_02{display:none;}

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

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

.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%;}








		
		
	}