Skip to main content
コードのインデント修正、スニペット化
ソース リンク
unarist
  • 1.5万
  • 5
  • 36
  • 78
body,td,th{font-family: "Noto Sans CJK JP Light", "Noto Sans CJK JP Black", "Noto Sans CJK JP Bold", "Noto Sans CJK JP DemiLight", "Noto Sans CJK JP Medium", "Noto Sans CJK JP Regular", "Noto Sans CJK JP Thin";}h1,h2,h3,h4,h5,h6{font-family: "Noto Sans CJK JP Light", "Noto Sans CJK JP Black", "Noto Sans CJK JP Bold", "Noto Sans CJK JP DemiLight", "Noto Sans CJK JP Medium", "Noto Sans CJK JP Regular", "Noto Sans CJK JP Thin";}.img_box{position:relative;display:block;margin:0;padding:0;}.img_box img{z-index:0;margin:0;padding:0;}.img_box a{color:white;font-size:70px;}.img_comment2{font-size:70px;font-family: 'Oswald', sans-serif;font-weight:300;position:absolute;bottom:150px;left:0px;z-index:1;text-align:left;padding:10px;margin:0;text-shadow:3px 3px 3px #000;}.pages{display:block;float:left;position:relative;}.comments{font-size:70px;font-family: 'Oswald', sans-serif;font-weight:300;color:white;position:absolute;bottom:150px;left:150px;z-index:1;text-align:center;padding:10px;margin:0;text-shadow:3px 3px 3px #000;}.japanese-font{font-family:"Noto Sans";font-size:18px;font-weight:bold;color:white;position:absolute;bottom:100px;left:150px;z-index:1;text-align:center;padding:10px;margin:0;text-shadow:3px 3px 3px #000;}body{}/*.gridContainer{width: 88.5%;max-width: 1300px;padding-top:50px;padding-left: 0.75%;padding-right: 0.75%;margin: auto;clear: none;float: none;margin-left: auto;}*/#pc-wrapper{display:block;width:1300px;height:1800px;margin:0 auto;}#pc-wrapper p{margin:0;}#pc-wrapper img{display:block;}#pc-header-box{display:block;position:relative;width:1300px;height:800px;margin:0 auto;vertical-align:bottom;}.pc-header-title{display:inline-block;position:absolute;font-size:60px;}#pc-logo-box{display:block;position:relative;width:1300px;height:200px;margin:0 auto;}#pc-logo-box img{display:block;position:relative;top:50px;margin:0 auto;}#pc-page-box1{display:block;position:relative;width:650px;height:430px;float:left;overflow:hidden;}#pc-page-box2{display:block;position:relative;width:650px;height:430px;float:left;overflow:hidden;}#pc-page-box3{display:block;position:relative;width:650px;height:430px;float:left;overflow:hidden;}#pc-page-box4{display:block;position:relative;width:650px;height:430px;float:left;overflow:hidden;}#pc-page-box5{display:block;position:relative;width:650px;height:430px;float:left;overflow:hidden;}.black-sheet{display: block;position: absolute;width: 650px;height: 430px;background: rgba(0,0,0,0.8);z-index: 1;}.pc-page-title{display:block;position:absolute;font-size:30px;color:rgba(255,255,255,1);z-index:2;}.pc-page-title-japanese{display:block;position:absolute;top:30px;font-size:24px;color:rgba(255,255,255,1);z-index:3;}#we-are-infobox{display:block;position:absolute;left:-300px;width:300px;height:300px;background:rgba(51,153,204,1);opacity:1;z-index:5;}#info-infobox{display:block;float:right;position:absolute;right:-300px;width:300px;height:300px;background:rgba(51,153,204,1);opacity:1;z-index:5;}#price-infobox{display:block;position:absolute;left:-300px;width:300px;height:300px;background:rgba(51,153,204,1);opacity:1;z-index:5;}#blog-infobox{display:block;float:right;position:absolute;right:-300px;width:300px;height:300px;background:rgba(51,153,204,1);opacity:1;z-index:5;}#contact-us-infobox{display:block;position:absolute;left:-300px;width:300px;height:300px;background:rgba(51,153,204,1);opacity:1;z-index:5;}$(function(){var duration=300;var duration2=500;$("#pc-page-box1").on("mouseover",function(){$(this).find(".black-sheet").stop(true).animate({opacity:0.6},duration);});$("#pc-page-box1").on("mouseout",function(){$(this).find(".black-sheet").stop(true).animate({opacity:1},duration);});$("#pc-page-box2").on("mouseover",function(){$(this).find(".black-sheet").stop(true).animate({opacity:0.6},duration);});$("#pc-page-box2").on("mouseout",function(){$(this).find(".black-sheet").stop(true).animate({opacity:1},duration);});$("#pc-page-box3").on("mouseover",function(){$(this).find(".black-sheet").stop(true).animate({opacity:0.6},duration);});$("#pc-page-box3").on("mouseout",function(){$(this).find(".black-sheet").stop(true).animate({opacity:1},duration);});$("#pc-page-box4").on("mouseover",function(){$(this).find(".black-sheet").stop(true).animate({opacity:0.6},duration);});$("#pc-page-box4").on("mouseout",function(){$(this).find(".black-sheet").stop(true).animate({opacity:1},duration);});$("#pc-page-box5").on("mouseover",function(){$(this).find(".black-sheet").stop(true).animate({opacity:0.6},duration);});$("#pc-page-box5").on("mouseout",function(){$(this).find(".black-sheet").stop(true).animate({opacity:1},duration);});});$(function(){var duration=300;$(document).on('click', '.leftBoxParent', function(){$(this).parent('div').find('.leftBox').stop(true).animate({left:-300}, duration);$(this).find('.leftBox').stop(true).animate({left:300}, duration);});});$(function(){var duration=300;$(document).on('click', '.rightBoxParent', function(){$(this).parent('div').find('.rightBox').stop(true).animate({right:-300}, duration);$(this).find('.rightBox').stop(true).animate({right:300}, duration);});});

Welcome to our website"

We Are私たちについて

Info お知らせ

Priceプライス

Blogブログ

Contact Us メール

$(function(){
    var duration=300;
    var duration2=500;

    $("#pc-page-box1").on("mouseover",function(){
        $(this).find(".black-sheet").stop(true).animate({
            opacity:0.6},
            duration);
    });
    $("#pc-page-box1").on("mouseout",function(){
        $(this).find(".black-sheet").stop(true).animate({
            opacity:1},
            duration);
    });

    $("#pc-page-box2").on("mouseover",function(){
        $(this).find(".black-sheet").stop(true).animate({
            opacity:0.6},
            duration);
    });
    $("#pc-page-box2").on("mouseout",function(){
        $(this).find(".black-sheet").stop(true).animate({
            opacity:1},
            duration);
    });

    $("#pc-page-box3").on("mouseover",function(){
        $(this).find(".black-sheet").stop(true).animate({
            opacity:0.6},
            duration);
    });
    $("#pc-page-box3").on("mouseout",function(){
        $(this).find(".black-sheet").stop(true).animate({
            opacity:1},
            duration);
    });

    $("#pc-page-box4").on("mouseover",function(){
        $(this).find(".black-sheet").stop(true).animate({
            opacity:0.6},
            duration);
    });
    $("#pc-page-box4").on("mouseout",function(){
        $(this).find(".black-sheet").stop(true).animate({
            opacity:1},
            duration);
    });

    $("#pc-page-box5").on("mouseover",function(){
        $(this).find(".black-sheet").stop(true).animate({
            opacity:0.6},
            duration);
    });
    $("#pc-page-box5").on("mouseout",function(){
        $(this).find(".black-sheet").stop(true).animate({
            opacity:1},
            duration);
    });
});

$(function(){
    var duration=300;
    $(document).on('click', '.leftBoxParent', function(){
        $(this).parent('div').find('.leftBox').stop(true).animate({left:-300}, duration);
        $(this).find('.leftBox').stop(true).animate({left:300}, duration);
    });
});

$(function(){
    var duration=300;
    $(document).on('click', '.rightBoxParent', function(){
        $(this).parent('div').find('.rightBox').stop(true).animate({right:-300}, duration);
        $(this).find('.rightBox').stop(true).animate({right:300}, duration);
    });
});
body,td,th {
    font-family: "Noto Sans CJK JP Light", "Noto Sans CJK JP Black", "Noto Sans CJK JP Bold", "Noto Sans CJK JP DemiLight", "Noto Sans CJK JP Medium", "Noto Sans CJK JP Regular", "Noto Sans CJK JP Thin";
}
h1,h2,h3,h4,h5,h6 {
    font-family: "Noto Sans CJK JP Light", "Noto Sans CJK JP Black", "Noto Sans CJK JP Bold", "Noto Sans CJK JP DemiLight", "Noto Sans CJK JP Medium", "Noto Sans CJK JP Regular", "Noto Sans CJK JP Thin";
}
.img_box {
    position:relative;
    display:block;
    margin:0;
    padding:0;
}
.img_box img {
    z-index:0;
    margin:0;
    padding:0;
}
.img_box a {
    color:white;
    font-size:70px;
}

.img_comment2 {
    font-size:70px;
    font-family: 'Oswald', sans-serif;
    font-weight:300;
    position:absolute;
    bottom:150px;
    left:0px;
    z-index:1;
    text-align:left;
    padding:10px;
    margin:0;
    text-shadow:3px 3px 3px #000;
}

.pages{
    display:block;
    float:left;
    position:relative;
}
.comments{
    font-size:70px;
    font-family: 'Oswald', sans-serif;
    font-weight:300;
    color:white;
    position:absolute;
    bottom:150px;
    left:150px;
    z-index:1;
    text-align:center;
    padding:10px;
    margin:0;
    text-shadow:3px 3px 3px #000;
}
.japanese-font{
    font-family:"Noto Sans";
    font-size:18px;
    font-weight:bold;
    color:white;
    position:absolute;
    bottom:100px;
    left:150px;
    z-index:1;
    text-align:center;
    padding:10px;
    margin:0;
    text-shadow:3px 3px 3px #000;
}

body{

}

/*.gridContainer {
width: 88.5%;
max-width: 1300px;
padding-top:50px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}*/

#pc-wrapper{
    display:block;
    width:1300px;
    height:1800px;
    margin:0 auto;
}
#pc-wrapper p{
    margin:0;
}
#pc-wrapper img{
    display:block;
}
#pc-header-box{
    display:block;
    position:relative;
    width:1300px;
    height:800px;
    margin:0 auto;
    vertical-align:bottom;
}
.pc-header-title{
    display:inline-block;
    position:absolute;
    font-size:60px;
}

