CSS保管庫(2020年末)

スポイラー関連

自作のAとB

/*****************************************
自作スポイラー(copypet様をベース)
大きな変更:ラベルのpositionをabsoluteにしている。
splA→標準 splG→グリーンモニタ
splB→幅も伸縮型 splBG→グリーンモニタタイプ
*****************************************/
/* 全体 */
.splA,
.splG{
position: relative;
overflow: hidden;
/*width: 100%;*/
margin:0.1em 1.5vw 1em;
color: #ffffff;
}
/* チェックボックス(非表示) */
.splA input,
.splG input{
position: absolute;
z-index: -1;
opacity: 0;/* 透明にしている */
}
/* クリックするラベル */
.splA label,
.splG label{
position: absolute;/*relativeから変更*/
display:inline-block;/*blockから変更*/
top:0px;left:0px;
margin: 0;
padding:0.3em 1em 0;
border-radius: 0.5em 1em 0 0;
background:#a7b;
font-weight: bold;line-height: 1.1em;
font-size: 1.1em;/*新設*/
letter-spacing: 0.1em;
cursor: pointer;
}

/* ラベル(クリック状態) */
.splA input:checked ~ label,
.splG input:checked ~ label{
background:#a7b5;
transition:0.3s;}

/* 何故か挿入される空の段落対策 */
.splA p,
.splG p{margin:0;}

/* 内容(通常:隠れている状態) */
.splA .content,
.splG .content{
overflow: hidden;
max-height: 0;
margin-top:-0.3em;
padding:0 1em;
-webkit-transition: max-height 0.1s;
transition:0.2s;
color: transparent;
border:solid 2px #8589;
border-radius:0 2em 0.5em 2em;
background: #fff5;
}
/*.splA .content p {
margin: 1em;
}*/

/* 内容(チェックされた状態) */
.splA input:checked ~ .content,
.splG input:checked ~ .content{
max-height: 80em;
padding:0.5em 1em;
border:solid 2px #8582;
color:#333;
transition:border 0.2s ease,color 1.5s;
}

.splA .footer{margin:0;
border-radius:0 0 0.5em 0.5em;
background:#a7b;
padding:0;}

/* グリーンモニタのプロパティ修正 */

.splG{
margin:0 auto;
width: calc(21em + 17vmin);}

