「letter-spacing」によるアンダーラインマーカーのズレを「linear-gradient」のみで解決する方法

この記事では背景色や「linear-gradient」を利用してマーカーやアンダーラインマーカーを実装している場合に「letter-spacing」の影響から生じてしまうズレをCSS上で（コピペでイッパツ‼︎）簡単に修復・調整する方法をご紹介します

問題の現象

詳しくは下の記事がわかりやすいので参考にしてください

文字間にスペースを設けるletter-spacingというプロパティが、各文字の後ろにスペースを追加するため、各所で中央寄せにしたつもりがズレちゃってるよね？という話。一部の〈余白にもこだわる勢〉をモヤモヤさせている困った現象（これを読んでいる貴方もきっと同志！）

letter-spacingが文字の前後にスペースを挿入してくれればいいのに…と思いつつも、そうすると各行の最初の文字の左側のスペースをどうするのか？という問題が浮上するなど、致し方ない現象な気もするが、おそらく左寄せ文化で右側のスペースに無頓着な英語圏の開発者・利用者は気にもしていない（だろう）

広い空間での中央寄せならあまり気にならない（気づかない）もので、問題になるのは上の記事のような（左右のマージンが強く意識されるような）狭い空間で中央寄せする場合だが、そういったケースはそういったパーツとして別個別途マージンを調整して望み通りの表示になっているはず
上の記事ではtext-indentもしくはpadding-leftで対応している

基本文中（インライン要素内）でも表立ってletter-spacingに悩まされることはないはず。だが、唯一残る（といえる）問題がこの『アンダーラインマーカー』

百聞は一見にしかず。上の画像では、文字列の後ろに余計なスペースがあるようにみえる。実際には常に「在る」のだが、マーカーは色付けするためそれを強調して表面化させてしまうところに難がある

気にならない人には全くもって支障ないことだろうが、〈余白もこだわる勢〉が大きなletter-spacingとエンカウントしてしまうと夜も眠れない由々しき問題
ちなみに上の画像ではletter-spacing: 0.2em;

色は黄色を使う人が多いだろうが、今回は見やすくするためあえて赤と青で表示。また今回はマーカーも一緒に対策するので併せて掲載。そもそもマーカーもアンダーラインマーカーもこの直線的な長方形感が気に入らない。もっとこう、尖ってないで厳つさより優しさがほしい

この文章のマーカーの具合が「イイ感じ」なのであれば、今回の対策はうまくいったということ。ぜひ対策する前の状態画像もみてほしい。あなたはどちらが好みだろうか？（今回併せて「色味」も調節しています）

《CSS》マーカー対策コード

マーカー対策コード例と解説

対策コードを書く前に、もともとアンダーラインマーカーに掛かっていたCSSコードがこちら

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

至極一般的な書かれ方だろう
今回これ（↑）をこの（↓）ように変更

