div#playListArea{ height: 300px; } /* ボタン同士の間隔 */ #prev, #next, .play, .stop, .answer{ margin-left: 20px; } /* 再生ボタン */ /* 円 */ .play:hover{border:0.1em solid #33FF66;} .play:hover::before{ border-top: 0.4em solid transparent; border-left: 0.6em solid #33ff66; border-bottom: 0.4em solid transparent; } .play { font-size: 70px; position: relative; width: 1.4em; height: 1.4em; border: 0.1em solid #39a9d6; border-radius: 100%; } /* マーク */ .play::before { content: ""; position: absolute; top: 0.20em; left: 0.38em; width: 0; height: 0; border-top: 0.4em solid transparent; border-left: 0.6em solid #39a9d6; border-bottom: 0.4em solid transparent; } /* 停止ボタン */ /* 円 */ .stop:hover {border: 0.1em solid #FF3333 ;} .stop:hover::before {background-color: #FF3333 ;} .stop { font-size: 70px; position: relative; width: 1.4em; height: 1.4em; border: 0.1em solid #39a9d6; border-radius: 100%; } /* マーク */ .stop::before { content: ""; position: absolute; top: 0.25em; left: 0.25em; width: 0.7em; height: 0.7em; background-color: #39a9d6; } /* サビボタン */ /* 円 */ .answer:hover{border: 0.1em solid #FFFF00;} .answer:hover::before{ color: #ffff00;} .answer{ font-size: 70px; position: relative; width: 1.4em; height: 1.4em; border: 0.1em solid #39a9d6; border-radius: 100%; } .answer::before{ content: "♪"; color: #39a9d6; position: absolute; top: -0.2em; left: 0.1em; width: 0.7em; height: 0.7em; } /* テーブル */ .scroll{ overflow: scroll; } table{ border-collapse:separate; border-spacing: 5px; width: 100%; } table th,table td{ border-radius: 5px; text-align: center; padding: 10px 0; } table th{ background-color: #c79852; color: white; border:solid 1px #927141; } table td{ background-color: #e4d4bc; border:solid 1px #af9d85; } td:first-child:hover{ background-color: #FF6666; } table thead th{ /* 縦スクロール時に固定する */ position: -webkit-sticky; position: sticky; top: 0; /* tbody内のセルより手前に表示する */ z-index: 1; } /* 曲名が出てから作者を出すCSS */ .name { position : relative; width: 50%; } .name:hover .balloon { display: inline; /* インライン要素として表示 */ } .balloon { position : absolute; /* 親要素を基準 */ display: none; /* 要素を非表示 */ padding: 1px; /* テキストの前後の余白 */ background-color: rgba(255, 255, 255); /* 背景色(透明度) */ border-radius: 25px 25px 25px 25px; width:150px; /* 吹き出し全体の幅 */ right : -1%; /* 表示位置 */ font-size: 80%; /* 文字サイズ */ } .balloon:after{ border-right: 12px solid rgba(255, 255, 255); /* 吹き出し口の幅・色 */ border-top: 5px solid transparent; /* 吹き出し口の高さ1/2 */ border-bottom: 5px solid transparent; /* 吹き出し口の高さ1/2 */ left: -6px; /* 吹き出し口の位置調整 */ top: 17%; /* 吹き出し口の縦位置 */ content: ""; /* コンテンツの挿入 */ position: absolute; /* 親要素を基準 */ } /* タイトルのwith サイズ */ span.small{font-size: 20px;} /* アイコンみたいなもの */ #hayaosi{ font-size: 15px; position: absolute; top: 2em; left: 28em; width: 1.5em; heigth: 1.3em; border: solid 1.5em #6699ff; } #hayaosi::after{ content:""; position: absolute; width: 3.0em; top : 0.5em; left: -1.5em; border: solid 0.5em #339999; } #hayaosi:hover::before{ border:outset 1.5em #FFFF33;} #hayaosi::before{ content:""; position: absolute; width: -3em; top : -3em; left: -15px; border:outset 1.5em #FF6666; border-top-left-radius:10px; border-top-right-radius:10px; }