#pc-logo-box{
    display:block;
    position:relative;
    width:1300px;
    height:200px;
    margin:0 auto;
}
#pc-logo-box img{
    display:block;
    position:relative;
    top:50px;
    margin:0 auto;
}

#pc-page-box1{
    display:block;
    position:relative;
    width:650px;
    height:430px;
    float:left;
    overflow:hidden;
}
#pc-page-box2{
    display:block;
    position:relative;
    width:650px;
    height:430px;
    float:left;
    overflow:hidden;
}

#pc-page-box3{
    display:block;
    position:relative;
    width:650px;
    height:430px;
    float:left;
    overflow:hidden;
}
#pc-page-box4{
    display:block;
    position:relative;
    width:650px;
    height:430px;
    float:left;
    overflow:hidden;
}
#pc-page-box5{
    display:block;
    position:relative;
    width:650px;
    height:430px;
    float:left;
    overflow:hidden;
}

.black-sheet{
    display: block;
    position: absolute;
    width: 650px;
    height: 430px;
    background: rgba(0,0,0,0.8);
    z-index: 1;
}
.pc-page-title{
    display:block;
    position:absolute;
    font-size:30px;
    color:rgba(255,255,255,1);
    z-index:2;
}
.pc-page-title-japanese{
    display:block;
    position:absolute;
    top:30px;
    font-size:24px;
    color:rgba(255,255,255,1);
    z-index:3;
}
#we-are-infobox{
    display:block;
    position:absolute;
    left:-300px;
    width:300px;
    height:300px;
    background:rgba(51,153,204,1);
    opacity:1;
    z-index:5;
}
#info-infobox{
    display:block;
    float:right;
    position:absolute;
    right:-300px;
    width:300px;
    height:300px;
    background:rgba(51,153,204,1);
    opacity:1;
    z-index:5;
}
#price-infobox{
    display:block;
    position:absolute;
    left:-300px;
    width:300px;
    height:300px;
    background:rgba(51,153,204,1);
    opacity:1;
    z-index:5;
}
#blog-infobox{
    display:block;
    float:right;
    position:absolute;
    right:-300px;
    width:300px;
    height:300px;
    background:rgba(51,153,204,1);
    opacity:1;
    z-index:5;
}
#contact-us-infobox{
    display:block;
    position:absolute;
    left:-300px;
    width:300px;
    height:300px;
    background:rgba(51,153,204,1);
    opacity:1;
    z-index:5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gridContainer">
    <div id="pc-wrapper">
        <div id="pc-header-box">
            <p><div class="pc-header-title">Welcome to our website"</div>
            </p>
        </div>

        <div id="pc-logo-box">
        </div>

        <div id="pc-page-box1" class="leftBoxParent">
            <p>
            <div class="pc-page-title">We Are</div><div class="pc-page-title-japanese">私たちについて</div>
            <div id="we-are-infobox" class="leftBox"></div>
            <div class="black-sheet"></div>
            </p>
        </div>

        <div id="pc-page-box2" class="rightBoxParent">
            <p><div class="pc-page-title" >Info</div>
            <div class="pc-page-title-japanese">お知らせ</div>
            <div id="info-infobox" class="rightBox"></div>
            <div class="black-sheet"></div>
            </p>
        </div>

        <div id="pc-page-box3" class="leftBoxParent">
            <p><div class="pc-page-title">Price</div><div class="pc-page-title-japanese">プライス</div>
            <div id="price-infobox" class="leftBox"></div><div class="black-sheet"></div>
            </p>
        </div>

        <div id="pc-page-box4" class="rightBoxParent">
            <p><div class="pc-page-title">Blog</div><div class="pc-page-title-japanese">ブログ</div>
            <div id="blog-infobox" class="rightBox"></div>
            <div class="black-sheet"></div>
            </p>
        </div>

        <div id="pc-page-box5" class="leftBoxParent">
            <p><div class="pc-page-title">Contact Us</div>
            <div class="pc-page-title-japanese">メール</div>
            <div id="we-are-infobox" class="leftBox">
            </div><div class="black-sheet"></div>
            </p>
        </div>
    </div>
