色付き下線を付けてみた

# はじめに
Qiita株式会社で主に[Qiita Zine](https://zine.qiita.com/)の記事制作を担当しています。プログラミング経験はありません。WordPressでHTMLに触れるくらい。CSSは何となく理解しています、何となく。WordPressの仕組みを知りたいなぁと、一度サイトを作ってみたことがあるので。


# Qiitaグリーンの下線を付けたよ
Qiita Zineには8,000〜9,000字ほどの記事もあり、「もっと、最後まで見たいと思ってもらいたいなぁ」と思っていたところ、案の1つとして「強調表現も良いんじゃない？」とアドバイスをもらいました。考えていろいろと試した末、緑色のアンダーラインを引くことに。

調べていくつかコードを試した経緯と出来上がりを残します。

# HTMLでアンダーラインどうやって引くの
CSSを触るのはシステム的に怖かったので、HTMLで作ることに。Google先生を頼って「HTML　下線」「HTML　アンダーライン」「アンダーライン　色付き　HTML」などと検索して、使えそうなコードを探します。

「アンダーラインを付けたい箇所を `span` で囲むのが良いんだな」と、そして「グラデーションがかっているほうが主張が強すぎなくて良いな」と思いながら、このようなコードを発見。

`<span style="background: linear-gradient(transparent xx%, #ffff00 xxx%);">あいうえお</span>`

# 色と％の数字をいじる
変更するのは色と％の数字。まず色は、Qiitaグリーンとして決まっている`#55C500`を指定。

問題は％の数字です。これをいじれば太さとかグラデーションを変えられると分かったのですが、transparentうしろの％と、色コードうしろの％それぞれを変えたらどうなるのか、調べても実用するほどの理解はできなかったので、とりあえず適当に入れてみます。

いくつか試したコードと見た目がこちら。

### コード
```
Qiitaは、<span style="background-color: #d0ffc9;">エンジニアに関する知識を記録・共有するためのサービス</span>です。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 &amp; 公開することができます。

Qiitaは、<span style="background-color: #55c500;">エンジニアに関する知識を記録・共有するためのサービス</span>です。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 &amp; 公開することができます。

Qiitaは、<span style="background: linear-gradient(transparent 65%, #55C500 120%);">エンジニアに関する知識を記録・共有するためのサービス</span>です。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 &amp; 公開することができます。
<strong>↑薄い</strong>

Qiitaは、<span style="background: linear-gradient(transparent 50%, #55C500 120%);">エンジニアに関する知識を記録・共有するためのサービス</span>です。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 &amp; 公開することができます。
<strong>↑良さそうA</strong>

Qiitaは、<span style="background: linear-gradient(transparent 65%, #55C500 100%);">エンジニアに関する知識を記録・共有するためのサービス</span>です。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 &amp; 公開することができます。
<strong>↑良さそうB</strong>

Qiitaは、<span style="background: linear-gradient(transparent 60%, #55C500 100%);">エンジニアに関する知識を記録・共有するためのサービス</span>です。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 &amp; 公開することができます。
<strong>↑良さそうだけどちょっと濃い？</strong>

Qiitaは、<span style="background: linear-gradient(transparent 70%, #55C500 100%);">エンジニアに関する知識を記録・共有するためのサービス</span>です。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 &amp; 公開することができます。
<strong>↑細い？</strong>

Qiitaは、<span style="background: linear-gradient(transparent 65%, #55C500 90%);">エンジニアに関する知識を記録・共有するためのサービス</span>です。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 &amp; 公開することができます。
<strong>↑細い？</strong>

Qiitaは、<span style="background: linear-gradient(transparent 50%, #55C500 100%);">エンジニアに関する知識を記録・共有するためのサービス</span>です。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 &amp; 公開することができます。
<strong>↑文字被りしてる</strong>
```

### 見た目
![強調HTML.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003649/12bbe008-3e37-5b9c-fb72-a0dd3df34bd5.png)

見すぎてゲシュタルト崩壊を起こしつつ、「実際に記事で長文の中にあるとしたらどの見た目が良いだろうか」と感覚にも頼りながら選びます。薄いとか細いとか、メモを残しながら「良さそうA・B」まで絞ります。

もはや違いが分からなくなってきますが、せっかく決めるのであれば最後まで納得して選びたい。「個人的には『良さそうB』が適度に添える感じで良いと思うんですけれど〜」というコメントとともに、チームのみなさまに尋ねると、「良さそうBのほうが主張控えめでちょうど良さそう」というコメントをもらったので決まり。最近しれっと使っています。この記事とかこの記事とかで。「なんか変わったな〜」くらいでも気づいた方いますか？

▶︎[リモートワーク時代に必須のアイケア製品。Qiitaエンジニアがベンキューの最新モニターを使ってみた](https://zine.qiita.com/interview/202303-benq/)
▶︎[バックエンドとフロントエンドの連携 〜Qiita Nightレポート〜](https://zine.qiita.com/event/202303-qiitanight/)

# コードの意味と仕組みも調べよう
これまで何となくでHTMLを触っていましたが、この記事を書くにあたり仕組みを調べると「なるほど、そういうことだったのね」と分かりましたし（とはいえ書くほどの理解には至っていない）、理解できればほかでも応用できそうだなと。これからはタグをはじめとして、意味や仕組みも調べてみます。

次は、まだ理解しきれていない`<span style="background: linear-gradient(transparent xx%, #ffff00 xxx%);">あいうえお</span>`のtransparentとか色コードうしろの％を調べて、きちんと自分で理解したあと、備忘録を書こうかな。