ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

ホームページ制作のアクセントに使える。line-heightを使ってテキストを1行ずつ装飾するサンプルいくつか

| カテゴリー : HTML/CSS

ホームページ制作するうえでデザインにおいても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

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。