</div><!--end gridContainer-->

body,td,th{font-family: "Noto Sans CJK JP Light", "Noto Sans CJK JP Black", "Noto Sans CJK JP Bold", "Noto Sans CJK JP DemiLight", "Noto Sans CJK JP Medium", "Noto Sans CJK JP Regular", "Noto Sans CJK JP Thin";}h1,h2,h3,h4,h5,h6{font-family: "Noto Sans CJK JP Light", "Noto Sans CJK JP Black", "Noto Sans CJK JP Bold", "Noto Sans CJK JP DemiLight", "Noto Sans CJK JP Medium", "Noto Sans CJK JP Regular", "Noto Sans CJK JP Thin";}.img_box{position:relative;display:block;margin:0;padding:0;}.img_box img{z-index:0;margin:0;padding:0;}.img_box a{color:white;font-size:70px;}.img_comment2{font-size:70px;font-family: 'Oswald', sans-serif;font-weight:300;position:absolute;bottom:150px;left:0px;z-index:1;text-align:left;padding:10px;margin:0;text-shadow:3px 3px 3px #000;}.pages{display:block;float:left;position:relative;}.comments{font-size:70px;font-family: 'Oswald', sans-serif;font-weight:300;color:white;position:absolute;bottom:150px;left:150px;z-index:1;text-align:center;padding:10px;margin:0;text-shadow:3px 3px 3px #000;}.japanese-font{font-family:"Noto Sans";font-size:18px;font-weight:bold;color:white;position:absolute;bottom:100px;left:150px;z-index:1;text-align:center;padding:10px;margin:0;text-shadow:3px 3px 3px #000;}body{}/*.gridContainer{width: 88.5%;max-width: 1300px;padding-top:50px;padding-left: 0.75%;padding-right: 0.75%;margin: auto;clear: none;float: none;margin-left: auto;}*/#pc-wrapper{display:block;width:1300px;height:1800px;margin:0 auto;}#pc-wrapper p{margin:0;}#pc-wrapper img{display:block;}#pc-header-box{display:block;position:relative;width:1300px;height:800px;margin:0 auto;vertical-align:bottom;}.pc-header-title{display:inline-block;position:absolute;font-size:60px;}#pc-logo-box{display:block;position:relative;width:1300px;height:200px;margin:0 auto;}#pc-logo-box img{display:block;position:relative;top:50px;margin:0 auto;}#pc-page-box1{display:block;position:relative;width:650px;height:430px;float:left;overflow:hidden;}#pc-page-box2{display:block;position:relative;width:650px;height:430px;float:left;overflow:hidden;}#pc-page-box3{display:block;position:relative;width:650px;height:430px;float:left;overflow:hidden;}#pc-page-box4{display:block;position:relative;width:650px;height:430px;float:left;overflow:hidden;}#pc-page-box5{display:block;position:relative;width:650px;height:430px;float:left;overflow:hidden;}.black-sheet{display: block;position: absolute;width: 650px;height: 430px;background: rgba(0,0,0,0.8);z-index: 1;}.pc-page-title{display:block;position:absolute;font-size:30px;color:rgba(255,255,255,1);z-index:2;}.pc-page-title-japanese{display:block;position:absolute;top:30px;font-size:24px;color:rgba(255,255,255,1);z-index:3;}#we-are-infobox{display:block;position:absolute;left:-300px;width:300px;height:300px;background:rgba(51,153,204,1);opacity:1;z-index:5;}#info-infobox{display:block;float:right;position:absolute;right:-300px;width:300px;height:300px;background:rgba(51,153,204,1);opacity:1;z-index:5;}#price-infobox{display:block;position:absolute;left:-300px;width:300px;height:300px;background:rgba(51,153,204,1);opacity:1;z-index:5;}#blog-infobox{display:block;float:right;position:absolute;right:-300px;width:300px;height:300px;background:rgba(51,153,204,1);opacity:1;z-index:5;}#contact-us-infobox{display:block;position:absolute;left:-300px;width:300px;height:300px;background:rgba(51,153,204,1);opacity:1;z-index:5;}$(function(){var duration=300;var duration2=500;$("#pc-page-box1").on("mouseover",function(){$(this).find(".black-sheet").stop(true).animate({opacity:0.6},duration);});$("#pc-page-box1").on("mouseout",function(){$(this).find(".black-sheet").stop(true).animate({opacity:1},duration);});$("#pc-page-box2").on("mouseover",function(){$(this).find(".black-sheet").stop(true).animate({opacity:0.6},duration);});$("#pc-page-box2").on("mouseout",function(){$(this).find(".black-sheet").stop(true).animate({opacity:1},duration);});$("#pc-page-box3").on("mouseover",function(){$(this).find(".black-sheet").stop(true).animate({opacity:0.6},duration);});$("#pc-page-box3").on("mouseout",function(){$(this).find(".black-sheet").stop(true).animate({opacity:1},duration);});$("#pc-page-box4").on("mouseover",function(){$(this).find(".black-sheet").stop(true).animate({opacity:0.6},duration);});$("#pc-page-box4").on("mouseout",function(){$(this).find(".black-sheet").stop(true).animate({opacity:1},duration);});$("#pc-page-box5").on("mouseover",function(){$(this).find(".black-sheet").stop(true).animate({opacity:0.6},duration);});$("#pc-page-box5").on("mouseout",function(){$(this).find(".black-sheet").stop(true).animate({opacity:1},duration);});});$(function(){var duration=300;$(document).on('click', '.leftBoxParent', function(){$(this).parent('div').find('.leftBox').stop(true).animate({left:-300}, duration);$(this).find('.leftBox').stop(true).animate({left:300}, duration);});});$(function(){var duration=300;$(document).on('click', '.rightBoxParent', function(){$(this).parent('div').find('.rightBox').stop(true).animate({right:-300}, duration);$(this).find('.rightBox').stop(true).animate({right:300}, duration);});});

Welcome to our website"

We Are私たちについて

Info お知らせ

Priceプライス

Blogブログ

Contact Us メール

$(function(){
    var duration=300;
    var duration2=500;

    $("#pc-page-box1").on("mouseover",function(){
        $(this).find(".black-sheet").stop(true).animate({
            opacity:0.6},
            duration);
    });
    $("#pc-page-box1").on("mouseout",function(){
        $(this).find(".black-sheet").stop(true).animate({
            opacity:1},
            duration);
    });

    $("#pc-page-box2").on("mouseover",function(){
        $(this).find(".black-sheet").stop(true).animate({
            opacity:0.6},
            duration);
    });
    $("#pc-page-box2").on("mouseout",function(){
        $(this).find(".black-sheet").stop(true).animate({
            opacity:1},
            duration);
    });

    $("#pc-page-box3").on("mouseover",function(){
        $(this).find(".black-sheet").stop(true).animate({
            opacity:0.6},
            duration);
    });
    $("#pc-page-box3").on("mouseout",function(){
        $(this).find(".black-sheet").stop(true).animate({
            opacity:1},
            duration);
    });

    $("#pc-page-box4").on("mouseover",function(){
        $(this).find(".black-sheet").stop(true).animate({
            opacity:0.6},
            duration);
    });
    $("#pc-page-box4").on("mouseout",function(){
        $(this).find(".black-sheet").stop(true).animate({
            opacity:1},
            duration);
    });

    $("#pc-page-box5").on("mouseover",function(){
        $(this).find(".black-sheet").stop(true).animate({
            opacity:0.6},
            duration);
    });
    $("#pc-page-box5").on("mouseout",function(){
        $(this).find(".black-sheet").stop(true).animate({
            opacity:1},
            duration);
    });
});

$(function(){
    var duration=300;
    $(document).on('click', '.leftBoxParent', function(){
        $(this).parent('div').find('.leftBox').stop(true).animate({left:-300}, duration);
        $(this).find('.leftBox').stop(true).animate({left:300}, duration);
    });
});

$(function(){
    var duration=300;
    $(document).on('click', '.rightBoxParent', function(){
        $(this).parent('div').find('.rightBox').stop(true).animate({right:-300}, duration);
        $(this).find('.rightBox').stop(true).animate({right:300}, duration);
    });
});
body,td,th {
    font-family: "Noto Sans CJK JP Light", "Noto Sans CJK JP Black", "Noto Sans CJK JP Bold", "Noto Sans CJK JP DemiLight", "Noto Sans CJK JP Medium", "Noto Sans CJK JP Regular", "Noto Sans CJK JP Thin";
}
h1,h2,h3,h4,h5,h6 {
    font-family: "Noto Sans CJK JP Light", "Noto Sans CJK JP Black", "Noto Sans CJK JP Bold", "Noto Sans CJK JP DemiLight", "Noto Sans CJK JP Medium", "Noto Sans CJK JP Regular", "Noto Sans CJK JP Thin";
}
.img_box {
    position:relative;
    display:block;
    margin:0;
    padding:0;
}
.img_box img {
    z-index:0;
    margin:0;
    padding:0;
}
.img_box a {
    color:white;
    font-size:70px;
}

.img_comment2 {
    font-size:70px;
    font-family: 'Oswald', sans-serif;
    font-weight:300;
    position:absolute;
    bottom:150px;
    left:0px;
    z-index:1;
    text-align:left;
    padding:10px;
    margin:0;
    text-shadow:3px 3px 3px #000;
}

.pages{
    display:block;
    float:left;
    position:relative;
}
.comments{
    font-size:70px;
    font-family: 'Oswald', sans-serif;
    font-weight:300;
    color:white;
    position:absolute;
    bottom:150px;
    left:150px;
    z-index:1;
    text-align:center;
    padding:10px;
    margin:0;
    text-shadow:3px 3px 3px #000;
}
.japanese-font{
    font-family:"Noto Sans";
    font-size:18px;
    font-weight:bold;
    color:white;
    position:absolute;
    bottom:100px;
    left:150px;
    z-index:1;
    text-align:center;
    padding:10px;
    margin:0;
    text-shadow:3px 3px 3px #000;
}

body{

}

/*.gridContainer {
width: 88.5%;
max-width: 1300px;
padding-top:50px;
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}*/

#pc-wrapper{
    display:block;
    width:1300px;
    height:1800px;
    margin:0 auto;
}
#pc-wrapper p{
    margin:0;
}
#pc-wrapper img{
    display:block;
}
#pc-header-box{
    display:block;
    position:relative;
    width:1300px;
    height:800px;
    margin:0 auto;
    vertical-align:bottom;
}
.pc-header-title{
    display:inline-block;
    position:absolute;
    font-size:60px;
}

