RSC通信

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

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

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

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

他に、ＢＯＸＳＨＡＤＯＷなど、ＣＳＳだけでできることはどんどん広がっていて、将来的にもウェブサイトでできる表現というのは進化していくのだと思います。

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

 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;}

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

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

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

ウェブサイト関連法務

カテゴリー