著作権、知的財産権、IT法務など、コンテンツトラブルの解決・予防を重視する弁護士によるオウンドメディア お問合せは 03ー6915ー8682 か コンタクトフォーム をご利用ください。

  1. コンテンツ制作
  2. 3 view

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

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」(数字は適当です。)という記述で、開閉を滑らかにするのも、ポイントの一つです。気になる方はデジタルコンテンツサイトの最上部の「ナビゲーションを開閉」という表記を、クリックしてみてください。

コンテンツ制作の最近記事

  1. ソラ頭身デジタルグラフィック

  2. 更新情報の統合

  3. テーブルの結合

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

  5. アクリル(クリア)マウント加工

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

関連サイト

オフィスサイト

I2練馬斉藤法律事務所リーガルグラフィック東京のオフィスサイトです。弊所の基幹サイトとなります。

一般法務サイト

コンテンツ法務以外の取り扱い法務を紹介する一般法務サイトです。

オリジナルストーリーサイト

I2練馬斉藤法律事務所リーガルグラフィック東京弁護士齋藤理央が制作するオリジナルストーリーサイトです。コンテンツ制作についても体験をとおして知見を有しているという弊所の特徴を体現するコンテンツであり、そのメイキング記事が当サイトのコンテンツ制作カテゴリの多くを占めるなど、当サイトとも密接に関係したコンテンツサイトとなっています。
PAGE TOP