[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
css
#AAA {
width: 300px;
}
#AAA .title {
margin: 3px 0;
padding: 0 5px;
border-radius: 5px;
background: #e5e5e5;
cursor: pointer;
}
#AAA-box1, #AAA-box2, #AAA-box3 {
height: 100px;
margin: 3px 0;
padding: 5px;
border: 1px solid #e5e5e5;
border-radius: 5px;
word-wrap: break-word;
overflow: auto;
}
#AAA-box2, #AAA-box3 {
display: none;
}
html
<div id="AAA">
<div class="title" onclick="$('#AAA-box1').slideDown(350);$('#AAA-box2,#AAA-box3').slideUp(350);">●●●</div>
<div id="AAA-box1">
testttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
</div>
<div class="title" onclick="$('#AAA-box2').slideDown(350);$('#AAA-box1,#AAA-box3').slideUp(350);">▲▲▲</div>
<div id="AAA-box2">
＼(^o^)／<br />
／(^o^)＼<br />
＼(^o^)／<br />
／(^o^)＼<br />
＼(^o^)／<br />
／(^o^)＼<br />
＼(^o^)／<br />
／(^o^)＼<br />
＼(^o^)／<br />
／(^o^)＼<br />
／(^o^)＼<br />
／(^o^)＼<br />
／(^o^)＼<br />
</div>
<div class="title" onclick="$('#AAA-box3').slideDown(350);$('#AAA-box1,#AAA-box2').slideUp(350);">■■■</div>
<div id="AAA-box3">
てすと
</div>
</div>
css
#BBB {
width: 300px;
}
#BBB .title a {
padding-right: 5px;
cursor: pointer;
}
#BBB .fade-space {
position: relative;
height: 150px;
border: 1px solid #ccc;
border-radius: 6px;
}
#BBB-box1, #BBB-box2, #BBB-box3 {
position: absolute;
top: 5px;
left: 5px;
width: 288px;
height: 140px;
overflow: auto;
word-wrap: break-word;
background: #eee;
}
#BBB-box2, #BBB-box3 {
display: none;
}
html
<div id="BBB">
<div class="title">
▼<a onclick="$('#BBB-box1').fadeIn(350);$('#BBB-box2,#BBB-box3').fadeOut(350); return false;">てすと</a>
▼<a onclick="$('#BBB-box2').fadeIn(350);$('#BBB-box1,#BBB-box3').fadeOut(350); return false;">Test</a>
▼<a onclick="$('#BBB-box3').fadeIn(350);$('#BBB-box1,#BBB-box2').fadeOut(350); return false;">( ﾟдﾟ )</a>
</div>
<div class="fade-space">
<div id="BBB-box1">
てすと
</div>
<div id="BBB-box2">
testmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
</div>
<div id="BBB-box3">
( ﾟдﾟ) <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
( ﾟдﾟ )
</div>
</div>
</div>
css
#CCC {
width: 300px;
}
#CCC .title a{
padding-right: 5px;
cursor: pointer;
}
#CCC-sc {
height: 160px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
overflow: hidden;
}
.CCC-box {
height: 150px;
border: 5px solid #fff;
overflow: auto;
word-wrap: break-word;
background: #eee;
}
html
<div id="CCC">
<div class="title">
▼<a onclick="$('#CCC-sc').stop().animate({ scrollTop: 0 }, 400); return false;">test</a>
▼<a onclick="$('#CCC-sc').stop().animate({ scrollTop: 160 }, 400); return false;">オワタ</a>
▼<a onclick="$('#CCC-sc').stop().animate({ scrollTop: 320 }, 400); return false;">ナンテコッタイ</a>
▼<a onclick="$('#CCC-sc').stop().animate({ scrollTop: 480 }, 400); return false;">ｗｗｗ</a>
</div>
<div id="CCC-sc">
<div class="CCC-box">
testttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
</div>
<div class="CCC-box">
＼(^o^)／
</div>
<div class="CCC-box">
／(^o^)＼
</div>
<div class="CCC-box">
m9(^Д^)<br />
m9(^Д^)<br />
m9(^Д^)<br />
m9(^Д^)<br />
m9(^Д^)<br />
m9(^Д^)<br />
m9(^Д^)<br />
m9(^Д^)<br />
m9(^Д^)<br />
m9(^Д^)<br />
</div>
</div>
</div>
css
#DDD {
width: 300px;
}
#DDD .title a{
padding-right: 5px;
cursor: pointer;
}
#DDD-sc {
width: 300px;
height: 150px;
border-top: 1px dotted #000;
border-bottom: 1px dotted #000;
overflow: hidden;
}
#DDD-sc-inner {
width: 1200px;
height: 150px;
}
.DDD-box {
float: left;
width: 300px;
height: 140px;
margin: 5px 0;
overflow: auto;
word-wrap: break-word;
background: #eee;
}
/* clearfix（float解除用セレクタ） */
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }
html
<div id="DDD">
<div class="title">
▼<a onclick="$('#DDD-sc').stop().animate({ scrollLeft: 0 }, 500); return false;">text</a>
▼<a onclick="$('#DDD-sc').stop().animate({ scrollLeft: 300 }, 500); return false;">オワタ</a>
▼<a onclick="$('#DDD-sc').stop().animate({ scrollLeft: 600 }, 500); return false;">ナンテコッタイ</a>
▼<a onclick="$('#DDD-sc').stop().animate({ scrollLeft: 900 }, 500); return false;">ｗｗｗ</a>
</div>
<div id="DDD-sc">
<div id="DDD-sc-inner" class="cf">
<div class="DDD-box">
testttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
</div>
<div class="DDD-box">
＼(^o^)／
</div>
<div class="DDD-box">
／(^o^)＼
</div>
<div class="DDD-box">
m9(^Д^)<br />
m9(^Д^)<br />
m9(^Д^)<br />
m9(^Д^)<br />
m9(^Д^)<br />
m9(^Д^)<br />
m9(^Д^)<br />
m9(^Д^)<br />
m9(^Д^)<br />
m9(^Д^)<br />
</div>
</div>
</div>
</div>
css
#EEE {
width: 300px;
border-bottom: 1px dotted #ccc;
text-align: center;
background: #eee;
}
#EEE .title {
padding:5px;
border-top: 1px dotted #ccc;
cursor: pointer;
}
#EEE .title:hover{
background: #fff;
}
#EEE-box1,
#EEE-box2,
#EEE-box3 {
display: none;
padding: 10px 5px 15px;
word-wrap: break-word;
}
html
<div id="EEE">
<div class="title" onclick="$('#EEE-box1').slideToggle(350);">title1</div>
<div id="EEE-box1">
testttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
</div>
<div class="title" onclick="$('#EEE-box2').slideToggle(350);">title2</div>
<div id="EEE-box2">
＼(^o^)／<br />
／(^o^)＼<br />
＼(^o^)／<br />
／(^o^)＼<br />
＼(^o^)／<br />
／(^o^)＼<br />
＼(^o^)／<br />
／(^o^)＼<br />
</div>
<div class="title" onclick="$('#EEE-box3').slideToggle(350);">title3</div>
<div id="EEE-box3">
てすとおおおおおおおおおおおおおおおおおおおおおおうおおおおおおおおおおおおおおおおおおおお
</div>
</div>
現在、新しいコメントを受け付けない設定になっています。
Recent Posts