#pc-logo-box{
    display:block;
    position:relative;
    width:1300px;
    height:200px;
    margin:0 auto;
}
#pc-logo-box img{
    display:block;
    position:relative;
    top:50px;
    margin:0 auto;
}

#pc-page-box1{
    display:block;
    position:relative;
    width:650px;
    height:430px;
    float:left;
    overflow:hidden;
}
#pc-page-box2{
    display:block;
    position:relative;
    width:650px;
    height:430px;
    float:left;
    overflow:hidden;
}

#pc-page-box3{
    display:block;
    position:relative;
    width:650px;
    height:430px;
    float:left;
    overflow:hidden;
}
#pc-page-box4{
    display:block;
    position:relative;
    width:650px;
    height:430px;
    float:left;
    overflow:hidden;
}
#pc-page-box5{
    display:block;
    position:relative;
    width:650px;
    height:430px;
    float:left;
    overflow:hidden;
}

.black-sheet{
    display: block;
    position: absolute;
    width: 650px;
    height: 430px;
    background: rgba(0,0,0,0.8);
    z-index: 1;
}
.pc-page-title{
    display:block;
    position:absolute;
    font-size:30px;
    color:rgba(255,255,255,1);
    z-index:2;
}
.pc-page-title-japanese{
    display:block;
    position:absolute;
    top:30px;
    font-size:24px;
    color:rgba(255,255,255,1);
    z-index:3;
}
#we-are-infobox{
    display:block;
    position:absolute;
    left:-300px;
    width:300px;
    height:300px;
    background:rgba(51,153,204,1);
    opacity:1;
    z-index:5;
}
#info-infobox{
    display:block;
    float:right;
    position:absolute;
    right:-300px;
    width:300px;
    height:300px;
    background:rgba(51,153,204,1);
    opacity:1;
    z-index:5;
}
#price-infobox{
    display:block;
    position:absolute;
    left:-300px;
    width:300px;
    height:300px;
    background:rgba(51,153,204,1);
    opacity:1;
    z-index:5;
}
#blog-infobox{
    display:block;
    float:right;
    position:absolute;
    right:-300px;
    width:300px;
    height:300px;
    background:rgba(51,153,204,1);
    opacity:1;
    z-index:5;
}
#contact-us-infobox{
    display:block;
    position:absolute;
    left:-300px;
    width:300px;
    height:300px;
    background:rgba(51,153,204,1);
    opacity:1;
    z-index:5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gridContainer">
    <div id="pc-wrapper">
        <div id="pc-header-box">
            <p><div class="pc-header-title">Welcome to our website"</div>
            </p>
        </div>

        <div id="pc-logo-box">
        </div>

        <div id="pc-page-box1" class="leftBoxParent">
            <p>
            <div class="pc-page-title">We Are</div><div class="pc-page-title-japanese">私たちについて</div>
            <div id="we-are-infobox" class="leftBox"></div>
            <div class="black-sheet"></div>
            </p>
        </div>

        <div id="pc-page-box2" class="rightBoxParent">
            <p><div class="pc-page-title" >Info</div>
            <div class="pc-page-title-japanese">お知らせ</div>
            <div id="info-infobox" class="rightBox"></div>
            <div class="black-sheet"></div>
            </p>
        </div>

        <div id="pc-page-box3" class="leftBoxParent">
            <p><div class="pc-page-title">Price</div><div class="pc-page-title-japanese">プライス</div>
            <div id="price-infobox" class="leftBox"></div><div class="black-sheet"></div>
            </p>
        </div>

        <div id="pc-page-box4" class="rightBoxParent">
            <p><div class="pc-page-title">Blog</div><div class="pc-page-title-japanese">ブログ</div>
            <div id="blog-infobox" class="rightBox"></div>
            <div class="black-sheet"></div>
            </p>
        </div>

        <div id="pc-page-box5" class="leftBoxParent">
            <p><div class="pc-page-title">Contact Us</div>
            <div class="pc-page-title-japanese">メール</div>
            <div id="we-are-infobox" class="leftBox">
            </div><div class="black-sheet"></div>
            </p>
        </div>
    </div>
