ホーム > HTMLサンプル

2014/05/12-2018/06/11

div の表示・非表示のサンプル

目次
  1. CSS のみのサンプル
  2. JavaScript を使用したサンプル

CSS のみのサンプル

JavaScript を使わないサンプル。

TestHTML_css_display_visibility01.html
visibility と display の違い。

TestHTML_div_display_hover01.html
hover で div を表示・非表示。

TestHTML_div_display_focus01.html
focus で div を表示・非表示。
TestHTML_div_display_focus02.html
position:absolute; で指定した位置に div を表示。

position:fixed; でウインドに対して固定位置で表示

固定のメニューやツールパレットの表示など。
関連:CSS position サンプル

TestHTML_div_display_popup01.html

TestHTML_div_display_popup02.html

ul,liを組み合わせたサンプル

ul,liのサンプルも見て。

TestHTML_ul_li_div_focus02.html
li:focus のサンプル。li 内の div をポップアップ表示。

TestHTML_ul_li_div_focus03.html
li:focus のサンプル。li 内の div をポップアップ表示。
div を position:absolute; にして li に対して重ねて表示。

TestHTML_ul_li_div_popup02.html
CSS のみで div をポップアップ表示。年表風。
li:hover を使用した例。

TestHTML_ul_li_div_popup03.html
li:focusを使用した例。

TestHTML_ul_li_div_focus01.html
CSS のみで div を表示。スライド風。
li:focus を使用。

TestHTML_tabpanel_css_focus01.html
CSS のみでタブパネル。
li:focus を使用。

JavaScript を使用したサンプル

TestHTML_div_css_js_display01.html
div の css、display 属性。
block で表示、none で非表示

TestHTML_div_css_js_display02.html
position:absolute; で重ねて表示。
TestHTML_div_popup_window01.html
div でポップアップウインド風の表示。
目次
gorogoronyan@gmail.com
inserted by FC2 system