授業内容（コンテンツスライド、CSSスプライト）
指定したグリッドの計算を自動でしてくれるツール
www.kenjisugimoto.com
http://yachin29.hatenablog.com/entry/2015/02/04/003131yachin29.hatenablog.com
PC
black-flag.net
このサイトの記述と同じようにしてslide.jsとslide.cssに分けて保存しリンク付する
index.html
<!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> <meta name="viewport" content="width=device-width"><!--スマホ用に作る時に必要--> </head> <body> <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="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> </body> </html>
style.css
/*reset*/ html,body,h1,h2,ul,li,div{font-family:"Hiragino Kaku Gothic proN", Meiryo, sans-serif; margin:0; padding:0; line-height:0;} ul{list-style:none;} a{text-decoration:none;} img{vertical-align:bottom;} body{font-size:16px;} #container{ margin:0 auto; } .sp_01,.sp_02{display:none;} ul.grid{width:940px; padding:10px; overflow:hidden; margin:0 auto; } .grid li{float:left; margin:10px; } .big{width:356px; } .midium{width:356px; } .small{width:168px; } @media screen and (max-width:959px){ #container{width:100%;} 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%; } } @media screen and (max-width:767px){/*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の大きさに引伸ばす*/ }
slide.js
$(function(){ $setElm = $('.wideslider'); baseWidth = 960;//幅指定 baseHeight = 400;//高さ指定 minWidth = 320; slideSpeed = 700; delayTime = 5000; easing = 'linear'; autoPlay = '1'; // notAutoPlay = '0' flickMove = '1'; // notFlick = '0' btnOpacity = 0.5; pnOpacity = 0.5; ua = navigator.userAgent; $(window).load(function(){ $setElm.find('img').css({display:'block'}); $setElm.each(function(){ var targetObj = $(this), wsSetTimer; targetObj.children('ul').wrapAll('<div class="wideslider_base"><div class="wideslider_wrap"></div><div class="slider_prev"></div><div class="slider_next"></div></div>'); var findBase = targetObj.find('.wideslider_base'), findWrap = targetObj.find('.wideslider_wrap'), findPrev = targetObj.find('.slider_prev'), findNext = targetObj.find('.slider_next'); var pagination = $('<div class="pagination"></div>'); targetObj.append(pagination); var baseList = findWrap.find('li'), baseListLink = findWrap.find('li').children('a'), baseListCount = findWrap.find('li').length; baseList.each(function(i){ $(this).css({width:(baseWidth),height:(baseHeight)}); pagination.append('<a href="javascript:void(0);" class="pn'+(i+1)+'"></a>'); }); var findPagi = targetObj.find('.pagination'); setSlide(); function setSlide(){ windowWidth = $(window).width(); findList = findWrap.find('li'); setParts = (findBase,findWrap,findPrev,findNext,$setElm); setWrapLeft = parseInt(findWrap.css('left')); setlistWidth = findList.find('img').width(); setLeft = setWrapLeft / setlistWidth; if(windowWidth < baseWidth){ if(windowWidth > minWidth){ findList.css({width:(windowWidth)}); var reImgHeight = findList.find('img').height(); findList.css({height:(reImgHeight)}); setParts.css({height:(reImgHeight)}); } else if(windowWidth <= minWidth){ findList.css({width:(minWidth)}); var reImgHeight = findList.find('img').height(); findList.css({height:(reImgHeight)}); setParts.css({height:(reImgHeight)}); } } else if(windowWidth >= baseWidth){ findList.css({width:(baseWidth),height:(baseHeight)}); setParts.css({height:(baseHeight)}); } setWidth = findList.find('img').width(); setHeight = findList.find('img').height(); baseWrapWidth = (setWidth)*(baseListCount); ulCount = findWrap.find('ul').length; if(ulCount == 1){ var makeClone = findWrap.children('ul'); makeClone.clone().prependTo(findWrap); makeClone.clone().appendTo(findWrap); findWrap.children('ul').eq('1').addClass('mainList'); var mainList = findWrap.find('.mainList').children('li'); mainList.eq('0').addClass('mainActive') allListCount = findWrap.find('li').length; } allLWrapWidth = (setWidth)*(allListCount), posAdjust = ((windowWidth)-(setWidth))/2; findBase.css({left:(posAdjust),width:(setWidth),height:(setHeight)}); findPrev.css({left:-(posAdjust),width:(posAdjust),height:(setHeight),opacity:(btnOpacity)}); findNext.css({right:-(posAdjust),width:(posAdjust),height:(setHeight),opacity:(btnOpacity)}); findWrap.css({width:(allLWrapWidth),height:(setHeight)}); findWrap.children('ul').css({width:(baseWrapWidth),height:(setHeight)}); posResetNext = -(baseWrapWidth)*2, posResetPrev = -(baseWrapWidth)+(setWidth); adjLeft = setWidth * setLeft; findWrap.css({left:(adjLeft)}); } findWrap.css({left:-(baseWrapWidth)}); var pnPoint = pagination.children('a'), pnFirst = pagination.children('a:first'), pnLast = pagination.children('a:last'), pnCount = pagination.children('a').length; if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1){ pnPoint.css({opacity:(pnOpacity)}); } else { pnPoint.css({opacity:(pnOpacity)}).hover(function(){ $(this).stop().animate({opacity:'1'},300); }, function(){ $(this).stop().animate({opacity:(pnOpacity)},300); }); } pnFirst.addClass('active'); pnPoint.click(function(){ if(autoPlay == '1'){clearInterval(wsSetTimer);} var setNum = pnPoint.index(this), moveLeft = ((setWidth)*(setNum))+baseWrapWidth; findWrap.stop().animate({left: -(moveLeft)},slideSpeed,easing); pnPoint.removeClass('active'); $(this).addClass('active'); activePos(); if(autoPlay == '1'){wsTimer();} }); if(autoPlay == '1'){wsTimer();} function wsTimer(){ wsSetTimer = setInterval(function(){ findNext.click(); },delayTime); } findNext.click(function(){ findWrap.not(':animated').each(function(){ if(autoPlay == '1'){clearInterval(wsSetTimer);} var posLeft = parseInt($(findWrap).css('left')), moveLeft = ((posLeft)-(setWidth)); findWrap.stop().animate({left:(moveLeft)},slideSpeed,easing,function(){ var adjustLeft = parseInt($(findWrap).css('left')); if(adjustLeft <= posResetNext){ findWrap.css({left: -(baseWrapWidth)}); } }); var pnPointActive = pagination.children('a.active'); pnPointActive.each(function(){ var pnIndex = pnPoint.index(this), listCount = pnIndex+1; if(pnCount == listCount){ pnPointActive.removeClass('active'); pnFirst.addClass('active'); } else { pnPointActive.removeClass('active').next().addClass('active'); } }); activePos(); if(autoPlay == '1'){wsTimer();} }); }).hover(function(){ $(this).stop().animate({opacity:((btnOpacity)+0.1)},100); }, function(){ $(this).stop().animate({opacity:(btnOpacity)},100); }); findPrev.click(function(){ findWrap.not(':animated').each(function(){ if(autoPlay == '1'){clearInterval(wsSetTimer);} var posLeft = parseInt($(findWrap).css('left')), moveLeft = ((posLeft)+(setWidth)); findWrap.stop().animate({left:(moveLeft)},slideSpeed,easing,function(){ var adjustLeft = parseInt($(findWrap).css('left')), adjustLeftPrev = (posResetNext)+(setWidth); if(adjustLeft >= posResetPrev){ findWrap.css({left: (adjustLeftPrev)}); } }); var pnPointActive = pagination.children('a.active'); pnPointActive.each(function(){ var pnIndex = pnPoint.index(this), listCount = pnIndex+1; if(1 == listCount){ pnPointActive.removeClass('active'); pnLast.addClass('active'); } else { pnPointActive.removeClass('active').prev().addClass('active'); } }); activePos(); if(autoPlay == '1'){wsTimer();} }); }).hover(function(){ $(this).stop().animate({opacity:((btnOpacity)+0.1)},100); }, function(){ $(this).stop().animate({opacity:(btnOpacity)},100); }); function activePos(){ var posActive = findPagi.find('a.active'); posActive.each(function(){ var posIndex = pnPoint.index(this), setMainList = findWrap.find('.mainList').children('li'); setMainList.removeClass('mainActive').eq(posIndex).addClass('mainActive'); }); } $(window).on('resize',function(){ if(autoPlay == '1'){clearInterval(wsSetTimer);} setSlide(); if(autoPlay == '1'){wsTimer();} }).resize(); if(flickMove == '1'){ var isTouch = ('ontouchstart' in window); findWrap.on( {'touchstart mousedown': function(e){ if(findWrap.is(':animated')){ e.preventDefault(); } else { if(autoPlay == '1'){clearInterval(wsSetTimer);} if(!(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1)){ e.preventDefault(); } this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX); this.leftBegin = parseInt($(this).css('left')); this.left = parseInt($(this).css('left')); this.touched = true; } },'touchmove mousemove': function(e){ if(!this.touched){return;} e.preventDefault(); this.left = this.left - (this.pageX - (isTouch ? event.changedTouches[0].pageX : e.pageX) ); this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX); $(this).css({left:this.left}); },'touchend mouseup mouseout': function(e){ if (!this.touched) {return;} this.touched = false; var setThumbLiActive = pagination.children('a.active'), listWidth = parseInt(baseList.css('width')),leftMax = -((listWidth)*((baseListCount)-1)); if(((this.leftBegin)-30) > this.left && (!((this.leftBegin) === (leftMax)))){ $(this).stop().animate({left:((this.leftBegin)-(listWidth))},slideSpeed,easing,function(){ var adjustLeft = parseInt($(findWrap).css('left')); if(adjustLeft <= posResetNext){ findWrap.css({left: -(baseWrapWidth)}); } }); setThumbLiActive.each(function(){ var pnIndex = pnPoint.index(this), listCount = pnIndex+1; if(pnCount == listCount){ setThumbLiActive.removeClass('active'); pnFirst.addClass('active'); } else { setThumbLiActive.removeClass('active').next().addClass('active'); } }); activePos(); } else if(((this.leftBegin)+30) < this.left && (!((this.leftBegin) === 0))){ $(this).stop().animate({left:((this.leftBegin)+(listWidth))},slideSpeed,easing,function(){ var adjustLeft = parseInt($(findWrap).css('left')), adjustLeftPrev = (posResetNext)+(setWidth); if(adjustLeft >= posResetPrev){ findWrap.css({left: (adjustLeftPrev)}); } }); setThumbLiActive.each(function(){ var pnIndex = pnPoint.index(this), listCount = pnIndex+1; if(1 == listCount){ setThumbLiActive.removeClass('active'); pnLast.addClass('active'); } else { setThumbLiActive.removeClass('active').prev().addClass('active'); } }); activePos(); } else { $(this).stop().animate({left:(this.leftBegin)},slideSpeed,easing); } compBeginLeft = this.leftBegin; compThisLeft = this.left; baseListLink.click(function(e){ if(!(compBeginLeft == compThisLeft)){ e.preventDefault(); } }); if(autoPlay == '1'){wsTimer();} } }); } setTimeout(function(){setSlide();},500); }); }); });
slide.css
.wideslider { width: 100%; text-align: left; position: relative; overflow: hidden; } .wideslider ul, .wideslider ul li { float: left; display: inline; overflow: hidden; } .wideslider ul li img { width: 100%; display: none; } .wideslider_base { top: 0; position: absolute; } .wideslider_wrap { top: 0; position: absolute; overflow: hidden; } .slider_prev, .slider_next { top: 0; overflow: hidden; position: absolute; z-index: 100; cursor: pointer; } .slider_prev {background: #fff url(../img/prev.jpg) no-repeat right center;} .slider_next {background: #fff url(../img/next.jpg) no-repeat left center;} .pagination { bottom: 10px; left: 0; width: 100%; height: 15px; text-align: center; position: absolute; z-index: 200; } .pagination a { margin: 0 5px; width: 15px; height: 15px; display: inline-block; overflow: hidden; background: #333; } .pagination a.active { filter:alpha(opacity=100)!important; -moz-opacity: 1!important; opacity: 1!important; } /* ======================================= ClearFixElements ======================================= */ .wideslider ul:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; } .wideslider ul { display: inline-block; overflow: hidden; }
CSSスプライト
CSSスプライトとは、複数の画像をひとつにまとめて、CSSでポジションを指定することにより表示させるCSSの技のひとつです
