CSSマーカー・蛍光ペン下線で文字を強調するコピペ集

/* 基本の蛍光ペン風マーカー（黄色） */
.marker-yellow {
  background: linear-gradient(transparent 60%, #ffff00 60%);
  padding: 0 2px;
}

/* 使い方：任意の % で開始位置を調整 */
/* 60% から始まれば、下40%に色帯が入る */
/* 50% にすれば文字の中央から下に色帯 */
/* 75% にすれば細い下線的なマーカーになる */

<p>この文章の<span class="marker-yellow">重要な部分</span>にマーカーを引きます。</p>

.marker-yellow {
  background: linear-gradient(transparent 55%, #ffff4d 55%);
  padding: 0 2px;
}

.marker-pink {
  background: linear-gradient(transparent 55%, #ffb3c1 55%);
  padding: 0 2px;
}

/* 濃いピンク（ブランドカラー寄り） */
.marker-hotpink {
  background: linear-gradient(transparent 55%, #EFBDB7 55%);
  padding: 0 2px;
}

.marker-blue {
  background: linear-gradient(transparent 55%, #b3e0ff 55%);
  padding: 0 2px;
}

/* ネオンブルー */
.marker-neonblue {
  background: linear-gradient(transparent 55%, #00d4ff 55%);
  padding: 0 2px;
}

.marker-green {
  background: linear-gradient(transparent 55%, #b3f0c8 55%);
  padding: 0 2px;
}

/* 蛍光グリーン */
.marker-lime {
  background: linear-gradient(transparent 55%, #ccff66 55%);
  padding: 0 2px;
}

.marker-orange {
  background: linear-gradient(transparent 55%, #ffd699 55%);
  padding: 0 2px;
}

.marker-thick-yellow {
  background: linear-gradient(transparent 45%, rgba(255, 255, 0, 0.6) 45%);
  padding: 0 3px;
}

/* 半透明（文字が透けて見える） */
.marker-semi-pink {
  background: linear-gradient(transparent 50%, rgba(255, 100, 150, 0.35) 50%);
  padding: 0 2px;
}

.marker-thin {
  background: linear-gradient(transparent 80%, #ffcc00 80%);
  padding: 0 2px;
}

/* 極細（最下部だけ） */
.marker-ultra-thin {
  background: linear-gradient(transparent 90%, #ff6666 90%);
  padding: 0 1px;
}

/* 複数行対応のマーカー */
.marker-multiline {
  background: linear-gradient(transparent 55%, #ffff4d 55%);
  padding: 0 4px;
  /* 各行に独立してスタイルを適用 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 1.8;
}

/* 複数行対応・ピンク版 */
.marker-multiline-pink {
  background: linear-gradient(transparent 55%, #EFBDB7 55%);
  padding: 0 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 左右にpadding大きめ（重なりを防ぐ） */
.marker-multiline-spacious {
  background: linear-gradient(transparent 60%, rgba(255, 255, 0, 0.7) 60%);
  padding: 2px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

<p>
  <span class="marker-multiline">
    このように長いテキストが複数行にわたる場合でも、
    box-decoration-break: clone を指定することで
    各行にマーカーが連続して引かれます。
  </span>
</p>

/* ホバー時にマーカーが引かれるアニメーション */
.marker-animate {
  background: linear-gradient(#ffff4d, #ffff4d) no-repeat;
  background-size: 0% 40%;
  background-position: 0 85%;
  transition: background-size 0.4s ease;
  padding: 0 2px;
}

.marker-animate:hover {
  background-size: 100% 40%;
}

/* ピンク版アニメーション */
.marker-animate-pink {
  background: linear-gradient(#EFBDB7, #EFBDB7) no-repeat;
  background-size: 0% 40%;
  background-position: 0 90%;
  transition: background-size 0.5s ease;
}

.marker-animate-pink:hover {
  background-size: 100% 40%;
}

/* 右から左へ引かれるバージョン */
.marker-animate-rtl {
  background: linear-gradient(#b3e0ff, #b3e0ff) no-repeat;
  background-size: 0% 40%;
  background-position: 100% 85%;
  transition: background-size 0.4s ease;
}

.marker-animate-rtl:hover {
  background-size: 100% 40%;
}

/* スクロールで表示されたときにアニメーション開始 */
.marker-scroll {
  background: linear-gradient(#ffff4d, #ffff4d) no-repeat;
  background-size: 0% 40%;
  background-position: 0 85%;
  transition: background-size 0.6s ease 0.2s;
  padding: 0 2px;
}

/* JavaScriptでこのクラスを付与する */
.marker-scroll.is-visible {
  background-size: 100% 40%;
}

<!-- JavaScript（Intersection Observer）でクラスを付与 -->
<script>
const markers = document.querySelectorAll('.marker-scroll');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
    }
  });
}, { threshold: 0.5 });

markers.forEach(el => observer.observe(el));
</script>

/* text-decorationの個別指定 */
.underline-custom {
  text-decoration-line: underline;       /* 下線の種類：underline / overline / line-through */
  text-decoration-color: #d16176;        /* 下線の色 */
  text-decoration-thickness: 3px;        /* 下線の太さ（CSS4） */
  text-decoration-style: solid;          /* 線のスタイル：solid / dashed / dotted / double / wavy */
  text-underline-offset: 4px;            /* 文字と下線の距離（CSS4） */
}

/* 一括指定版 */
.underline-shorthand {
  text-decoration: underline 3px solid #d16176;
}

/* 波線（wavy）下線 */
.underline-wavy {
  text-decoration: underline wavy #ff6b6b;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* 点線（dotted）下線 */
.underline-dotted {
  text-decoration: underline dotted #4a90d9;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* 二重線（double）下線 */
.underline-double {
  text-decoration: underline double #333;
  text-underline-offset: 4px;
}

/* 太い単色下線 */
.underline-thick {
  text-decoration: underline solid #4a90d9;
  text-decoration-thickness: 4px;
  text-underline-offset: 5px;
}

/* 間隔バリエーション */
.offset-tight {
  text-decoration: underline 2px solid #333;
  text-underline-offset: 1px; /* 文字に近い */
}

.offset-normal {
  text-decoration: underline 2px solid #333;
  text-underline-offset: 4px; /* 標準的な距離 */
}

.offset-loose {
  text-decoration: underline 2px solid #333;
  text-underline-offset: 8px; /* 文字から離れた下線 */
}

/* border-bottomを使った下線（1行向き） */
.border-underline {
  border-bottom: 3px solid #d16176;
  padding-bottom: 3px;
  display: inline; /* インライン要素として使う */
}

/* border-bottomを使ったホバーアニメーション */
.border-hover {
  position: relative;
  padding-bottom: 4px;
}

.border-hover::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #d16176;
  transition: width 0.3s ease;
}

.border-hover:hover::after {
  width: 100%;
}

/* 落ち着いた系（パステル・淡い） */
.marker-lavender {
  background: linear-gradient(transparent 55%, #e8d5ff 55%);
}

.marker-mint {
  background: linear-gradient(transparent 55%, #c8f7e5 55%);
}

.marker-peach {
  background: linear-gradient(transparent 55%, #ffd5b8 55%);
}

.marker-ivory {
  background: linear-gradient(transparent 55%, #fffde7 55%);
}

/* ネオン系（インパクト重視） */
.marker-neon-yellow {
  background: linear-gradient(transparent 55%, #ffff00 55%);
}

.marker-neon-pink {
  background: linear-gradient(transparent 55%, #ff69b4 55%);
}

.marker-neon-green {
  background: linear-gradient(transparent 55%, #39ff14 55%);
  color: #111; /* 蛍光色は文字を暗くすると読みやすい */
}

.marker-neon-cyan {
  background: linear-gradient(transparent 55%, #00ffff 55%);
  color: #111;
}

/* ダーク背景向け（明るい色のマーカー） */
.marker-dark-bg {
  background: linear-gradient(transparent 55%, rgba(255, 255, 100, 0.4) 55%);
  color: #fff;
}

/* SWELLの swl-marker をカスタマイズ（子テーマ style.css へ） */

/* 黄色マーカーの位置・太さを変更 */
.swl-marker.mark_yellow {
  background: linear-gradient(transparent 50%, rgba(255, 255, 0, 0.6) 50%) !important;
}

/* ピンクマーカーをブランドカラーに合わせる */
.swl-marker.mark_pink {
  background: linear-gradient(transparent 55%, #EFBDB7 55%) !important;
}

/* 新しいカラーを追加 */
.swl-marker.mark_green {
  background: linear-gradient(transparent 55%, #b3f0c8 55%);
}

/* SWELLのmark_yellowをアニメーション対応にする場合 */
@media (prefers-reduced-motion: no-preference) {
  .swl-marker.mark_yellow {
    background: linear-gradient(#ffff4d, #ffff4d) no-repeat;
    background-size: 0% 40%;
    background-position: 0 90%;
    transition: background-size 0.4s ease;
  }
  .swl-marker.mark_yellow.is-visible {
    background-size: 100% 40%;
  }
}

/* アクセシビリティ対応：アニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {
  .marker-animate,
  .marker-animate-pink,
  .marker-animate-rtl,
  .marker-scroll {
    background-size: 100% 40% !important;
    transition: none !important;
  }
}