はじめに
Qiita株式会社で主にQiita Zineの記事制作を担当しています。プログラミング経験はありません。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、ノウハウ、メモを簡単に記録 & 公開することができます。
Qiitaは、<span style="background-color: #55c500;">エンジニアに関する知識を記録・共有するためのサービス</span>です。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 & 公開することができます。
Qiitaは、<span style="background: linear-gradient(transparent 65%, #55C500 120%);">エンジニアに関する知識を記録・共有するためのサービス</span>です。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 & 公開することができます。
<strong>↑薄い</strong>
Qiitaは、<span style="background: linear-gradient(transparent 50%, #55C500 120%);">エンジニアに関する知識を記録・共有するためのサービス</span>です。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 & 公開することができます。
<strong>↑良さそうA</strong>
Qiitaは、<span style="background: linear-gradient(transparent 65%, #55C500 100%);">エンジニアに関する知識を記録・共有するためのサービス</span>です。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 & 公開することができます。
<strong>↑良さそうB</strong>
Qiitaは、<span style="background: linear-gradient(transparent 60%, #55C500 100%);">エンジニアに関する知識を記録・共有するためのサービス</span>です。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 & 公開することができます。
<strong>↑良さそうだけどちょっと濃い？</strong>
Qiitaは、<span style="background: linear-gradient(transparent 70%, #55C500 100%);">エンジニアに関する知識を記録・共有するためのサービス</span>です。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 & 公開することができます。
<strong>↑細い？</strong>
Qiitaは、<span style="background: linear-gradient(transparent 65%, #55C500 90%);">エンジニアに関する知識を記録・共有するためのサービス</span>です。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 & 公開することができます。
<strong>↑細い？</strong>
Qiitaは、<span style="background: linear-gradient(transparent 50%, #55C500 100%);">エンジニアに関する知識を記録・共有するためのサービス</span>です。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 & 公開することができます。
<strong>↑文字被りしてる</strong>
見た目
見すぎてゲシュタルト崩壊を起こしつつ、「実際に記事で長文の中にあるとしたらどの見た目が良いだろうか」と感覚にも頼りながら選びます。薄いとか細いとか、メモを残しながら「良さそうA・B」まで絞ります。
もはや違いが分からなくなってきますが、せっかく決めるのであれば最後まで納得して選びたい。「個人的には『良さそうB』が適度に添える感じで良いと思うんですけれど〜」というコメントとともに、チームのみなさまに尋ねると、「良さそうBのほうが主張控えめでちょうど良さそう」というコメントをもらったので決まり。最近しれっと使っています。この記事とかこの記事とかで。「なんか変わったな〜」くらいでも気づいた方いますか？
▶︎リモートワーク時代に必須のアイケア製品。Qiitaエンジニアがベンキューの最新モニターを使ってみた
▶︎バックエンドとフロントエンドの連携 〜Qiita Nightレポート〜
コードの意味と仕組みも調べよう
これまで何となくでHTMLを触っていましたが、この記事を書くにあたり仕組みを調べると「なるほど、そういうことだったのね」と分かりましたし（とはいえ書くほどの理解には至っていない）、理解できればほかでも応用できそうだなと。これからはタグをはじめとして、意味や仕組みも調べてみます。
次は、まだ理解しきれていない<span style="background: linear-gradient(transparent xx%, #ffff00 xxx%);">あいうえお</span>のtransparentとか色コードうしろの％を調べて、きちんと自分で理解したあと、備忘録を書こうかな。