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

授業内容(コンテンツスライド、CSSスプライト)

指定したグリッドの計算を自動でしてくれるツール
www.kenjisugimoto.com



http://yachin29.hatenablog.com/entry/2015/02/04/003131yachin29.hatenablog.com


PC
f:id:paris1204:20160616205328p:plain

タブレット
f:id:paris1204:20160616205355p:plain

スマホ
f:id:paris1204:20160616205413p:plain


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の技のひとつです

yachin29.hatenablog.com