.marker-under-red {
    background: linear-gradient(to right, #fff 0em, transparent 0.2em), linear-gradient(to left, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 50%, rgba(255,208,209,0.8) 60%, rgba(255,208,209,0.8) 90%, transparent 100%);
}

• 今回やってみたのは以下3点
  1. 縦軸と横軸のグラデーションを用意して、縦軸の上に横軸を重ねることで文字後ろの余白を解消
     先に書いたものが上に重なるので横軸を先に記述
  2. 縦横それぞれのグラデーションの縁（ふち）をボカすことでなるべく優しい（やわらかい）感じに
     透過と着色のタイミングをあえてズラすことでボカしを表現
  3. もともと設定されていた色を生かしながらそれを透過させることで色味を微調整
     カラーコードをRGBAに変換して透明度を調節しやすく

上のコード中には横軸グラデーションが2つ書かれている。縦軸に比べ横軸はなかなかにシビアで（妥協を許さず何度も書き直し）このスタイルに落ち着いた

以下のポイントにある通り、今回は末尾を始点とした左←右のグラデーションを採用。横軸に「ボケ」を求めなければそれ一本で良かったが、正確に文字列先頭と末尾を指定しながら、なおかつ双方を『均一に』ボケさせるとなったら、どうしてもグラデーション2本によるサンドイッチ作戦に

この対策法のメリットはCSS上でコピペで簡単に対策でき、細かい調整も比較的容易なこと。デメリットは背景が白（など特定の色）でなくてはならないこと。多くの人は記事本文は白背景でしょうが、もし独自の色をあてている人は上記コードの#fffをその色に変えてください

あいうえお

今回の対策をわかりやすく可視化（余分なマーカーを背景色で上塗りしている）

クラス名（上では.marker-under-red）もご自身の環境に合わせて変更してください。また上記はletter-spacingが0.2emの例でしたが、他の値の人や、レスポンシブデザインなどでletter-spacingの値が変わるタイミングがある人は、実際の表示のされ方をチェックしながらコード中のem値あたりを都度調節してください

マーカー系対策コードまとめ

ではまとめて、赤青黄3色のマーカー・アンダーラインマーカーすべて（計6つ）を一気に対策しましょう
.marker.marker-underは黄色

もとのコード（CSS）

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

新しいコード（CSS）

.marker, .marker-red, .marker-blue {
    background-color: initial;
}
.marker {
    background: linear-gradient(to right, #fff 0em, transparent 0.2em), linear-gradient(to left, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 0%, rgba(255,255,153,0.9) 15%, rgba(255,255,153,0.9) 85%, transparent 100%);
}
.marker-red {
    background: linear-gradient(to right, #fff 0em, transparent 0.2em), linear-gradient(to left, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 0%, rgba(255,208,209,0.8) 15%, rgba(255,208,209,0.8) 85%, transparent 100%);
}
.marker-blue {
    background: linear-gradient(to right, #fff 0em, transparent 0.2em), linear-gradient(to left, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 0%, rgba(168,218,251,0.7) 15%, rgba(168,218,251,0.7) 85%, transparent 100%);
}
.marker-under {
    background: linear-gradient(to right, #fff 0em, transparent 0.2em), linear-gradient(to left, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 50%, rgba(255,255,153,0.9) 60%, rgba(255,255,153,0.9) 90%, transparent 100%);
}
.marker-under-red {
    background: linear-gradient(to right, #fff 0em, transparent 0.2em), linear-gradient(to left, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 50%, rgba(255,208,209,0.8) 60%, rgba(255,208,209,0.8) 90%, transparent 100%);
}
.marker-under-blue {
    background: linear-gradient(to right, #fff 0em, transparent 0.2em), linear-gradient(to left, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 50%, rgba(168,218,251,0.7) 60%, rgba(168,218,251,0.7) 90%, transparent 100%);
}

もともと単純に背景色だけで実装されていたマーカーも、今回linear-gradientを用いてアンダーラインマーカーと同様の処置。実際の表示具合を考慮しながら、色味は赤青黄3色で微妙に透過度合を変えてある
冒頭のbackground-color: initial;は念の為背景色打消（リセット）用

せっかくなので、これにベンダープレフィックスをつけると以下の通り。長いので折り返さずに記載します（横スクロールしてください）

【完成】ベンダープレフィックス付き

.marker, .marker-red, .marker-blue {
    background-color: initial;
}
.marker {
    background: linear-gradient(to right, #fff 0em, transparent 0.2em), linear-gradient(to left, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 0%, rgba(255,255,153,0.9) 15%, rgba(255,255,153,0.9) 85%, transparent 100%);
    background: -webkit-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 0%, rgba(255,255,153,0.9) 15%, rgba(255,255,153,0.9) 85%, transparent 100%);
    background: -moz-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 0%, rgba(255,255,153,0.9) 15%, rgba(255,255,153,0.9) 85%, transparent 100%);
}
.marker-red {
    background: linear-gradient(to right, #fff 0em, transparent 0.2em), linear-gradient(to left, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 0%, rgba(255,208,209,0.8) 15%, rgba(255,208,209,0.8) 85%, transparent 100%);
    background: -webkit-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 0%, rgba(255,208,209,0.8) 15%, rgba(255,208,209,0.8) 85%, transparent 100%);
    background: -moz-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 0%, rgba(255,208,209,0.8) 15%, rgba(255,208,209,0.8) 85%, transparent 100%);
}
.marker-blue {
    background: linear-gradient(to right, #fff 0em, transparent 0.2em), linear-gradient(to left, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 0%, rgba(168,218,251,0.7) 15%, rgba(168,218,251,0.7) 85%, transparent 100%);
    background: -webkit-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 0%, rgba(168,218,251,0.7) 15%, rgba(168,218,251,0.7) 85%, transparent 100%);
    background: -moz-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 0%, rgba(168,218,251,0.7) 15%, rgba(168,218,251,0.7) 85%, transparent 100%);
}
.marker-under {
    background: linear-gradient(to right, #fff 0em, transparent 0.2em), linear-gradient(to left, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 50%, rgba(255,255,153,0.9) 60%, rgba(255,255,153,0.9) 90%, transparent 100%);
    background: -webkit-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 50%, rgba(255,255,153,0.9) 60%, rgba(255,255,153,0.9) 90%, transparent 100%);
    background: -moz-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 50%, rgba(255,255,153,0.9) 60%, rgba(255,255,153,0.9) 90%, transparent 100%);
}
.marker-under-red {
    background: linear-gradient(to right, #fff 0em, transparent 0.2em), linear-gradient(to left, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 50%, rgba(255,208,209,0.8) 60%, rgba(255,208,209,0.8) 90%, transparent 100%);
    background: -webkit-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 50%, rgba(255,208,209,0.8) 60%, rgba(255,208,209,0.8) 90%, transparent 100%);
    background: -moz-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 50%, rgba(255,208,209,0.8) 60%, rgba(255,208,209,0.8) 90%, transparent 100%);
}
.marker-under-blue {
    background: linear-gradient(to right, #fff 0em, transparent 0.2em), linear-gradient(to left, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 50%, rgba(168,218,251,0.7) 60%, rgba(168,218,251,0.7) 90%, transparent 100%);
    background: -webkit-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 50%, rgba(168,218,251,0.7) 60%, rgba(168,218,251,0.7) 90%, transparent 100%);
    background: -moz-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0.2em, transparent 0.4em), linear-gradient(transparent 50%, rgba(168,218,251,0.7) 60%, rgba(168,218,251,0.7) 90%, transparent 100%);
}

注意点は方向の指定でto leftとしていたのが、ベンダープレフィックスだとrightとなること

【おまけ】letter-spacing無し版

.marker, .marker-red, .marker-blue {
    background-color: initial;
}
.marker {
    background: linear-gradient(to right, #fff 0em, transparent 0.2em), linear-gradient(to left, #fff 0em, transparent 0.2em), linear-gradient(transparent 0%, rgba(255,255,153,0.9) 15%, rgba(255,255,153,0.9) 85%, transparent 100%);
    background: -webkit-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0em, transparent 0.2em), linear-gradient(transparent 0%, rgba(255,255,153,0.9) 15%, rgba(255,255,153,0.9) 85%, transparent 100%);
    background: -moz-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0em, transparent 0.2em), linear-gradient(transparent 0%, rgba(255,255,153,0.9) 15%, rgba(255,255,153,0.9) 85%, transparent 100%);
}
.marker-red {
    background: linear-gradient(to right, #fff 0em, transparent 0.2em), linear-gradient(to left, #fff 0em, transparent 0.2em), linear-gradient(transparent 0%, rgba(255,208,209,0.8) 15%, rgba(255,208,209,0.8) 85%, transparent 100%);
    background: -webkit-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0em, transparent 0.2em), linear-gradient(transparent 0%, rgba(255,208,209,0.8) 15%, rgba(255,208,209,0.8) 85%, transparent 100%);
    background: -moz-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0em, transparent 0.2em), linear-gradient(transparent 0%, rgba(255,208,209,0.8) 15%, rgba(255,208,209,0.8) 85%, transparent 100%);
}
.marker-blue {
    background: linear-gradient(to right, #fff 0em, transparent 0.2em), linear-gradient(to left, #fff 0em, transparent 0.2em), linear-gradient(transparent 0%, rgba(168,218,251,0.7) 15%, rgba(168,218,251,0.7) 85%, transparent 100%);
    background: -webkit-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0em, transparent 0.2em), linear-gradient(transparent 0%, rgba(168,218,251,0.7) 15%, rgba(168,218,251,0.7) 85%, transparent 100%);
    background: -moz-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0em, transparent 0.2em), linear-gradient(transparent 0%, rgba(168,218,251,0.7) 15%, rgba(168,218,251,0.7) 85%, transparent 100%);
}
.marker-under {
    background: linear-gradient(to right, #fff 0em, transparent 0.2em), linear-gradient(to left, #fff 0em, transparent 0.2em), linear-gradient(transparent 50%, rgba(255,255,153,0.9) 60%, rgba(255,255,153,0.9) 90%, transparent 100%);
    background: -webkit-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0em, transparent 0.2em), linear-gradient(transparent 50%, rgba(255,255,153,0.9) 60%, rgba(255,255,153,0.9) 90%, transparent 100%);
    background: -moz-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0em, transparent 0.2em), linear-gradient(transparent 50%, rgba(255,255,153,0.9) 60%, rgba(255,255,153,0.9) 90%, transparent 100%);
}
.marker-under-red {
    background: linear-gradient(to right, #fff 0em, transparent 0.2em), linear-gradient(to left, #fff 0em, transparent 0.2em), linear-gradient(transparent 50%, rgba(255,208,209,0.8) 60%, rgba(255,208,209,0.8) 90%, transparent 100%);
    background: -webkit-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0em, transparent 0.2em), linear-gradient(transparent 50%, rgba(255,208,209,0.8) 60%, rgba(255,208,209,0.8) 90%, transparent 100%);
    background: -moz-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0em, transparent 0.2em), linear-gradient(transparent 50%, rgba(255,208,209,0.8) 60%, rgba(255,208,209,0.8) 90%, transparent 100%);
}
.marker-under-blue {
    background: linear-gradient(to right, #fff 0em, transparent 0.2em), linear-gradient(to left, #fff 0em, transparent 0.2em), linear-gradient(transparent 50%, rgba(168,218,251,0.7) 60%, rgba(168,218,251,0.7) 90%, transparent 100%);
    background: -webkit-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0em, transparent 0.2em), linear-gradient(transparent 50%, rgba(168,218,251,0.7) 60%, rgba(168,218,251,0.7) 90%, transparent 100%);
    background: -moz-linear-gradient(left, #fff 0em, transparent 0.2em), linear-gradient(right, #fff 0em, transparent 0.2em), linear-gradient(transparent 50%, rgba(168,218,251,0.7) 60%, rgba(168,218,251,0.7) 90%, transparent 100%);
}

letter-spacingを「0」にしているもしくは「指定していない」けれども、このボカしを使いたい等という人向け
自分はデスクトップ環境ではletter-spacing: 0.2em;にしていますが、モバイル環境では0にして打ち消しているので、これを記述してます

『マーカー』ビフォーアフター

あいうえお　□□□□□

あいうえお　□□□□□

対策後の表示（実際：現状）

最後は長くなってしまったが、CSSに記述するだけでほぼ思い通りの表示となったので満足

あまり使用頻度は高くないので特段気にとめていなかったマーカー。ちょっと目につき気になったことから色々考えさせられ、結果いくらか見識が広がった気がする

ただ、改行を含む場合（マーカー（文字列）の先頭・末尾ではない）行の先頭と末尾にはスタイルが適応されないことが些か心残りではあるが、それもこの程度の補強では致し方ない領域と割り切れなくもない

どなたかもっと良い対策法があれば教えてください

参考にさせていただいたサイト