</div><!--end gridContainer-->

本文に 5874 文字追加; タイトルを編集
ソース リンク
webman
  • 199
  • 2
  • 12

jQuery のif文が上手くいきません。(訂正)

いろいろやってみた仕事です合間なので時間、上手くいかず、救いを求めてココにやっかかっしまいました。。。すみません。。。が、やっと編集できました!
現在、こんな感じです。↓

body,td,th{font-family: "Noto Sans CJK JP Light", "Noto Sans CJK JP Black", "Noto Sans CJK JP Bold", "Noto Sans CJK JP DemiLight", "Noto Sans CJK JP Medium", "Noto Sans CJK JP Regular", "Noto Sans CJK JP Thin";
<style>
#wrapper{
    display:block;
    margin:0 auto;
    overflow:hidden;
    background:rgba(68,136,79,1);
    width:700px;
    height:1000px;
    }
#aaa{
    display:block;
    position:relative;
    right:-300px;
    float:right;
    background:rgba(128,255,0,1);
    width:300px;
    height:300px;
    z-index:1;
    }
#bbb{
    display:block;
    position:relative;
    left:-300px;
    background:rgba(0,255,255,1);
    width:300px;
    height:300px;
    z-index:1;
    }
#ccc{
    display:block;
    position:relative;
    right:-300px;
    float:right;
    background:rgba(204,153,153,1);
    width:300px;
    height:300px;
    z-index:1;
    }
#ddd{
    display:block;
    position:relative;
    left:-300px;
    background:rgba(255,255,153,1);
    width:300px;
    height:300px;
    z-index:1;
    }
    
#aaa-btn{
    display:block;
    position:relative;
    top:-550px;
    right:50px;
    float:right;
    background:rgba(128,255,190,1);
    width:200px;
    height:50px;
    }
#bbb-btn{
    display:block;
    position:relative;
    top:-600px;
    background:rgba(0,255,190,1);
    width:200px;
    height:200px;
    }
#ccc-btn{
    display:block;
    position:relative;
    top:-550px;
    right:50px;
    float:right;
    background:rgba(204,153,190,1);
    width:200px;
    height:50px;
    }

#ddd-btn{
    display:block;
    position:relative;
    top:-500px;
    background:rgba(255,255,190,1);
    width:200px;
    height:200px;
    }
</style>



</head>

<body>
<div id="wrapper">
<div id="aaa">aaa</div>
<div id="bbb">bbb</div>
<div id="ccc">ccc</div>
<div id="ddd">ddd</div>

<div id="aaa-btn">go to aaa</div>
<div id="bbb-btn">go to bbb</div>
<div id="ccc-btn">go to ccc</div>
<div id="ddd-btn">go to ddd</div>



</div>


