こんにちは！福岡でホームページ制作を行なうシンス株式会社の越水です。

ホームページ制作するうえでデザインにおいてもCSSコーディングにおいても重要なのがCSSのline-heightプロパティです。

これが上手に設定されているかで、ホームページ内のコンテンツの読みやすさも全く違いますし、サイトデザインもビシッと決まるかどうかの別れ目になります。

そんなline-heightプロパティをあえてテキスト装飾に使ってしまおうという面白いサンプルを見つけたので紹介します。

Fun with line-height! | CSS-Tricks

工夫次第でテキスト装飾にも活かせるline-heightの使い方

先ほど紹介した記事に書かれているのはline-heightで設定した高さに合わせてbackgroundのグラデーションを設定して、あたかも1行ずつにスタイルを設定しているように見せる方法です。

この方法を実際に使ってみると以下の様なテキスト表示をさせることができます。

CSSのソースコードを確認したい場合は、埋め込んであるCodepenのSCSSタブをクリックして出てくる「VIEW COMPILE」から確認してください。

1行ごとに色が変わるレインボーテキスト

See the Pen ogrbyE by Daisuke Koshimizu (@dkossy) on CodePen.

設定したline-heightの高さがトリガーになってカラーが切り替わるようなグラデーションを作ると、1行ごとにテキスト色が変わっていくスタイルを作ることができます。

テキストがだんだんとフェードアウトするようなサンプル

See the Pen azgdQy by Daisuke Koshimizu (@dkossy) on CodePen.

1行ごとにカラー設定していく仕組みを応用するとこんな感じでテキストがフェードアウトしていくようなスタイルも作れます。

下の行からテキストのスタイルを指定するためのサンプル

See the Pen ogrbmd by Daisuke Koshimizu (@dkossy) on CodePen.

CSS3のcalc()ファンクションを使ってあげれば、下のほうから何行目..という指定もできるようになる。便利ですね。

元ネタの記事には他のサンプルも紹介されているので気になる方は読んでみてください。

参考URL

Fun with line-height! | CSS-Tricks

ホームページの新規制作やリニューアルのご依頼はシンス株式会社まで。