実装済みのCSS一覧

/*バルーン機能(仮)*/

.balloon_ex {
position: relative;
}
.balloon_text_ex {
position: absolute;
width: 200px;
padding: 4px;
font-size: 12px;
margin-left: 4px;
line-height: 1.6;
bottom: 1em;
left: 0;
background-color: #ffffff;
border: solid 1px black;
opacity: 0.0;
visibility: hidden;
transition: opacity 0.5s ease-in-out;
}
.balloon_ex:hover .balloon_text_ex {
opacity: 0.8;
visibility: visible;
z-index: 100;
}

/*脚注エリア生成*/

div.footnote_ex {
background-color: #efebdd;
font-size: 80%;
margin: 0.1em !important;
padding: 5px 5px 5px 5px !important;
}

/*カーソル時に透過*/

.clear_ex{
}
.clear_ex:hover{
opacity: 0.6;
}

/*カーソル時に出現*/

.appear_ex{
opacity: 0;
}
.appear_ex:hover{
opacity: 1;
}

/*カーソル時に消失*/

.disappear_ex{
  opacity: 1;
}
.disappear_ex:hover{
  opacity: 0;
}

/*クリック時に出現*/

.click_appear_ex{
opacity: 0;
}
.click_appear_ex:active{
opacity: 1;
}

/*クリック時に消失*/

.click_disappear_ex{
opacity: 1;
}
.click_disappear_ex:active{
opacity: 0;
}

/*要素配置を絶対位置化*/

.absolute_ex{
position: absolute;
left: 0px;
top: 0px;
}

/*要素配置を相対位置化*/

.relative_ex{
position: relative;
}

/*レイヤー構造の優先度*/

.high_priority_ex{
z-index: 70;
}
.mid_high_priority_ex{
z-index: 60;
}
.mid_priority_ex{
z-index: 50;
}
.mid_low_priority_ex{
z-index: 40;
}
.low_priority_ex{
z-index: 30;
}

/*画像三段切替*/

.img_switch_ex{
position: relative;
}
.img_switch_ex .img_switch_normal_ex{
position: absolute;
opacity: 1;
}
.img_switch_ex:hover .img_switch_normal_ex{
opacity: 0;
}
.img_switch_ex:active .img_switch_normal_ex{
opacity: 0;
}
.img_switch_ex .img_switch_hover_ex{
position: absolute;
opacity: 0;
}
.img_switch_ex:hover .img_switch_hover_ex{
opacity: 1;
}
.img_switch_ex:active .img_switch_hover_ex{
opacity: 0;
}
.img_switch_ex .img_switch_click_ex{
position: relative;
opacity: 0;
}
.img_switch_ex:hover .img_switch_click_ex{
opacity: 0;
}
.img_switch_ex:active .img_switch_click_ex{
opacity: 1;
}

/*変化をスローモーション化*/

.slow_motion_ex{
transition: all 0.5s ease;
}

/*リンク先ハイライト表示*/

.link_target_ex:target{
background-color: gold;
}
.link_target_ex:target::before {
content: attr(data-link-target-before-ex);
margin-right: .25em;
}
.link_target_ex:target::after {
content: attr(data-link-target-after-ex);
margin-left: .25em;
}

/*モーダルウィンドウ(参考://web-accountbook.com/index.aspx?page=2013080669)*/

.modal_window_ex{
    height: 100%;
    width: 100%;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999;
  opacity: 0.0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out;
}
.modal_window_ex:target {
  display:table;
  opacity: 1.0;
  visibility: visible;
}
.modal_window_close_ex {
  display: table-cell;
position: absolute;
  background-color:#FFF;
  right: 0;
  top: 0;
}
.modal_window_bg_ex{
  display:inline-block;
  background-color:#FFF;
  padding:10px;
position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  border-radius: 10px;
    height: auto;
    width: auto;
    max-width: 90%;
    max-height: 90%;
    margin: auto;
overflow: auto;
}
.modal_window_open_ex{
  max-height:180px;
  max-width:180px;
}

/*トップに戻るボタン*/

.return_to_top_ex{
position: fixed;
right: 50px;
bottom: 0;
z-index: 990;
}