固定表示目次（ﾌﾟﾗｸﾞｲﾝ「contents」、CSS 使用） - まとめ @ ウィキ

---

目次

目次

題名1

題名2

小題名2-1

編集中入力内容

#divclass(contents_opacity_1){&font(b,150%){目次}}
#divclass(contents_hover){&font(b,150%){目次}
#contents(level=1,fromhere=true)}

CSS記述内容

/* 目次固定表示（プラグイン、js抜き） */
/* ホバー前での表示 */
.contents_hover {
    position: fixed;/* 固定表示化 */
    opacity: .15;/* 半透明化 */
    width: 190px;
    height: 26px;
    top: 124px;
    right: 0;
    padding: 5px;
    border-radius: 4px;
    overflow-y: hidden;
    background-color: #d1d1d1;
    transition-delay: .1s;
    transition-duration: .5s;
    transition-timing-function: ease-in-out;
    z-index: 14;
}
/* ホバー時の表示 */
.contents_hover:hover {
    opacity: 1;
    height: 504px;
    overflow-y: auto;
}
/* ホバー前の「目次」を濃くするため */
.contents_opacity_1 {
    position: fixed;
    opacity: 1;
    width: 190px;
    height: 26px;
    top: 124px;
    right: 0;
    padding: 5px;
    border-radius: 4px;
    background-color: #d1d1d1;
    z-index: 13;
}