CSSで文字を横方向にグラデーションさせるときは「display:inline-block」をつけよう

HTML / CSS
この記事は約3分で読めます。

どうも上かるびです。

CSSで文字を”横方向に”グラデーションさせようと思ったときに気を付けることがありますので、ご紹介します。

スポンサードサーチ

横方向のグラデーションはコピペでは上手くいかない

「文字 CSS グラデーション」などでググって出てくる記事のほとんどで、下記のような実装方法が紹介されているかと思います。

ただですね!↓の画像のような横方向にグラデーションさせたい場合は↑をコピペしてカラーコードを変えただけでは上手くいきません。

実際にCSSグラデーションのサイトを使って実装してみた結果が↓こちらです。(h1のフォントサイズはデフォルトの32px)

 

見ての通り、グラデーションが上手く効いてません。

さあなぜでしょうか?(30秒お考えください。)

 

はい、正解です!h1はブロック要素のため、横幅いっぱいに広がってるからなんですね。

横方向でもきれいにグラデーションさせる方法

 

簡単な方法を2つご紹介します。

display:inline-block;をつける

幅を横いっぱいではなくも文字幅にすればその間でグラデーションが構成されます。

グラデーションさせたい要素をspanで囲む

spanはインライン要素なので、こちらでも同様の結果が得られます。

スポンサードサーチ

linear-gradientはemでも指定できる

いろいろ試しててわかったのですが、linear-gradientは%だけでなく、emでも指定できることを知りました。

Sassの関数とかjsでなんやかんや工夫できるかもしれませんね。

 

コピペ用としてお使いください(CodePen)

今回の記事で使ったコードをひとまとめにしました。

コピペなどして使いくださいm(_ _)m

See the Pen
[CSS Tips] text-gradation-row-direction
by Hayato Kamiyama (@kami8ma8810)
on CodePen.

ちなみにSVGでいろいろ実装できたりもするらしいです。

ネコーダー
ネコーダー

にゃんだと!?

コメント

タイトルとURLをコピーしました