CSSで簡単に文字の縁取りを作る方法!初心者向け徹底解説+サンプルコード&応用例

文字の縁取りを作るCSSサンプルコードCSS
この記事は約5分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

CSSを使って文字の縁取りを作りたいけど、どうすればいいのかわからない。

そんな初心者の方でも簡単に理解できるように、文字の縁取りの作り方と使い方を詳しく解説していきます。

サンプルコードや応用例も交えて、これを読めばあなたも縁取り文字が作れるようになります。

●CSSで文字の縁取りを作る方法

まずは基本的な方法から始めます。

CSSで文字の縁取りを作るには、text-shadowプロパティを使います。

このプロパティを使って、縁取りの色や位置を指定することができます。

サンプルコード:

h1 {
  color: white;
  text-shadow: 2px 2px 0 black, -2px 2px 0 black, 2px -2px 0 black, -2px -2px 0 black;
}

このコードでは、h1タグの文字色を白にし、縁取りの色を黒にしています。

また、縁取りの位置を4方向(右上、左上、右下、左下)に指定しています。

このようにして、文字の縁取りができます。

●縁取りの太さや位置を変更する方法

縁取りの太さや位置を変更したい場合は、text-shadowプロパティの値を調整します。

次のサンプルコードでは、縁取りの太さを3pxにしています。

サンプルコード:

h1 {
  color: white;
  text-shadow: 3px 3px 0 black, -3px 3px 0 black, 3px -3px 0 black, -3px -3px 0 black;
}

縁取りの位置も変更できます。

次のサンプルコードでは、縁取りの位置を右上と左下にだけ設定しています。

サンプルコード:

h1 {
  color: white;
  text-shadow: 3px 3px 0 black, -3px -3px 0 black;
}

このように、text-shadowプロパティの値を調整することで、縁取りの太さや位置を自由に変更できます。

●複数の色で縁取りをする方法

縁取りを複数の色で行いたい場合は、text-shadowプロパティに複数の色を指定します。

次のサンプルコードでは、赤と青の2色で縁取りをしています。

サンプルコード:

h1 {
  color: white;
  text-shadow: 2px 2px 0 red, -2px 2px 0 blue, 2px -2px 0 red, -2px -2px 0 blue;
}

このように、text-shadowプロパティに複数の色を指定することで、縁取りを複数の色で行うことができます。

●縁取り文字の無限ループアニメーション

縁取り文字を無限ループさせるアニメーションを作る方法も紹介します。

次のサンプルコードでは、縁取りの色が順番に変わるアニメーションを無限ループさせています。

サンプルコード:

@keyframes color-change {
  0% { text-shadow: 2px 2px 0 red; }
  33% { text-shadow: 2px 2px 0 green; }
  66% { text-shadow: 2px 2px 0 blue; }
  100% { text-shadow: 2px 2px 0 red; }
}

h1 {
  color: white;
  animation: color-change 3s infinite;
}

@keyframesルールを使って、アニメーションのキーフレームを定義しています。

そして、animationプロパティを使って、そのアニメーションを適用し、無限ループさせています。

●応用例: グラデーション縁取り

縁取りをグラデーションにする応用例も紹介します。

次のサンプルコードでは、縁取りがグラデーションになるようにしています。

サンプルコード:

h1 {
  color: white;
  background-image: linear-gradient(45deg, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 0 rgba(255, 0, 0, 0.5), -2px 2px 0 rgba(0, 0, 255, 0.5), 2px -2px 0 rgba(255, 0, 0, 0.5), -2px -2px 0 rgba(0, 0, 255, 0.5);
}

このサンプルコードでは、background-imageプロパティを使って、グラデーションの背景を作成しています。

そして、-webkit-background-clipプロパティと-webkit-text-fill-colorプロパティを使って、背景をテキストに適用します。

最後に、text-shadowプロパティで半透明の縁取りを追加して、グラデーション縁取りを実現しています。

まとめ

この記事では、CSSを使って文字の縁取りを作る方法を初心者向けに詳しく解説しました。

サンプルコードや応用例を交えて説明しましたので、これを参考にしてあなたも縁取り文字を作成してみてください。

基本的な縁取りから複数の色での縁取り、無限ループアニメーション、グラデーション縁取りまで、様々な方法で縁取りを楽しめます。

この知識を活用して、ウェブページをより魅力的にデザインしてみてください。