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は本来、テキストに影をつけるためのプロパティですが、影の方向や量を工夫することで、縁取り文字を作ることができます。
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では初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
