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;
}
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
監修してくれたメンター
| メンター 橋本真理
フリーのweb/グラフィックデザイナー 会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動、TechAcademyではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
