CSSnewbleでCSSのみでアコーディオンメニューを作るという面白いアイデアが紹介されていました。特に難しいこともなく簡単な記述でアコーディオンメニューっぽいものを作ることが出来ます。実際にどのような動作をするのかはCSSnewbleでのサンプルを見るとわかると思います。今回はこれをページのレイアウトに利用した全画面バージョンを作ってみました。]]>
使用したhtmlとCSS
<div id="accordion">
<div id="part1"><h1>div#accordion div#part1</h1><p>CSSのみでアコーディオンメニュー</p></div>
<div id="part2"><h2>div#accordion div#part2</h2><p>CSSのみでアコーディオンメニュー</p></div>
<div id="part3"><h3>div#accordion div#part3</h3><p>CSSのみでアコーディオンメニュー</p></div>
<div id="part4"><h4>div#accordion div#part4</h4><p>CSSのみでアコーディオンメニュー</p></div>
<div id="part5"><h5>div#accordion div#part5</h5><p>CSSのみでアコーディオンメニュー</p></div>
</div>
html,body {
height:100%;
margin: 0;
padding: 0;
}
#accordion {
height: 100%;
}
#accordion div {
float:left;
height: 100%;
width: 20%;
overflow: hidden;
}
#accordion:hover div {
width: 5%;
}
#accordion:hover div:hover {
width: 80%;
overflow: auto;
}
通常レイアウトとして全体を5つのdivで分けるので#accordionのwidthで設定している数値（今回は100%）を5分割した20%を#accordion以下のdiv要素全てに設定しておきます。#accordion:hover divで5つのdiv#accordionにマウスが乗った場合5つのdiv要素全てを5%に縮める設定にします。さらに#accordion:hover div:hoverで現在マウスが乗っているdiv要素の大きさを80%に広げます。
hoverの中のhover要素をフォーカスするところがこのアイデアの面白いところだと思います。
この場合の5%や20%は好きな大きさでかまいません。ただしそれぞれを足した数値の合計が#accordion で設定しているwidthと同じ大きさになるようにしないといけません。
注意点としては腐れブラウザであるIE6君は:hoverがaタグ以外対応していませんので、IE6に対応させたい場合はこちらのエントリー（IEでhoverをa以外に効かせる）を参照してください。
]]>
娘の晴子が今月17日で９ヶ月になった。半年過ぎから人見知りが始まって少し落ち着いてきた感があるけどまだまだ知らない人に会うと泣き出す。娘の持つパーソナルゾーンに足を踏み入れると顔を歪め、下唇を突き出して「びぃぃぇええ...」と泣き出す。まだ寝返りもうてないくせに「はいはい」をマスターするという少し変わった成長過程。
そこいらにあるものを片っ端から口に含んで遊ぶ。無造作におもちゃを「ぐわし」と小さな吸盤のようにしっとりした手で掴んで、掴んだものを「ちらっ」と見ることさえせずにおもむろに口に放り込む。そういう仕草全てがギャグに見える。時折こいつはおれを笑わそうとわざとこんな動きをしてるんじゃないかと思うくらい。
なんてか弱い生き物だろうと思う。他の動物ならもう自分で獲物を捕ったり出来そうなのに、人間の赤ん坊は1年経っても生きていくための活動は何も出来ない。これは野生じゃ生き残れないだろJK。だから余計に愛しく感じるのかもしれないな。
ほんの9ヶ月前には居なかった存在の娘が、今ではあたりまえのように家にいる。おそらく自分が死ぬまで付き合うことになるだろう。家を仕事場にしているため、娘の世話に多くの時間を割いている。でもその時間を無駄と思ったことはない。いつのまにか「娘と過ごす時間が無駄だとすれば、この世の他のどんな時間に意味があるんだろう」と思うくらいの存在になっていた。]]>
]]>