</body>
}h1,h2,h3,h4,h5,h6{font-family: "Noto Sans CJK JP Light", "Noto Sans CJK JP Black", "Noto Sans CJK JP Bold", "Noto Sans CJK JP DemiLight", "Noto Sans CJK JP Medium", "Noto Sans CJK JP Regular", "Noto Sans CJK JP Thin";}.img_box{position:relative;display:block;margin:0;padding:0;}.img_box img{z-index:0;margin:0;padding:0;}.img_box a{color:white;font-size:70px;}.img_comment2{font-size:70px;font-family: 'Oswald', sans-serif;font-weight:300;position:absolute;bottom:150px;left:0px;z-index:1;text-align:left;padding:10px;margin:0;text-shadow:3px 3px 3px #000;}.pages{display:block;float:left;position:relative;}.comments{font-size:70px;font-family: 'Oswald', sans-serif;font-weight:300;color:white;position:absolute;bottom:150px;left:150px;z-index:1;text-align:center;padding:10px;margin:0;text-shadow:3px 3px 3px #000;}.japanese-font{font-family:"Noto Sans";font-size:18px;font-weight:bold;color:white;position:absolute;bottom:100px;left:150px;z-index:1;text-align:center;padding:10px;margin:0;text-shadow:3px 3px 3px #000;}body{}/*.gridContainer{width: 88.5%;max-width: 1300px;padding-top:50px;padding-left: 0.75%;padding-right: 0.75%;margin: auto;clear: none;float: none;margin-left: auto;}*/#pc-wrapper{display:block;width:1300px;height:1800px;margin:0 auto;}#pc-wrapper p{margin:0;}#pc-wrapper img{display:block;}#pc-header-box{display:block;position:relative;width:1300px;height:800px;margin:0 auto;vertical-align:bottom;}.pc-header-title{display:inline-block;position:absolute;font-size:60px;}#pc-logo-box{display:block;position:relative;width:1300px;height:200px;margin:0 auto;}#pc-logo-box img{display:block;position:relative;top:50px;margin:0 auto;}#pc-page-box1{display:block;position:relative;width:650px;height:430px;float:left;overflow:hidden;}#pc-page-box2{display:block;position:relative;width:650px;height:430px;float:left;overflow:hidden;}#pc-page-box3{display:block;position:relative;width:650px;height:430px;float:left;overflow:hidden;}#pc-page-box4{display:block;position:relative;width:650px;height:430px;float:left;overflow:hidden;}#pc-page-box5{display:block;position:relative;width:650px;height:430px;float:left;overflow:hidden;}.black-sheet{display: block;position: absolute;width: 650px;height: 430px;background: rgba(0,0,0,0.8);z-index: 1;}.pc-page-title{display:block;position:absolute;font-size:30px;color:rgba(255,255,255,1);z-index:2;}.pc-page-title-japanese{display:block;position:absolute;top:30px;font-size:24px;color:rgba(255,255,255,1);z-index:3;}#we-are-infobox{display:block;position:absolute;left:-300px;width:300px;height:300px;background:rgba(51,153,204,1);opacity:1;z-index:5;}#info-infobox{display:block;float:right;position:absolute;right:-300px;width:300px;height:300px;background:rgba(51,153,204,1);opacity:1;z-index:5;}#price-infobox{display:block;position:absolute;left:-300px;width:300px;height:300px;background:rgba(51,153,204,1);opacity:1;z-index:5;}#blog-infobox{display:block;float:right;position:absolute;right:-300px;width:300px;height:300px;background:rgba(51,153,204,1);opacity:1;z-index:5;}#contact-us-infobox{display:block;position:absolute;left:-300px;width:300px;height:300px;background:rgba(51,153,204,1);opacity:1;z-index:5;}$(function(){var duration=300;var duration2=500;$("#pc-page-box1").on("mouseover",function(){$(this).find(".black-sheet").stop(true).animate({opacity:0.6},duration);});$("#pc-page-box1").on("mouseout",function(){$(this).find(".black-sheet").stop(true).animate({opacity:1},duration);});$("#pc-page-box2").on("mouseover",function(){$(this).find(".black-sheet").stop(true).animate({opacity:0.6},duration);});$("#pc-page-box2").on("mouseout",function(){$(this).find(".black-sheet").stop(true).animate({opacity:1},duration);});$("#pc-page-box3").on("mouseover",function(){$(this).find(".black-sheet").stop(true).animate({opacity:0.6},duration);});$("#pc-page-box3").on("mouseout",function(){$(this).find(".black-sheet").stop(true).animate({opacity:1},duration);});$("#pc-page-box4").on("mouseover",function(){$(this).find(".black-sheet").stop(true).animate({opacity:0.6},duration);});$("#pc-page-box4").on("mouseout",function(){$(this).find(".black-sheet").stop(true).animate({opacity:1},duration);});$("#pc-page-box5").on("mouseover",function(){$(this).find(".black-sheet").stop(true).animate({opacity:0.6},duration);});$("#pc-page-box5").on("mouseout",function(){$(this).find(".black-sheet").stop(true).animate({opacity:1},duration);});});$(function(){var duration=300;$(document).on('click', '.leftBoxParent', function(){$(this).parent('div').find('.leftBox').stop(true).animate({left:-300}, duration);$(this).find('.leftBox').stop(true).animate({left:300}, duration);});});$(function(){var duration=300;$(document).on('click', '.rightBoxParent', function(){$(this).parent('div').find('.rightBox').stop(true).animate({right:-300}, duration);$(this).find('.rightBox').stop(true).animate({right:300}, duration);});});

css はちょっと違います。。
Welcome to our website"

すみません。 We Are私たちについて

Info お知らせ

Priceプライス

Blogブログ

Contact Us メール

次にそれぞれのbtnにプログラムしたいです。
・btnAをクリックしたら、不可視領域にあるAが左から右へスライドしてきて、可視領域の中央に配置される。
・そのとき、すべてのbtnA B C Dはクリック不可。
・Aが元の不可視領域に戻るには「Aそのもの」をクリックする。
・Aが元に戻って、また、btnA B C Dはクリック可能になる。

このケース自分の知識ifできる範囲で作ってみました。

if文を考えるとき使って動かすべきなのかどうか如何よくわからず、とにかく動くようプログラミングてみました。
しかし、右セクションはは右、左セクションは左とセパレートになってしまっていますが、本来は、右が動いていて、もし、左を押したら良いのでしょうか?、右は右に戻って、左は左から出てくるという動きにしたいです。。

jQuery のif文が上手くいきません

いろいろやってみたです、上手くいかず、救いを求めてココにやっました。。。すみません。。。

<style>
#wrapper{
    display:block;
    margin:0 auto;
    overflow:hidden;
    background:rgba(68,136,79,1);
    width:700px;
    height:1000px;
    }
#aaa{
    display:block;
    position:relative;
    right:-300px;
    float:right;
    background:rgba(128,255,0,1);
    width:300px;
    height:300px;
    z-index:1;
    }
#bbb{
    display:block;
    position:relative;
    left:-300px;
    background:rgba(0,255,255,1);
    width:300px;
    height:300px;
    z-index:1;
    }
#ccc{
    display:block;
    position:relative;
    right:-300px;
    float:right;
    background:rgba(204,153,153,1);
    width:300px;
    height:300px;
    z-index:1;
    }
#ddd{
    display:block;
    position:relative;
    left:-300px;
    background:rgba(255,255,153,1);
    width:300px;
    height:300px;
    z-index:1;
    }
    
#aaa-btn{
    display:block;
    position:relative;
    top:-550px;
    right:50px;
    float:right;
    background:rgba(128,255,190,1);
    width:200px;
    height:50px;
    }
#bbb-btn{
    display:block;
    position:relative;
    top:-600px;
    background:rgba(0,255,190,1);
    width:200px;
    height:200px;
    }
#ccc-btn{
    display:block;
    position:relative;
    top:-550px;
    right:50px;
    float:right;
    background:rgba(204,153,190,1);
    width:200px;
    height:50px;
    }

#ddd-btn{
    display:block;
    position:relative;
    top:-500px;
    background:rgba(255,255,190,1);
    width:200px;
    height:200px;
    }
</style>



</head>

<body>
<div id="wrapper">
<div id="aaa">aaa</div>
<div id="bbb">bbb</div>
<div id="ccc">ccc</div>
<div id="ddd">ddd</div>

<div id="aaa-btn">go to aaa</div>
<div id="bbb-btn">go to bbb</div>
<div id="ccc-btn">go to ccc</div>
<div id="ddd-btn">go to ddd</div>



</div>


</body>

css はちょっと違います。。
すみません。

