チェックボックスを利用したアコーディオン式の開閉ナビゲーション

CSSでチェックボックスを利用したアコーディオンタイプのナビゲーションを、ストーリー形式のデジタルコンテンツサイトに実装しています。そのうえスマホ向けのレスポンシブウェブデザインにも対応させていきたいと考えています。

さらに、インターネットエクスプローラーでバグが出て開閉しないとか、IEは今回FIX指定したらガタガタするバグに続き、2つ目のバグでさすがにイライラしてしまいました。この辺りが限界の気もしています。

このチェックボックスを利用したCSSでのDIV要素の開閉というのは、有用そうです。親要素で挟んだ兄弟要素にだけ効くとか、すこしややこしいルールがあるので、あまり複雑な記述にしたくない場合は考え物ですが、やり方を覚えてしまえば汎用性は高そうです。

他に、BOXSHADOWなど、CSSだけでできることはどんどん広がっていて、将来的にもウェブサイトでできる表現というのは進化していくのだと思います。

そうなってくると、ウェブサイトには様々な著作物を観念できるので、著作権関係の紛争も今よりは出てくるのかもしれません。

 div#top_link
{box-shadow: 0em 1em 1em rgba(0,0,0,0.4); z-index: 2;
position: fixed;
top: 0;left:0;overflow:hidden;
width:100%;height:1.5em;background-color:navy; -moz-transition: .4s; -webkit-transition: .49s; -o-transition: .42s; -ms-transition: .492s; transition: .492s;
}
div#close
{background-color:white;width:100%;overflow:hidden;height:1.5em;text-align:center;}div#top_link div
{border-radius:0.2em;  z-index: 7;box-shadow: 1em 1em 1em rgba(100,0,0,0.4); }input:checked ~ div#top_link
{
height:100%;
}

 

div.navi
{width:20%;border:solid 0px;float:left;border-bottom:solid 0px;border-color:lightgray;margin-top:0px;background-color:white;margin-bottom:0px;margin:2%;}

input:checked ~ div#top_link div.navi
{
height:15em;
}

div.navi li
{
list-style-type:none;border:solid 0px;width:100%;height:auto;display: inline;
position: relative;margin:0%;text-align: center ;}

div.navi li:hover
{
list-style-type:none;border:solid 0px;width:100%;height:auto;display: inline;
}

div.navi li a
{display: block;top: 0;
left: 0;
width: 100%;
height: auto;
background-color:white;color:black;
border-radius: 0px;border:solid 0px;padding:0%;border-color:lightgray;}

div.navi li a:hover
{background-color:gray;margin-top:0px;}

div.top_kosin
{
height:0em;
overflow:hidden;}

input:checked ~ div#top_link div.top_kosin
{float:left;
height:14.2em;background-color:white;margin:0.2em;padding:0.2em;
overflow-y:scroll;}

div#site_biz
{
width:20%;height:0em;background-color:white;float: left;margin:2em;
-moz-transition: .4s; -webkit-transition: .49s; -o-transition: .42s; -ms-transition: .492s; transition: .492s;
}
div#site_cont
{
width:20%;height:0em;background-color:orange;float: left;margin:2em;
-moz-transition: .4s; -webkit-transition: .49s; -o-transition: .42s; -ms-transition: .492s; transition: .492s;
}
div#blog
{
width:20%;height:0em;background-color:red;float: left;margin:2em;
-moz-transition: .4s; -webkit-transition: .49s; -o-transition: .42s; -ms-transition: .492s; transition: .492s;
}
div#story
{
width:20%;height:0em;background-color:green;float: left;margin:2em;
-moz-transition: .4s; -webkit-transition: .9s; -o-transition: .4s; -ms-transition: .42s; transition: .4492s;
}

input:checked ~ div#top_link div#site_biz
{
width:20%;height:10em;background-image: url(“http://w-tokyosaito.jp//pict/sitetitle.jpg”);background-size:100% 100%;float: left;position: relative;
}
input:checked ~ div#top_link div#site_biz:hover
{
opacity: 0.8; height:10em;background-size:400% 300%; background-position: -9em -15em;background-repeat: no-repeat;
}
div#site_biz:hover a
{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;}

input:checked ~ div#top_link div#site_cont
{
width:20%;height:10em;background-image: url(“http://w-tokyosaito.jp//pict/sitelogo.jpg”);background-size:100% 100%;float: left;position: relative;
}

input:checked ~ div#top_link div#site_cont:hover
{
opacity: 0.9; height:10em;background-size:180% 180%; background-position: right top;
}

div#site_cont:hover a
{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;}

input:checked ~ div#top_link div#blog
{
width:20%;height:10em;background-image: url(“http://w-tokyosaito.jp//pict/blogtag.jpg”);background-size:100% 100%;float: left;position: relative;
}

input:checked ~ div#top_link div#blog:hover
{
opacity: 0.9; height:10em;background-size:150% 150%; background-position: right bottom;
}

div#blog:hover a
{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;}

input:checked ~ div#top_link div#story
{
width:20%;height:10em;background-image: url(“http://w-tokyosaito.jp//pict/note-tag.jpg”);background-size:100% 100%;float: left;position: relative;
}

input:checked ~ div#top_link div#story:hover
{
opacity: 0.7; height:10em;background-size:250% 250%;
}

div#story:hover a
{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;}

div#navi
{width:20%;border:solid 0px;float:left;border-bottom:solid 0px;border-color:lightgray;margin-top:0px;background-color:white;margin-bottom:0px;margin:2%;}

div#navi li
{
list-style-type:none;border:solid 0px;width:100%;height:auto;display: inline;
position: relative;margin:0%;text-align: center ;}

div#navi li:hover
{
list-style-type:none;border:solid 0px;width:100%;height:auto;display: inline;
}

div#navi li a
{display: block;top: 0;
left: 0;
width: 100%;
height: auto;
background-color:white;color:black;
border-radius: 0px;border:solid 0px;padding:0%;border-color:lightgray;}

div#navi li a:hover
{background-color:gray;margin-top:0px;}

アコーディオン形式のナビゲーションに関係するCSSの記述部です。「input:checked ~ div#top_link」という記述で、heightを0から変化させて、画面に表示されるように工夫しています。「
-moz-transition: .4s; -webkit-transition: .49s; -o-transition: .42s; -ms-transition:
.492s; transition: .492s」(数字は適当です。)という記述で、開閉を滑らかにするのも、ポイントの一つです。気になる方はデジタルコンテンツサイトの最上部の「ナビゲーションを開閉」という表記を、クリックしてみてください。

ウェブサイトを巡る法律問題

弊所ではウェブサイトを巡る法律問題を取り扱っています。ウェブサイトを巡る法律問題については下記をご参照ください。