文字装飾

小技をBLOGに集結！

html＋css

マーカー

黄色マーカー

赤色マーカー

青色マーカー

html

<span class="marker">黄色マーカー</span>
<span class="marker-red">赤色マーカー</span>
<span class="marker-blue">青色マーカー</span>

黄色マーカー

赤色マーカー

青色マーカー

CSS

/*マーカーの黄色のような色*/
.marker {
  background-color: #ff9;
}

.marker-red {
  background-color: #ffd0d1;
}

.marker-blue {
  background-color: #a5d7f9;
}

/*マーカーの黄色のような色*/

.marker {

background-color: #ff9;

}

.marker-red {

background-color: #ffd0d1;

}

.marker-blue {

background-color: #a5d7f9;

}

アンダーラインマーカー

黄色アンダーラインマーカー

赤色アンダーラインマーカー

青色アンダーラインマーカー

html

<span class="marker-under">黄色アンダーラインマーカー</span>
<span class="marker-under-red">赤色アンダーラインマーカー</span>
<span class="marker-under-blue">青色アンダーラインマーカー</span>

黄色アンダーラインマーカー

赤色アンダーラインマーカー

青色アンダーラインマーカー

CSS

/*下半分のマーカー色（km）*/
.marker-under {
  background: linear-gradient(transparent 60%, #ff6 60%);
}

.marker-under-red {
  background: linear-gradient(transparent 60%, #ffb6b9 60%);
}

.marker-under-blue {
  background: linear-gradient(transparent 60%, #a8dafb 60%);
}