次にそれぞれのbtnにプログラムしたいです。
・btnAをクリックしたら、不可視領域にあるAが左から右へスライドしてきて、可視領域の中央に配置される。
・そのとき、すべてのbtnA B C Dはクリック不可。
・Aが元の不可視領域に戻るには「Aそのもの」をクリックする。
・Aが元に戻って、また、btnA B C Dはクリック可能になる。

このケースif文を考えるとき如何にしたら良いのでしょうか?

jQuery のif文が上手くいきません。(訂正)

仕事合間なので時間かかっしまいましたが、やっと編集できました!
現在、こんな感じです。↓

body,td,th{font-family: "Noto Sans CJK JP Light", "Noto Sans CJK JP Black", "Noto Sans CJK JP Bold", "Noto Sans CJK JP DemiLight", "Noto Sans CJK JP Medium", "Noto Sans CJK JP Regular", "Noto Sans CJK JP Thin";}h1,h2,h3,h4,h5,h6{font-family: "Noto Sans CJK JP Light", "Noto Sans CJK JP Black", "Noto Sans CJK JP Bold", "Noto Sans CJK JP DemiLight", "Noto Sans CJK JP Medium", "Noto Sans CJK JP Regular", "Noto Sans CJK JP Thin";}.img_box{position:relative;display:block;margin:0;padding:0;}.img_box img{z-index:0;margin:0;padding:0;}.img_box a{color:white;font-size:70px;}.img_comment2{font-size:70px;font-family: 'Oswald', sans-serif;font-weight:300;position:absolute;bottom:150px;left:0px;z-index:1;text-align:left;padding:10px;margin:0;text-shadow:3px 3px 3px #000;}.pages{display:block;float:left;position:relative;}.comments{font-size:70px;font-family: 'Oswald', sans-serif;font-weight:300;color:white;position:absolute;bottom:150px;left:150px;z-index:1;text-align:center;padding:10px;margin:0;text-shadow:3px 3px 3px #000;}.japanese-font{font-family:"Noto Sans";font-size:18px;font-weight:bold;color:white;position:absolute;bottom:100px;left:150px;z-index:1;text-align:center;padding:10px;margin:0;text-shadow:3px 3px 3px #000;}body{}/*.gridContainer{width: 88.5%;max-width: 1300px;padding-top:50px;padding-left: 0.75%;padding-right: 0.75%;margin: auto;clear: none;float: none;margin-left: auto;}*/#pc-wrapper{display:block;width:1300px;height:1800px;margin:0 auto;}#pc-wrapper p{margin:0;}#pc-wrapper img{display:block;}#pc-header-box{display:block;position:relative;width:1300px;height:800px;margin:0 auto;vertical-align:bottom;}.pc-header-title{display:inline-block;position:absolute;font-size:60px;}#pc-logo-box{display:block;position:relative;width:1300px;height:200px;margin:0 auto;}#pc-logo-box img{display:block;position:relative;top:50px;margin:0 auto;}#pc-page-box1{display:block;position:relative;width:650px;height:430px;float:left;overflow:hidden;}#pc-page-box2{display:block;position:relative;width:650px;height:430px;float:left;overflow:hidden;}#pc-page-box3{display:block;position:relative;width:650px;height:430px;float:left;overflow:hidden;}#pc-page-box4{display:block;position:relative;width:650px;height:430px;float:left;overflow:hidden;}#pc-page-box5{display:block;position:relative;width:650px;height:430px;float:left;overflow:hidden;}.black-sheet{display: block;position: absolute;width: 650px;height: 430px;background: rgba(0,0,0,0.8);z-index: 1;}.pc-page-title{display:block;position:absolute;font-size:30px;color:rgba(255,255,255,1);z-index:2;}.pc-page-title-japanese{display:block;position:absolute;top:30px;font-size:24px;color:rgba(255,255,255,1);z-index:3;}#we-are-infobox{display:block;position:absolute;left:-300px;width:300px;height:300px;background:rgba(51,153,204,1);opacity:1;z-index:5;}#info-infobox{display:block;float:right;position:absolute;right:-300px;width:300px;height:300px;background:rgba(51,153,204,1);opacity:1;z-index:5;}#price-infobox{display:block;position:absolute;left:-300px;width:300px;height:300px;background:rgba(51,153,204,1);opacity:1;z-index:5;}#blog-infobox{display:block;float:right;position:absolute;right:-300px;width:300px;height:300px;background:rgba(51,153,204,1);opacity:1;z-index:5;}#contact-us-infobox{display:block;position:absolute;left:-300px;width:300px;height:300px;background:rgba(51,153,204,1);opacity:1;z-index:5;}$(function(){var duration=300;var duration2=500;$("#pc-page-box1").on("mouseover",function(){$(this).find(".black-sheet").stop(true).animate({opacity:0.6},duration);});$("#pc-page-box1").on("mouseout",function(){$(this).find(".black-sheet").stop(true).animate({opacity:1},duration);});$("#pc-page-box2").on("mouseover",function(){$(this).find(".black-sheet").stop(true).animate({opacity:0.6},duration);});$("#pc-page-box2").on("mouseout",function(){$(this).find(".black-sheet").stop(true).animate({opacity:1},duration);});$("#pc-page-box3").on("mouseover",function(){$(this).find(".black-sheet").stop(true).animate({opacity:0.6},duration);});$("#pc-page-box3").on("mouseout",function(){$(this).find(".black-sheet").stop(true).animate({opacity:1},duration);});$("#pc-page-box4").on("mouseover",function(){$(this).find(".black-sheet").stop(true).animate({opacity:0.6},duration);});$("#pc-page-box4").on("mouseout",function(){$(this).find(".black-sheet").stop(true).animate({opacity:1},duration);});$("#pc-page-box5").on("mouseover",function(){$(this).find(".black-sheet").stop(true).animate({opacity:0.6},duration);});$("#pc-page-box5").on("mouseout",function(){$(this).find(".black-sheet").stop(true).animate({opacity:1},duration);});});$(function(){var duration=300;$(document).on('click', '.leftBoxParent', function(){$(this).parent('div').find('.leftBox').stop(true).animate({left:-300}, duration);$(this).find('.leftBox').stop(true).animate({left:300}, duration);});});$(function(){var duration=300;$(document).on('click', '.rightBoxParent', function(){$(this).parent('div').find('.rightBox').stop(true).animate({right:-300}, duration);$(this).find('.rightBox').stop(true).animate({right:300}, duration);});});

Welcome to our website"

We Are私たちについて

Info お知らせ

Priceプライス

Blogブログ

Contact Us メール

次にそれぞれのbtnにプログラムしたいです。
・btnAをクリックしたら、不可視領域にあるAが左から右へスライドしてきて、可視領域の中央に配置される。

自分の知識できる範囲で作ってみました。

if文を使って動かすべきなのかどうかよくわからず、とにかく動くようプログラミングてみました。
しかし、右セクションはは右、左セクションは左とセパレートになってしまっていますが、本来は、右が動いていて、もし、左を押したら、右は右に戻って、左は左から出てくるという動きにしたいです。。

#wrapper{display:block;margin:0 auto;overflow:hidden;background:rgba(68,136,79,1);width:700px;height:1000px;}#aaa{display:block;position:relative;right:-300px;float:right;background:rgba(128,255,0,1);width:300px;height:300px;z-index:1;}#bbb{display:block;position:relative;left:-300px;background:rgba(0,255,255,1);width:300px;height:300px;z-index:1;}#ccc{display:block;position:relative;right:-300px;float:right;background:rgba(204,153,153,1);width:300px;height:300px;z-index:1;}#ddd{display:block;position:relative;left:-300px;background:rgba(255,255,153,1);width:300px;height:300px;z-index:1;}#aaa-btn{display:block;position:relative;top:-550px;right:50px;float:right;background:rgba(128,255,190,1);width:200px;height:50px;}#bbb-btn{display:block;position:relative;top:-600px;background:rgba(0,255,190,1);width:200px;height:200px;}#ccc-btn{display:block;position:relative;top:-550px;right:50px;float:right;background:rgba(204,153,190,1);width:200px;height:50px;}#ddd-btn{display:block;position:relative;top:-500px;background:rgba(255,255,190,1);width:200px;height:200px;}aaabbbcccdddgo to aaago to bbbgo to ccc
<style>
#wrapper{
    display:block;
    margin:0 auto;
    overflow:hidden;
    background:rgba(68,136,79,1);
    width:700px;
    height:1000px;
    }
