文章スッキリまとめます→ accordion
IEでも角丸を表示できる→ CSS3PIE
現在最も人気のあるライブラリ→ jQuery
収納スペースとしてリスト表示<ul><li>を使います。
<ul class="accordion" id="vertical">
<li class="slide-01">
<div>
<h2>
title1</h2>
<p>
ココに文章</p>
</div>
</li>
<li class="slide-02">
<div>
<h2>
title2</h2>
<p>
ココに文章</p>
</div>
</li>
<li class="slide-03">
<div>
<h2>
title3</h2>
<p>
ココに文章</p>
</div>
</li>
<li class="slide-04">
<div>
<h2>
title4</h2>
<p>
ココに文章</p>
</div>
</li>
<li class="slide-05">
<div>
<h2>
title5</h2>
<p>
ココに文章</p>
</div>
</li>
</ul>
マウスカーソルを合わせると広がります(60%の大きさ)
他の文章はそのあいだ縮んでいます(10%の大きさ)
#vertical{
height:100px;
}
#vertical li{
overflow:hidden;
float:none;
height:20%;
width:100%;
-webkit-transition:height 0.2s ease-out;
transition:height 0.2s ease-out;
}
#vertical li:first-of-type{
-webkit-border-radius:10px 10px 0 0;
border-radius:10px 10px 0 0;
}
#vertical li:last-of-type{
-webkit-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
}
#vertical:hover li{
height:10%;
width:100%;
}
#vertical li:hover{
height:60%;
width:100%;
}
.slide-01{
background:red; color:white;
}
.slide-02{
background:orange; color:white;
}
.slide-03{
background:yellow; color:#333; text-shadow:none;
}
.slide-04{
background:green; color:white;
}
.slide-05{
background:blue; color:white;
}
ここ↓からファイルをダウンロードして作業フォルダへ
https://github.com/lojjic/PIE/downloads
border-radiusの後ろに1行behavior: url(PIE.htc);を加えるだけ！
.box1{
border:solid 1px gray;
width:100px;
height:50px;
border-radius:10px;
behavior: url(PIE.htc);
}
IEでも角が丸い
head要素のjavascript呼び出しも不要。作業フォルダにいれるだけです。
jQuery(ジェイクエリー)はブラウザごとの挙動の違いを吸収してくれる、
いわば翻訳機なようなもの。
Javascriptと比べて非常に短いコードで済むようです。
勉強中