.splG .content,
.splG input:checked ~ .content{
color: #7f78;
text-shadow:0px 0px 3px #fff5;
background:repeating-linear-gradient(#000,#000 1px,#353 2px,#353 4px);
transition:0.2s;
}

/* Icon(表示を停止中)
.splA label::after {
line-height: 3;
position: absolute;
top: 0;
right: 0;
display: block;
width: 3em;
height: 3em;
-webkit-transition: all 0.35s;
transition: all 0.35s;
text-align: center;
}
.splA input[type=checkbox] ~ label::after {
content: ‘+’;
}
.splA input[type=checkbox]:checked ~ label::after {
transform: rotate(315deg);
}*/

/*************** バージョンB(Boxになってしまった) **********************/
/* 全体 */
.splB,
.splBG{
position: relative;
overflow: hidden;
/*width: 100%;*/
margin:0em 1.5vw 1em;
color: #ffffff;
}
/* チェックボックス(非表示) */
.splB input,
.splBG input{
position: absolute;
z-index: -1;
opacity: 0;/* 透明にしている */
}
/* クリックするラベル */
.splB label,
.splBG label{
position: relative;
display:block;
width:65%;
top:0px;left:0px;
margin: 0 auto;
padding:0.3em 1em 0;
border-radius: 0.5em 1em 0 0;
background:#a7b;
font-weight: bold;line-height: 1.1em;
font-size: 1.1em;/*新設*/
letter-spacing: 0.1em;
cursor: pointer;
transition:0.3s;
}

/* ラベル(クリック状態) */
.splB input:checked ~ label,
.splBG input:checked ~ label{width:100%;
opacity:0.3;
transition:0.3s;}

/* 何故か挿入される空の段落対策 */
.splB p,
.splBG p{margin:0;}

/* 内容(通常:隠れている状態) */
.splB .content,
.splBG .content{
width:65%;
margin:0 auto;
overflow: hidden;
max-height: 0.5em;
padding:0 1em;
-webkit-transition: max-height 0.1s;
transition:0.3s;
color: transparent;
border:solid 2px #8589;
/*border-radius:0 2em 0.5em 2em;*/
background: #fff5;
}
/*.splB .content p {
margin: 1em;
}*/

/* 内容(チェックされた状態) */
.splB input:checked ~ .content,
.splBG input:checked ~ .content{
width:100%;
max-height: 100em;
padding:0.5em 1em;
border:solid 2px #8582;
color:#333;
transition:0.3s;
}

/* フッター */
.splB .footer,
.splBG .footer{height:0.5em;width:65%;
margin:0 auto;
border-radius:0 0 0.5em 1em;
background:#a7b;
padding:0;
transition:0.3s;}

.splB input:checked ~ .footer,
.splBG input:checked ~ .footer{opacity:0.3;width:100%;
transition:0.3s;}

/* マーク */
.splB label::after,
.splBG label::after{position: absolute;
display: block;
top: 0.3em;right:0.5em;
background:#0003;
border-radius:50%;
transition: all 0.3s;
text-align: right;
width:1em;height:0.8em;line-height:0.9em;
}

.splB input ~ label::after,
.splBG input ~ label::after{
text-align:center;
color:#fffb;
content: ‘≪’;
font-size:1.1em;
transform: rotate(-90deg) scaleY(1.4);
}
.splB input:checked ~ label::after,
.splBG input:checked ~ label::after{
right:50%;
transform: rotate(1170deg) scaleY(1.4);
}

/* グリーンモニタのプロパティ修正 */
.splBG label,
.splBG .footer{background:#9a9;}

.splBG .content,
.splBG input:checked ~ .content{
color: #7f78;
text-shadow:0px 0px 3px #fff5;
background:repeating-linear-gradient(#000,#000 1px,#353 2px,#353 4px);
transition:0.3s;
}

参考にしたもの

/************************************
** アコーディオン自作
**********************************/

/* コビトブログ様のアコーディオン */
.ac-container{
width: auto;
margin: 30px auto;
}
.ac-container label{
width: 300px;
text-align: center;
background: #ff9b9b;
margin: auto;
padding: 10px 5px;
position: relative;
display: block;
height: 40px;
cursor: pointer;
color: #fff;
}
.ac-container label:hover{
background: rgba( 255, 155, 155, 0.55 );
-webkit-transition: all .3s;
transition: all .3s;
}
.ac-container label:after{
color: #fff;
font-family:”FontAwesome”;
content:”\f067″;
}
.ac-container input:checked ~ label::after {
color: #fff;
font-family:”FontAwesome”;
content:”\f068″;
}
.ac-container input{
display: none;
}
.ac-container div{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
transition:
height 0.3s ease-in-out,
box-shadow 0.6s linear;
}
.ac-container input:checked ~ div{
transition:
height 0.5s ease-in-out,
box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container div p{
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
}
/* 高さの定義 */
.ac-container input:checked ~ div.ac-small{
height: 150px;
}
.ac-container input:checked ~ div.ac-medium{
height: 200px;
}
.ac-container input:checked ~ div.ac-large{
height: 300px;
}

/***** Copypet様のアコーディオン *****/
/* 全体 */
.cp_actab {
position: relative;
overflow: hidden;
/*width: 100%;*/
margin:0.1em 2.5vw 1em;
color: #ffffff;
}
/* チェックボックス(非表示) */
.cp_actab input {
position: absolute;
z-index: -1;
opacity: 0;/* 透明にしている */
}
/* クリックするラベル */
.cp_actab label {
position: absolute;/*relativeから変更*/
display:inline-block;/*blockから変更*/
top:0px;left:0px;
margin: 0; padding: 3px 1em;/*変更*/
padding:0.3em 1em 0 0.5em;
border-radius: 0.5em 1em 0 0;
background:#a7b;
font-weight: bold;line-height: 1.1em;
font-size: 1.1em;/*新設*/
letter-spacing: 0.1em;
cursor: pointer;
}

/* ラベル(クリック状態)動作せず… */
.cp_actab input:checked ~ .cp_actab label{background:#a7b8:color:red;}

/* 何故か挿入される空の段落対策 */
.cp_actab p{margin:0;}

/* 内容(通常:隠れている状態) */
.cp_actab .cp_actab-content {
overflow: hidden;
max-height: 0;
margin-top:-0.3em;
-webkit-transition: max-height 0.1s;
transition:0.2s;
color: #333333;
border:solid 2px #8589;
border-radius:0 2em 0.5em 2em;
background: #fff5;
}
/*.cp_actab .cp_actab-content p {
margin: 1em;
}*/

/* 内容(チェックされた状態) */
.cp_actab input:checked ~ .cp_actab-content {
max-height: 30em;
border:solid 2px #8583;
transition:0.2s ease;
}

/* Icon */
.cp_actab label::after {
line-height: 3;
position: absolute;
top: 0;
right: 0;
display: block;
width: 3em;
height: 3em;
-webkit-transition: all 0.35s;
transition: all 0.35s;
text-align: center;
}
.cp_actab input[type=checkbox] + label::after {
content: ‘+’;
}
.cp_actab input[type=checkbox]:checked + label::after {
transform: rotate(315deg);
}

/*サルワカさんのアコーディオン*/
/*ボックス全体*/
.accbox {
margin: 2em 0;
padding: 0;
max-width: 400px;/*最大幅*/
}

/*ラベル*/
.accbox label {
display: block;
margin: 1.5px 0;
padding : 11px 12px;
color :#2f8fcf;
font-weight: bold;
background :#a4cbf3;
cursor :pointer;
transition: all 0.5s;
}

/*ラベルホバー時*/
.accbox label:hover {
background :#85baef;
}

/*チェックは隠す*/
.accbox input {
display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked ~ .accshow {
height: auto;
padding: 5px;
background: #eaeaea;
opacity: 1;
}

/** detail使用のアコーディオン **/
summary {
cursor: pointer;
outline:none;
}
.DTL1{/* 第一階層 */
margin:0px;
}
.DTL2{ /* 第二階層以下 */
margin:5px;
}

.DTL1 p,.DTL2 p{/* 中の段落書式 */
margin: 0; padding: 15px;
}

タイトルとURLをコピーしました