#aaa{
    display:block;
    position:relative;
    right:-300px;
    float:right;
    background:rgba(128,255,0,1);
    width:300px;
    height:300px;
    z-index:1;
    }
#bbb{
    display:block;
    position:relative;
    left:-300px;
    background:rgba(0,255,255,1);
    width:300px;
    height:300px;
    z-index:1;
    }
#ccc{
    display:block;
    position:relative;
    right:-300px;
    float:right;
    background:rgba(204,153,153,1);
    width:300px;
    height:300px;
    z-index:1;
    }
#ddd{
    display:block;
    position:relative;
    left:-300px;
    background:rgba(255,255,153,1);
    width:300px;
    height:300px;
    z-index:1;
    }
    
#aaa-btn{
    display:block;
    position:relative;
    top:-550px;
    right:50px;
    float:right;
    background:rgba(128,255,190,1);
    width:200px;
    height:50px;
    }
#bbb-btn{
    display:block;
    position:relative;
    top:-600px;
    background:rgba(0,255,190,1);
    width:200px;
    height:200px;
    }
#ccc-btn{
    display:block;
    position:relative;
    top:-550px;
    right:50px;
    float:right;
    background:rgba(204,153,190,1);
    width:200px;
    height:50px;
    }

#ddd-btn{
    display:block;
    position:relative;
    top:-500px;
    background:rgba(255,255,190,1);
    width:200px;
    height:200px;
    }
</style>



</head>

<body>
<div id="wrapper">
<div id="aaa">aaa</div>
<div id="bbb">bbb</div>
<div id="ccc">ccc</div>
<div id="ddd">ddd</div>

<div id="aaa-btn">go to aaa</div>
<div id="bbb-btn">go to bbb</div>
<div id="ccc-btn">go to ccc</div>
<div id="ddd-btn">go to ddd</div>



</div>


</body>
go to ddd
#wrapper{display:block;margin:0 auto;overflow:hidden;background:rgba(68,136,79,1);width:700px;height:1000px;}#aaa{display:block;position:relative;right:-300px;float:right;background:rgba(128,255,0,1);width:300px;height:300px;z-index:1;}#bbb{display:block;position:relative;left:-300px;background:rgba(0,255,255,1);width:300px;height:300px;z-index:1;}#ccc{display:block;position:relative;right:-300px;float:right;background:rgba(204,153,153,1);width:300px;height:300px;z-index:1;}#ddd{display:block;position:relative;left:-300px;background:rgba(255,255,153,1);width:300px;height:300px;z-index:1;}#aaa-btn{display:block;position:relative;top:-550px;right:50px;float:right;background:rgba(128,255,190,1);width:200px;height:50px;}#bbb-btn{display:block;position:relative;top:-600px;background:rgba(0,255,190,1);width:200px;height:200px;}#ccc-btn{display:block;position:relative;top:-550px;right:50px;float:right;background:rgba(204,153,190,1);width:200px;height:50px;}#ddd-btn{display:block;position:relative;top:-500px;background:rgba(255,255,190,1);width:200px;height:200px;}aaabbbcccdddgo to aaago to bbbgo to cccgo to ddd
<style>
#wrapper{
    display:block;
    margin:0 auto;
    overflow:hidden;
    background:rgba(68,136,79,1);
    width:700px;
    height:1000px;
    }
#aaa{
    display:block;
    position:relative;
    right:-300px;
    float:right;
    background:rgba(128,255,0,1);
    width:300px;
    height:300px;
    z-index:1;
    }
#bbb{
    display:block;
    position:relative;
    left:-300px;
    background:rgba(0,255,255,1);
    width:300px;
    height:300px;
    z-index:1;
    }
#ccc{
    display:block;
    position:relative;
    right:-300px;
    float:right;
    background:rgba(204,153,153,1);
    width:300px;
    height:300px;
    z-index:1;
    }
#ddd{
    display:block;
    position:relative;
    left:-300px;
    background:rgba(255,255,153,1);
    width:300px;
    height:300px;
    z-index:1;
    }
    
#aaa-btn{
    display:block;
    position:relative;
    top:-550px;
    right:50px;
    float:right;
    background:rgba(128,255,190,1);
    width:200px;
    height:50px;
    }
#bbb-btn{
    display:block;
    position:relative;
    top:-600px;
    background:rgba(0,255,190,1);
    width:200px;
    height:200px;
    }
#ccc-btn{
    display:block;
    position:relative;
    top:-550px;
    right:50px;
    float:right;
    background:rgba(204,153,190,1);
    width:200px;
    height:50px;
    }

#ddd-btn{
    display:block;
    position:relative;
    top:-500px;
    background:rgba(255,255,190,1);
    width:200px;
    height:200px;
    }
</style>



</head>

<body>
<div id="wrapper">
<div id="aaa">aaa</div>
<div id="bbb">bbb</div>
<div id="ccc">ccc</div>
<div id="ddd">ddd</div>

<div id="aaa-btn">go to aaa</div>
<div id="bbb-btn">go to bbb</div>
<div id="ccc-btn">go to ccc</div>
<div id="ddd-btn">go to ddd</div>



</div>


</body>
ソース リンク
webman
  • 199
  • 2
  • 12
読み込んでいます