装飾
タイトル
下線中央
position: relative;で調整
あのイーハトーヴォ
display: grid;
.deco_02 {
font-size: 23px;
display: grid;
grid-template-rows: 1fr auto;
justify-items: center;
text-align: center;
gap: 2px;
&::after {
content: "";
display: inline-block;
width: 50px;
height: 3px;
background: #47925a;
}
}.deco_01 {
font-size: 23px;
text-align: center;
position: relative;
&::after {
content: "";
position: absolute;
left: 50%;
bottom: -9px;
display: inline-block;
width: 50px;
height: 3px;
transform: translateX(-50%);
background: #47925a;
}
}下線左
display: grid;で調整
あのイーハトーヴォ
.deco_13 {
font-size: 23px;
display: grid;
gap: 0.2em;
&::after {
content: "";
display: inline-block;
width: 50px;
height: 3px;
background: #47925a;
}
}2色下線
あのイーハトーヴォ
センター版
.deco_04 {
......
&::after {
......
left: 50%;
transform: translateX(-50%);
}
}あのイーハトーヴォ
.deco_03 {
font-size: 20px;
border-bottom: solid 3px #47925a;
position: relative;
padding-bottom: 0.3em;
&::after {
position: absolute;
content: "";
display: inline-block;
border-bottom: solid 3px #f40;
left: 0;
bottom: -3px;
width: 9em;
}
}左右に線
あのイーハトーヴォ
2重線
.deco_12 {
.....
&::before,
&::after {
.....
border-top: 1px solid #47925a;
border-bottom: 1px solid #47925a;
}
.....
}あのイーハトーヴォ
.deco_05 {
font-size: 20px;
display: flex;
align-items: center;
text-align: center;
&::before,
&::after {
content: "";
display: inline-block;
flex-grow: 1;
height: 3px;
background: #47925a;
}
&::before {
margin-right: 1em;
}
&::after {
margin-left: 1em;
}
}本文
マーカー
background: linear-gradient
要確認 : MAC/WINDOWSで違って見える場合あり
あのイーハトーヴォ
text-decoration
text-underline-offset: をマイナス値にすると英語が切れて見えない場合は、text-decoration-skip-ink: none;で対応
text-decoration-styleは他に
波線 : wavy; 、二重線 : double; 、破線 : dashed; 、点線 : dotted;
あのイーハトーヴォ
.deco_06 {
background: linear-gradient(transparent 60%, #b6f4c5 0%);
padding: 0 2px 3px;
display: inline;
}
.deco_07 {
text-decoration-line: underline;
text-decoration-thickness: 0.4em;
text-decoration-color: #b6f4c5;
text-underline-offset: -3px;
text-decoration-skip-ink: none;
}文頭修飾
横線で装飾
親譲りの無鉄砲で小供の時から損ばかりしている。
.deco_08 {
display: grid;
grid-template-columns: 2em auto;
gap: 0.4em;
&::before {
content: "";
display: inline-block;
width: 2em;
height: 0.1em;
margin-top: 0.43lh;
background: #47925a;
}
}縦線で装飾
height:指定が効かない場合
親要素の高さ（bodyやhtml要素など）にheight: 100% or 100vhを指定
親譲りの無鉄砲で小供の時から損ばかりしている。
.deco_09 {
border-left: 2px solid #47925a;
padding-left: 1em;
margin-inline: auto;
}縦線で装飾 面合わせ
文章の上面下面を面合わせしたVer.
親譲りの無鉄砲で小供の時から損ばかりしている。親譲りの無鉄砲で小供の時から損ばかりしている。
.deco_10 {
display: grid;
grid-template-columns: 2px 1fr;
gap: 1em;
&::before {
content: "";
display: inline-block;
background-image: linear-gradient(transparent 0.2lh, #47925a 0.2lh calc(100% - 0.2lh), transparent calc(100% - 0.2lh) 100%);
}
}下線修飾
あのイーハトーヴォ
グラデーション
.deco_14 {
font-size: 23px;
display: grid;
gap: 0.2em;
&::after {
content: "";
display: inline-block;
width: 100%;
height: 3px;
background: linear-gradient(to left, #47925a, #eee 50%, transparent 75%, #47925a 75%);
}
}あのイーハトーヴォ
.deco_11 {
font-size: 20px;
position: relative;
padding-bottom: 1rem;
text-align: center;
&::before,
&::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
backface-visibility: hidden;
}
&::before {
background: repeating-linear-gradient(30deg, #47925a 0, transparent 1px, transparent 7px);
}
&::after {
background: repeating-linear-gradient(135deg, #47925a 0, transparent 1px, transparent 7px);
}
}リボン
文頭にリボン装飾
あのイーハトーヴォ
.deco_15 {
font-size: 23px;
position: relative;
padding: 0.4em 2em;
overflow: hidden;
background: #47925a;
color: #fff;
&::before,
&::after {
content: "";
position: absolute;
top: -1px;
left: 0.4em;
width: 1em;
height: 40%;
background: #fff;
}
&::before {
transform: skewY(35deg);
}
&::after {
transform: skewY(-35deg);
}
}親譲りの無鉄砲で
で小供の時から損ばかりしている。親譲りの無鉄砲で小供の時から損ばかりしている。親譲りの無鉄砲で小供の時から損ばかりしている。親譲りの無鉄砲で小供の時から損ばかりしている。
<div class="deco_16"><span>親譲りの無鉄砲で</span></div>
<div class="deco_16_wrap">
<p>で小供の時から損ばかりしている。親譲りの無鉄砲で小供の時から損ばかりしている。親譲りの無鉄砲で小供の時から損ばかりしている。親譲りの無鉄砲で小供の時から損ばかりしている。</p>
</div>.deco_16_wrap {
background: #e1ece4;
width: 700px;
margin-top: -120px;
margin-inline: auto;
border-radius: 10px;
padding: 2em;
& p {
padding-top: 110px;
}
}
.deco_16 {
font-size: 23px;
position: relative;
text-align: center;
filter: drop-shadow(0 3px 1px rgba(53, 113, 68, 0.333));
&::before,
&::after {
content: "";
position: absolute;
bottom: -10px;
display: inline-block;
border: 1lh solid #2e7941;
z-index: 2;
}
&::before {
left: -35px;
border-left-width: 15px;
border-left-color: transparent;
}
&::after {
right: -35px;
border-right-width: 15px;
border-right-color: transparent;
}
& span {
position: relative;
z-index: 3;
display: block;
padding: 1em;
color: #fff;
background: #47925a;
&::before,
&::after {
content: "";
position: absolute;
bottom: -10px;
display: block;
width: 6px;
border-style: solid;
border-color: #064716 transparent transparent transparent;
}
&::before {
left: 0;
border-width: 10px 0 0 10px;
}
&::after {
right: 0;
border-width: 10px 10px 0 0;
}
}
}文頭にNEWマーク
あのイーハトーヴォ
.deco_18 {
position: relative;
padding: 1em 2em 1em 3.5em;
background: #e1ece4;
width: fit-content;
&::before {
content: "";
position: absolute;
top: calc(50% + 15px);
left: -14px;
border: none;
border-bottom: 7px solid transparent;
border-right: 14px solid #064716;
}
&::after {
content: "NEW";
font-size: 14px;
position: absolute;
top: 50%;
left: -14px;
padding: 5px 1em;
background-color: #47925a;
color: #fff;
transform: translateY(-50%);
}
}バルーン
clip-path
deco_19
拡張性が低いので文字数決定場所などの使用場所を選ぶ
親譲りの無鉄砲で
下線 + 下三角
deco_20
親譲りの無鉄砲で
斜線 + 斜線
deco_21
親譲りの無鉄砲で
吹き出し
deco_22
親譲りの無鉄砲で
罫線付き
deco_23
親譲りの無鉄砲で
.deco_19 {
clip-path: polygon(0 80%, 0 0, 100% 0, 100% 80%, 45% 80%, 25% 100%, 25% 80%);
background: #47925a;
width: fit-content;
height: 3em;
padding: 1em 1em 0.5em 1em;
color: #fff;
}
.deco_20 {
position: relative;
width: fit-content;
padding: 0.5em;
border-bottom: 2px solid #47925a;
&::before,
&::after {
content: "";
position: absolute;
left: 50%;
width: 20px;
height: 12px;
translate: -50%;
clip-path: polygon(0 0, 50% 100%, 100% 0);
}
&::before {
bottom: -9px;
background: #fff;
}
&::after {
bottom: -12px;
z-index: -1;
background: #47925a;
}
}
.deco_21 {
display: flex;
justify-content: center;
align-items: center;
gap: 1em;
padding-inline: 1em;
&::before,
&::after {
content: "";
width: 2em;
height: 2px;
background: #47925a;
}
&::before {
rotate: 60deg;
}
&::after {
rotate: -60deg;
}
}
.deco_22 {
background: #47925a;
color: #fff;
padding: 1em 2em;
position: relative;
width: fit-content;
border-radius: 10px;
&::before {
content: "";
position: absolute;
display: block;
left: -14px;
bottom: -8px;
border: 12px solid transparent;
border-right: 24px solid #47925a;
border-left: none;
rotate: -35deg;
}
}
.deco_23 {
background: #dde9e0;
padding: 1em 2em;
position: relative;
width: fit-content;
border-radius: 10px;
border: 2px solid #2e7941;
&::before,
&::after {
content: "";
position: absolute;
}
&::before {
right: -1em;
top: 10px;
border: 8px solid transparent;
border-left: 1em solid #47925a;
border-right: none;
}
&::after {
right: calc(-1em + 4px);
top: 10px;
border: 8px solid transparent;
border-left: 1em solid #dde9e0;
border-right: none;
}
}ステップバー
Flow
<ul class="step_bar">
<li class="here">Step 1</li>
<li>Sean 2</li>
<li>Step 3</li>
<li>Step 4</li>
</ul>.step_bar {
display: grid;
width: 100%;
background: #47925a;
gap: 1px;
border: 1px solid #47925a;
@media (48.1em <= width) {
grid-template-columns: repeat(4, 1fr);
}
& li {
height: 4em;
background: #eee;
display: grid;
place-content: center;
position: relative;
&::before,
&::after {
content: "";
display: inline-block;
position: absolute;
background: #eee;
}
&::before {
background: #47925a;
}
@media (48em >= width) {
&::before,
&::after {
left: 50%;
bottom: -9px;
height: 10px;
width: min(8vw, 32px);
clip-path: polygon(0 0, 100% 0, 50% 100%);
transform: translateX(-50%);
z-index: 2;
}
&::before {
bottom: -10px;
}
}
@media (48.1em <= width) {
&::before,
&::after {
top: 0;
right: -20px;
height: 4em;
width: 20px;
clip-path: polygon(0 0, 100% 50%, 0 100%);
z-index: 2;
}
&::before {
right: -21px;
}
}
&:last-of-type {
&::before,
&::after {
content: none;
}
}
&.here {
background: #47925a;
color: #fff;
&::after {
background: #47925a;
}
}
}
}History
<ul class="step_bar2">
<li class="deco_24"><span>2025.12</span>親譲りの無鉄砲で小供の時から損ばかりしている。</li>
<li class="deco_24"><span>2024.11</span>親譲りの無鉄砲で小供の時から損ばかりしている。親譲りの無鉄砲で小供の時から損ばかりしている。親譲りの無鉄砲で小供の時から損ばかりしている。</li>
<li class="deco_24"><span>2024.08</span>親譲りの無鉄砲で</li>
</ul>.step_bar2 {
margin-top: 5em;
border-left: 2px solid #47925a;
padding-block: 10px 60px;
margin-left: 128px;
@media (48em >= width) {
margin-left: 0;
}
.deco_24 {
position: relative;
width: fit-content;
padding: 2em 1em 0.5em;
margin-left: 22px;
border-bottom: 2px solid #47925a;
@media (48em >= width) {
padding-right: 0;
}
&::before,
&::after {
content: "";
position: absolute;
background: #47925a;
}
&::before {
left: -29px;
bottom: -14px;
width: 35px;
height: 2px;
rotate: 135deg;
}
&::after {
left: -28px;
bottom: -30px;
width: 10px;
height: 10px;
border-radius: 50%;
}
& span {
position: absolute;
left: -146px;
bottom: -46px;
font-size: 29px;
font-family: cursive;
color: #777;
@media (48em >= width) {
position: inherit;
left: 0;
bottom: 0;
display: block;
}
}
}
}
