CSSで縁取り文字をデザインする方法を現役デザイナーが解説【初心者向け】

初心者向けにCSSで縁取り文字をデザインする方法について解説しています。text-shadowプロパティを使うことで、文字に縁取りを入れることができます。text-shadowの書き方と縁取りの形の各種設定方法について見ていきましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

CSSで縁取り文字をデザインする方法について解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

縁取り文字をデザインする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

縁取り文字のデザイン例

雑誌などの紙媒体ではよく縁取り文字を使用したデザインを見かけます。ユーザーの注目を集めたり、印象に残るようなデザインにする1つの方法として、特に強調したい文言や、タイトルに縁取り文字が用いられることがあります。Webサイトでも、特にバナー画像等で見かけることが多いかもしれません。

今回は画像作成ソフトを使わずに、HTMLとCSSだけで縁取り文字をデザインしてみましょう。

 

CSSで縁取り文字をデザインする方法

今回は、CSSのtext-shadowプロパティを使用して作っていきます。text-shadowは本来、テキストに影をつけるためのプロパティですが、影の方向や量を工夫することで、縁取り文字を作ることができます。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

text-shadowの使い方

text-shadowでは、X軸方向のオフセット(ずらし具合)、Y軸方向のオフセット、ぼかしの半径、影の色の値を設定することができます。

text-shadowの使い方:
textshadow:X軸方向のオフセット Y軸方向のオフセット ぼかしの半径 色;

各値は半角スペースで区切ります。

 

このうちの影のぼかしの半径の値を0にすることにより、縁取りのデザインを作っていきます。まずは、text-shadowの値と表示の関係を確認してみましょう。

HTML:

<span class="text1">HELLO</span>
<span class="text2">HELLO</span>
<span class="text3">HELLO</span>

CSS:

.text1{
  text-shadow:1px 0 5px black;
}
.text2{
  text-shadow:0 5px 5px black;
}
.text3{
  text-shadow:1px 1px 0 black;
}

また、text-shadowでは、カンマ区切りで、複数の影を設定することができますので、X軸方向のオフセットとY軸方向のオフセットを少しずつずらした影をつけることによって、文字の上下左右に縁取りをつけることができます。

縁取りを作る時のtext-shadowの構造を確認してみましょう。

HTML:

<span class="text1">HELLO</span>
<span class="text2">HELLO</span>
<span class="text3">HELLO</span>
<span class="text4">HELLO</span>
<span class="text5">HELLO</span>


CSS:

.text1{
  text-shadow:1px 0 0 black;
}
.text2{
  text-shadow:0 1px 0 black;
}
.text3{
  text-shadow:-1px 0 0 black;
}
.text4{
  text-shadow:0 -1px 0 black;
}
.text5{
  text-shadow:
    1px 0 0 black,
    0 1px 0 black,
    -1px 0 0 black,
    0 -1px 0 black
}

 

実際に書いてみよう

文字色や背景色、縁取りの色や形を工夫して、様々な縁取り文字を作ってみましょう。

HTML:

<html>
  <head>
    <meta charset="utf-8">
    <title>縁取り文字をCSSでデザインしてみよう</title>
    <link rel="stylesheet" href="./css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:900&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="t1"><span>Banana</span></div>
    <div class="t2"><span>Apple</span></div>
    <div class="t3"><span>Tomato</span></div>
    <div class="t4"><span data-text="Potato">Potato</span></div>
    <div class="t5"><span data-text="Mushroom">Mushroom</span></div>
</body>
</html>


CSS:

@charset "UTF-8"; /*文字コードの指定*/
body{
  font-family:'Lato', sans-serif;
  font-size:70px;
  font-weight:800;
}
div{
  margin:20px;
  padding:30px;
}
.t1{
  background:#ec6d72;
}
.t1 span{
  text-shadow:1px 0 0 #fff,0 1px 0 #fff,-1px 0 0 #fff,0 -1px 0 #fff;
  color:#ec6d72;
}
.t2{
  background:#5185c5;
}
.t2 span{
  text-shadow:1px 0 0 #fff,0 1px 0 #fff,-1px 0 0 #fff,0 -1px 0 #fff,3px 3px 0 #fff;
  color:#5185c5;
}
.t3{
  background:#2fb6a8;
}
.t3 span{
  text-shadow:1px 0 0 #fff,0 1px 0 #fff,-1px 0 0 #fff,0 -1px 0 #fff,3px 3px 0 #fff;
  color:#ec6d72;
}
.t4{
  background:#8d7eb9;
}
.t4 span{
  text-shadow:1px 0 0 #f9c158,0 1px 0 #f9c158,-1px 0 0 #f9c158,0 -1px 0 #f9c158;
  color:#8d7eb9;
  position:relative;
}
.t4 span::after, .t4 span::before{
  content:attr(data-text);
  position:absolute;
  left:-2px;
  top:-2px;
}
.t4 span::before{
  left:-4px;
  top:-4px;
}
.t5{
  background:#f9c158;
}
.t5 span{
  color:#fff;
  position:relative;
}
.t5 span::after{
  content:attr(data-text);
  text-shadow:1px 0 0 #5185c5,0 1px 0 #5185c5,-1px 0 0 #5185c5,0 -1px 0 #5185c5;
  color:#fff;
  position:absolute;
  left:2px;
  top:2px;
  mix-blend-mode:multiply;
}

監修してくれたメンター

メンター 橋本真理

フリーのweb/グラフィックデザイナー

会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動、TechAcademyではWebデザインコース・WordPressコースを担当しています。

ラジオとバナナが好き。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。