【コピペで使える】CSSを使いこなしてテキストを自由にデザインしよう!

こんにちは。今回はCSSでテキストをデザインするお話になります。

テキストに枠線をつけたい、ストライプにしたい、立体的に見せたい・・・などCSSのみで表現できたら良いなと思いますよね!
今回はCSSの様々なプロパティを組み合わせて、テキストをデザインする方法をご紹介します。

テキストに影をつける

まずは簡単なものから紹介します。
テキストの後ろに影をつけたい時、CSSのtext-shadowプロパティを使用すれば影を簡単に表現できます。

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

プロパティ解説

  • text-shadow: X軸、Y軸のオフセット、ぼかしの大きさ、色を指定して影を加えます。

テキストに枠線をつける

続いてもシンプルな表現ですが、割と使うシチュエーションが多い表現です。
テキスト自体に枠線を付けたい場合は、-webkit-text-strokeを活用します。

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

プロパティ解説

  • -webkit-text-stroke: テキストの輪郭線の幅と色を指定します。(IEには非対応のプロパティとなります)

テキストをぼかす

少し特殊な表現ですが背景に配置したテキストなどに使うと効果的かもしれません。
filterプロパティを使ってテキストをぼかします。

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

プロパティ解説

  • filter: エフェクト(ぼかし、明るさなど)を適用します。

テキストでマスクする

背景画像やグラデーションでテキストをマスクするには、-webkit-text-fill-color-webkit-background-clipを使用します。

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

プロパティ解説

  • -webkit-background-clip: 背景をテキストのみに適用します。(IEには非対応のプロパティとなります)
  • -webkit-text-fill-color: テキストの塗りつぶし色を指定します。(IEには非対応のプロパティとなります)

テキストをグラデーションする

background-clipを使った方法で、グラデーションを適用したテキストを作成します。

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

プロパティ解説

  • background: 背景にグラデーションや色を指定します。
  • -webkit-background-clip: 背景をテキスト形状でクリップします。(IEには非対応のプロパティとなります)
  • width: fit-content;: コンテンツの幅に基づいてボックス幅を調整します。

テキストを光らせる

テキストを光らせるには、text-shadowを使用して光の効果を作ります。

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

プロパティ解説

  • text-shadow: 発光に見えるよう、複数のシャドウを指定します。

テキストを反射させる

::after擬似要素を使ってテキストの下に反射効果を追加します。

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

プロパティ解説

  • ::after: 擬似要素で反射部分を作成します。
  • transform: scaleY(-1): 垂直方向に反転させます。

背景にアニメーションをつける

animationプロパティを使ってテキストの背景にアニメーションを追加します。

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

プロパティ解説

  • background-size: 背景のサイズを指定します。
  • animation: アニメーション効果を指定します。

テキストのストライプ表現

青と白の斜線ストライプでマスクされたテキストを作成します。

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

プロパティ解説

  • repeating-linear-gradient: 繰り返しの線形グラデーションを作成します。
  • background: 背景色やグラデーションを指定します。
  • -webkit-background-clip: 背景をテキスト形状でクリップします。(IEには非対応のプロパティとなります)
  • -webkit-text-fill-color: テキストの塗りつぶしを透明にします。(IEには非対応のプロパティとなります)

テキストに奥行き(立体感)をつける

text-shadowを重ねて使うことで立体感を表現し、奥行きのあるテキストを作成できます。

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

プロパティ解説

  • text-shadow: 異なるオフセットで複数の影を重ね、立体感を出します。

テキストの色を交互に(1文字ずつ)変える

spanタグを使いテキストを囲むことで、テキストカラーを交互に(または一文字ずつ)変えることができます。
テキストが長い場合はJavaScriptの命令で、テキスト1つ1つをspanで囲むこともできます。(参考:【jQuery】splitメソッドで特定要素内のテキストを1文字ずつ扱おう【spanで囲む】

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

セレクタ解説

  • nth-of-typeを利用して奇数番目と偶数番目の色を変えています。
    括弧内に数字で順番を指定することもできます。

番外編:テキストをカーブさせる(SVG)

SVGを使い、曲線上にテキストを配置します。

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

プロパティ解説

  • SVG: グラフィック(曲線)を描画するフォーマットになります。
  • textPath: パスに沿ってテキストを配置します。

以上となります!

いかがでしたでしょうか?
案外CSSだけでもテキストに対する様々な表現が行えます。
テキストを画像化をしないことで編集性の高いページを作ることもできますので、是非参考にしてみてください!

STUDIO NNC 合同会社ではコーディングのみなど部分的なお手伝いはもちろん、WEBサイトのコンセプト設計からデザイン、ワードプレス構築まで一貫した制作を得意としております。ご相談がございましたら、お気軽にフォームよりお問い合わせください!

こちらの記事はいかがでしたか?
+1
1
+1
0
+1
0
+1
0

【PR】Tech Tech Zoo

【PR】オリジナルキャラクター「てくてくず」を公開しました!

作品は、随時X(旧Twitter)で公開していきます!
ぜひ「てくてくず」の作品を応援していただけたら嬉しいです。

X(旧Twitter)アカウントはこちら:
https://twitter.com/tech_tech_zoo

RECENT ENTRIES

  • 【2025年版】Googleが推奨するSEO最新アップデートと対策

    VIEW MORE
  • カスタム投稿タイプの投稿一覧をカテゴリーごとにタブで切り替える【WP】

    VIEW MORE
  • CSSのline-heightを使って行間を調整しよう!余白の調整方法も解説

    VIEW MORE

CONTACT

contact