グラデーション文字作成くん

今回はグラデーション文字の使い方とどんなふうにカスタマイズができるか説明していきます。

URL : https://k-editor.com/editor/gradation/

## 基本

グラデーション文字は文字通りグラデーションを作るためのものです。リンクも付けられます。シンプルリンクの色がグラデーションになったものです。デフォルトでは以下のコードが出力されます。

<a style="font-size:16px;line-height:1.5;font-weight: bold;" ><span style="color:#1b8ef3;">グ</span><span style="color:#1e45f4;">ラ</span><span style="color:#4321f6;">デ</span><span style="color:#9023f7;">ー</span><span style="color:#db26f8;">シ</span><span style="color:#fa29ce;">ョ</span><span style="color:#fb2c88;">ン</span><span style="color:#fc2f43;">文</span><span style="color:#fd6532;">字</span></a>

見てお分かりの通り一文字ずつに分解して色を変えているだけです。

それぞれの意味は以下の通り。

・font-size: 文字サイズ設定

・color: 色設定

・line-height: 行間設定

・font-weight:太字設定

左端の色と右端の色を変更することでグラデーションを変えることができます。

詳細設定を開くと、文字サイズ、行間、下線、太字設定、補間形式の変更が可能になります。

手軽にグラデーションを作りたい場合に使えます。

またリンク設定した場合、現在のブラウザのタブではなく別のタブで開くようにも設定可能です。

## テンプレート

デフォルトの色としていくつか用意しています。上部にあるテンプレ色から選択すると開発者が適当に選んだ色が選べます。

また、カスタムテンプレートの設定の項目で”この設定を保存する”ボタンを押すと現在設定している色、文字サイズ、行間、下線、太線設定がブラウザに保存されます。

保存した場合、次に同じページを訪問した時にテンプレ色の選択肢に表示されます。

自分用のグラデーションを決めて保存しておくとよいでしょう。

## コード説明

グラデーションの補間形式

グラデーションを作るための色の補間形式を選ぶことができます。色と色の間の色を計算させる場合の計算式によってグラデーション色が変わります。RGBでやると中間色が濁るのでデフォルトではHSLにしています。色々と変えてみて具合を確かめてみるのがよいでしょう。

・HSL: Hue（色相）、Saturation（彩度）、Lightness（明度）

・RGB：Red（赤）、Green（緑）、Blue（青）

・LRGB:リニアRGB

・LAB:明度、a（緑～赤の間の位置）、b（青～黄の間の位置）

・Lch：明度、chroma（色度）、色相

ほとんどの場合はHSLかLchでいいと思います。色の組み合わせによって効果は変わるのでまずは色を決めてから補間形式を設定するのが良いと思います。

なお、通常の利用ではグラデーションは

background: linear-gradient(90deg, #4158D0, #C850C0 30%, #FFCC70);

background: -webkit-linear-gradient(0deg, #4158D0, #C850C0 30%, #FFCC70);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

のように書けるので一文字ずつ色を設定する必要はありません。（例では背景にグラデーションを設定して文字の形にくりぬいています。）

小説家になろうではこれは使えないので無理やり一文字ずつ色を設定しています。

一文字ずつ色を設定しているのでグラデーションをかけている文字が多くなればなるほどコードが肥大化していくのでご利用は計画的に。

-　-　- ✂切り取り✂ -　-　-

ということでグラデーション文字作成くんの使い方でした。もしよくわからない点などあれば感想などでお知らせください。