CSSリスト

■見出しh1

■見出しh2

h2 {color:#fff;
font-size:1rem!important;padding:0.8rem 0.5rem 1rem!important;margin:1rem 0 1rem 0!important;
background: linear-gradient(
-45deg,
#111 25%, #333 25%,
#333 50%, #111 50%,
#111 75%, #333 75%,
#333
);
background-size: 5px 5px;
border-top:0;
border-bottom:0.1rem solid #d11365;
border-left:5px solid #d11365;
border-right:0 solid #d11365;}

■見出しh3

h3 {
font-size:0.9rem!important;
color:#fff;
padding:0.5rem 0.5rem 0.3rem !important;margin:0 0 0.6rem!important;
border-left:none!important;
border-bottom: 0.18rem solid #f29066!important;
background: #262522!important;
}

■見出しh4

h4{font-size:0.9rem!important;background:#ffefe8;border-top:none!important;border-bottom:solid 1px #cfcfcf!important; border-left:solid 5px #d43820!important;padding:0.4rem 0.5rem 0.2rem!important;margin:0rem 0 1rem!important;}

h4:first-letter{font-size:1.2rem;color:#cf1c00;letter-spacing:0.1rem;}

■見出し

.midashi{font-size:0.9rem;padding:0.45rem 0.5rem 0.3rem 0.25rem;background:#fadec3;font-weight:bold;color:#333;border:solid 1px #cfcfcf;margin:0 0 1rem;}

.mark{color:#fff;background:#d17924!important;padding:0.3rem 1.6rem 0.1rem;border-radius:0.8rem;margin:0 0.8rem 0 0;}

.under-arrow {
position: relative;
padding-left:0.5rem;

}

/* 背景の表示設定 */
.under-arrow::before {
content: “”;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 4px;
width: 1.1rem; /* 横幅 */
height: 1.1rem; /* 高さ */
border-radius: 50%; /* 角の丸み */
background: #fff;
}

/* くの字の表示設定 */
.under-arrow::after {
content: “”;
position: absolute;
margin: auto;
top: 3px;;
bottom: 0px;
right: 7px;
width: 10px;
height: 9px;
border-top: 2px solid #333;
border-right: 2px solid #333;
transform: rotate(133deg);

}

■table関連

th{background:#ffce2e!important;border:solid 1px #cfcfcf!important;}

td{text-align:center;}

■ul関連/ストライプ斜線

ul{background: linear-gradient(
-45deg,
#fff 25%, #fff4e3 25%,
#fff4e3 50%, #fff 50%,
#fff 75%, #fff4e3 75%,
#fff4e3
);
background-size: 0.5rem 0.5rem;
padding:1rem;
margin:0 0 1rem 0!important;
border:solid 1px #ccc;
}

li{margin:0.1rem 0.5rem 1rem!important;font-weight:bold;font-size:0.9rem;text-decoration:underline;
list-style:square;color:}

li:last-child{margin-bottom:0!important;}

■ol関連

■dl関連/ストライプ斜線

dl{
background: linear-gradient(
-45deg,
#fff 25%, #fff4e3 25%,
#fff4e3 50%, #fff 50%,
#fff 75%, #fff4e3 75%,
#fff4e3
);
background-size: 0.5rem 0.5rem;
padding:1rem;
margin:0 0 1rem 0!important;
border:solid 1px #ccc;

}
dt{font-weight:bold;border-bottom:solid 1px #333;margin-bottom:0.5rem;}

dt::first-letter{color:#2b0abf;}

dd{margin:0 0 1.5rem 0!important}

dd:last-child{margin-bottom:0!important;}

dd::first-letter{color:#e00034;font-weight:bold;}

■口コミ関連

.kuchikomi{background: linear-gradient(
-45deg,
#fff 25%, #ffece8 25%,
#ffece8 50%, #fff 50%,
#fff 75%, #ffece8 75%,
#ffece8
);
background-size: 0.3rem 0.3rem;
padding:0rem 0.8rem;
margin:1rem 0 1.5rem!important;
border:solid 1px #ccc;
}

■ボタン関連

.button{
text-align:center;font-size:1.8rem!important;
font-weight: bold;
padding: 1rem 0px;
margin:0 0 2rem!important;
border-radius: 50px;
font-size:18px;
background-color: #00a41a;
color:white;
text-shadow: 1px 1px 0px rgb(0,0,0,0.3);
box-shadow: 0 3px 0 rgb(0,0,0,0.3);
border:solid 1px #cfcfcf;
animation: button 3s infinite;
}

@keyframes button {
0% {transform: translate(0px, 2px);}
5% {transform: translate(0px, -2px);}
10% {transform: translate(0px, 2px);}
15% {transform: translate(0px, -2px);}
20% {transform: translate(0px, 2px);}
25% {transform: translate(0px, -2px);}
30% {transform: translate(0px, 0px);}
}

.button a{color:#fff!important;text-decoration:none!important;}

a:hover .button-simple{
background-color:#cc0000;
box-shadow: 0 0px 0 rgb(0,0,0,0.3);
animation-play-state: paused;
top:3px;
}

■hr関連
hr{padding-bottom:1rem!important;border:none;border-top:solid 1px #ccc;}