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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

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

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

お願いします!

 

縁取り文字のデザイン例

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

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

 

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

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

 

[PR] Webデザインで副業する学習方法を動画で公開中

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;
}

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料体験 に参加してみませんか?

初心者でも最短1時間で学習が体験できるカリキュラム、現役エンジニアに何でも相談できるカウンセリング、無制限のチャット質問サービスすべて無料で体験 できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら体験者限定の割引特典付き! 無料体験はこちら

監修してくれたメンター

メンター 橋本真理

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

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

ラジオとバナナが好き。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

独学に限界を感じたら…テックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 独学に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料で予約する