2019/05/21)この記事ではCSSを使って、文字・テキストを装飾する方法について分かりやすく解説しています。くま文字の装飾は覚えておいた方がいいのか?あざらしそうだね!文字の装飾はCSSの基本で、とてもよく使われるから覚えておくと便利だよ文字を装飾するプロパティはたくさん用意されていますが、どれもよく使われるので覚えておくと便利です。この記事では、それら一つ一つについて解説していきます。この記事を読むことで下記のようなことが理解できると思います。CSSの文字装飾方法が一通り理解できる自分で文字・テキストの装飾ができるようになるこの記事のゴールこの記事のゴールは、下記のような文字の装飾が、自分の力でできるようになることです。文字を装飾するプロパティには下記のようなものがあります。文字の大きさを変更するには、font-sizeプロパティを使います。単位」という形で記述します。単位にはいくつか種類がありますが主に以下の2種類を使います。px(ピクセル)文字の大きさをpxで指定します。指定した数値は文字の高さとして計算されます。10pxとした場合は文字の高さが10pxになります。rem(レム)html要素の文字サイズを基準にした倍率を指定します。0.8remとした場合、html要素に設定されている文字サイズの0.8倍が指定されます。font-size:2.0rem;}これテスト文章ですこれテスト文章ですpxとremを使って指定しました。「26px」を指定した方は、指定された26px相当に大きくなっています。「2.0rem」を指定した方は、このサイトのhtmlのフォントサイズが10pxに設定されているため、その2倍の20px相当の大きさになっています。あざらし本文のフォントサイズは16px〜18pxあたりを使っているサイトが多いよより実践的な文字サイズの変更については下記の記事で解説しているので参考にしてみてください。文字の大きさを変更するには、font-sizeプロパティを使います。値には文字の大きさを表す数値やキーワードを指定します。[...]フォントを変更するフォントを変えるには、font-famiyプロパティを使います。以下のように指定します。フォント名;「フォント名」には、フォントの名前を指定します。厳密にはクォーテーションで括らなくても問題なく表示されるようですが、慣例となっているため、括っておいた方が無難です。font-famiyのルールfont-famiyを指定するにはいくつか重要なルールがあるので押さえておきましょう。左から順に優先度の高いものを書いていくfont-familyは複数のフォントを指定することが出来ます。複数指定された場合、左に書かれたフォントが優先され、なければ次に指定されたフォント、というように順番に適用されていきます。左から適用したい優先順位のとおり指定するようにすれば良いでしょう。指定したフォントが、ユーザーの環境に一つも無かった時に備えて、「明朝系」や「ゴシック系」などのような、ざっくりとしたフォントの系統を指定できる「総称フォントファミリー」を書きます。することで、指定したフォントがない場合でもある程度のフォントの方向性をコントロールできます。「総称フォントファミリー」には下記のようなものがあります。実践フォントを指定してみましょう。JP」に変更することが出来ます。JPがない場合は総称フォントファミリーで「sans-serif」が指定されているので、その環境にあるゴシック体が表示されます。Adobeという会社が共同開発した無料で使える綺麗なフォントだよより実践的なフォントの指定方法については下記の記事で解説しているので参考にしてみてください。文章の書体を変えるには、「font-famiy」プロパティを使います。書体のことをフォントと呼び、同じフォントの中でも様々な太さや、イタリックをセットにしたものをフォントファミリーと呼んでいます。[...]文字の色を変える文字色を指定するにはcolorプロパティを使います。色;「色」の部分にはカラーネームや、カラーコードを指定します。カラーネームとカラーコードカラーネームは、代表的な色につけられている名前で、red、blueなど、100種類以上準備されています。カラーコードは、色につけられている番号で、「110000」のような6桁の数値が振り分けられています。文字色はサイトの読みやすさや、第一印象に大きく関わる重要なプロパティです。読みにくい文字色は無意識に避けられてしまい、コンテンツが読まれる確率が下がるので、しっかりと読みやすい文字色を指定しましょう。実際に文字の色を変えてみましょう!カラーコードで指定するパターンとカラーネームで指定するパターンを記述してみます。}これテスト文章ですこれテスト文章ですそれぞれ指定した文字の色に変わりました。あざらしカラーネームだとどんなに色なるか分かりやすいけど、名前のついている色は限られているからどうしても選択肢が少なくるんだ!実践ではカラーコードで色を指定することが一般的だよ。文字色はサイトの読みやすさや、第一印象に大きく関わる重要なプロパティです。読みにくい文字色は無意識に避けられてしまい、コンテンツが読まれる確率が下がるので、しっかりと読みやすい文字色を指定しましょう。[...]太字にする文字の太さを変えるには、font-weightプロパティを使います。font-weight:値;値は数値で指定する方法と、キーワードで指定する方法があります。数値で指定100〜900の数値で100刻みずつ指定。数値が大きくなるほど太くなります。太字を示す「bold」や、標準の太さに戻す「normal」などを指定。数値での指定とキーワードでの指定があると書きましたが、実際はキーワードで指定する場合がほとんどです。数値での指定方法は初心者向けでは解説は省き、キーワードでの指定方法を紹介します。}これテスト文章ですここは子要素の中身ですこれテスト文章ですまず、pタグのクラスにboldを指定して要素を太字にしています。その後、子要素のspanのクラスにnormalを指定し、span要素だけ太さを標準に戻しています。あざらし太字を指定すると、その子要素も太字になるんだ!より実践的な文字の太さを変える方法については下記の記事で解説しているので参考にしてみてください。文字の太さを変えるには、font-weightプロパティを使います。font-weightはフォントの太さを指定するプロパティで、文字を太くしたり、細くしたり、通常の太さに戻したりすることができます。[...]文字の傾きを変える文字を斜めに傾けるにはfont-styleプロパティを使います。font-style:値;値はキーワードで指定します。いくつか種類がありますが、以下の2種類を覚えておけば良いでしょう。normal傾きのない文字です。文字を斜体から標準に戻すときに使います。italicフォントファミリーにイタリックが用意されていればそれを表示し、なければ標準の文字を斜めに傾けて表示します。}これテスト文章ですここは子要素の中身ですこれテスト文章ですpにはitalicを指定しているため全体的に斜体になっていますね。spanにはnormalを指定しているため、そこだけ標準に戻っているのがわかると思います。あざらし斜め文字は、タイトルの装飾や引用部分で使われることが多いよより実践的な文字の傾け方法については下記の記事で解説しているので参考にしてみてください。文字を斜めに傾けるには「font-style」プロパティを使います。font-styleは文字を傾けるためのプロパティです。斜体にしたり、通常に戻したりすることができます。下記のように書きます。[...]下線を引く下線を引きたい場合はtext-decorationプロパティを使います。線の種類;線の種類にはいくつか種類がありますが、よく使われるのは「underline」一つだけです。線の種類に「underline」を指定することで文字に下線が引かれます。}これテスト文章ですここは子要素の中身です/span>これテスト文章ですあざらし文字の下線は主にリンクの装飾などで使われるよ!下線があるとリンクって思われるから変なところでは使わない方がいいよ!より実践的な下線の指定方法については下記の記事で解説しているので参考にしてみてください。【サンプル付き】文章に下線を引く方法を解説!文章に線を引く方法には3つの手法があります。シンプルな線を引く場合や、見た目にこだわった線を引きたい場合など、用途に合わせて使い分けましょう。[...]文字を線で囲う線で囲うにはborderプロパティを使います。種類」の3つの値を指定します。それぞれの値を半角スペースで区切って指定していきます。指定する順番に決まりはりません。borderの種類には下記のようなものがあるので、お好みの物を指定します。ボーダーは表示さません。1本線で表示されます。2本線で表示されます。太さについては「2px」のように基本的には数値で指定します。色については1、カラーコードやカラーネームで指定します。margin-bottom:8px!important;}これテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこの例では、1本線で5pxの太さの赤線を指定しました。文字が枠線で囲まれているのが分かります。線の種類や色や太さを調整すればいろんな表現ができるのでいろいろ試してみてください。あざらし文字の枠線は見出しの装飾とかでよく使われるよより実践的な枠線の指定方法については下記の記事で解説しているので参考にしてみてください。参考記事CSSで思い通りの枠線を引く方法!border(ボーダー)を使いこなそうborderプロパティを使えば、要素を枠線で囲うことができます。枠線はボーダーと呼ばれることが多いです。[...]文字に影をつける文字に影をつけるには、text-shadowプロパティを使います。影の色;影の形を指定するには下記の3つを指定する必要があります。影のぼかし具合は多くなればなるほど、影が大きく薄くなっていきます。試してみると感覚が掴めるので、実際に書いて試してみましょう。実践テキストに影をつけてみましょう。}これテスト文章ですこれテスト文章です上段が影なしのテキストで、下段が影有りです。した影をつけるだけで、結構雰囲気が変わるのがわかりますね。あざらしテキストに影をつけるのは一時期流行ったけど、最近ではあまり使われなくなってきたかな。使いすぎるとダサいサイトと思われるので控えめに使う程度がおすすめだよ!行間を変える行間を調整するには、line-heightプロパティを使います。あざらし行間とは、行と行の間の幅のことだよ。単位」という形で指定します。単位は省略することもできます。単位なし現在のフォントサイズに対する割合になります。1の場合文字の大きさと同じ、1.5の場合文字の大きさの1.5倍という風になります。px(ピクセル)指定したpxに行の高さを設定できます。基本的は単位なしで使用することが多いです。単位なしで指定するのか?pxで指定すればわかりやすいような気がしますが、ほとんどのケースで単位なしで指定されます。これはpxで指定した場合、フォントサイズを変えるたびに行間も指定しなければならないからです。行間を「15px」とすると、フォントサイズが12pxくらいの時はいい感じに表示できますが、フォントサイズが30pxくらいの時は行間が小さすぎて重なってしまいます。単位なしでは「その時のフォントサイズ」の何倍かを指定するので、bodyに行間「1.5」などとと指定すれば、全ての要素でフォントサイズの1.5倍の行間が適用され、個々の要素の調整の必要がありません。実際に行間を変えてみましょう。}これテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですこれテスト文章ですいろんな行間を単位なしで設定してみました。行間1のものは狭すぎて読みづらく感じますが、行間を2.5に設定したものは今度は行間が広すぎて読みづらいと感じてしまいます。狭すぎても読みづらいし、広すぎても読みづらいので文字の1.5倍から1.8倍くらいに設定しておくのが良いでしょう。あざらし狭すぎる行間は思っている以上に読みづらいから気をつけよう!せっかくいいことを書いていても、行間が詰まりすぎて読まれないということがよくあるからもったいないよ!より実践的な行間の指定方法については下記の記事で解説しているので参考にしてみてください。行間とは、行と行の間の高さの設定で、文書の読みやすさを左右する大事なポイントです。行間が詰まっていると読みづらいさを感じますし、逆に広すぎると読むのことにストレスを感じさせてしまいます。[...]文字間を変える文字間を調整するには、letter-spacingプロパティを利用します。単位はpxやemなどで指定します。em(エム)現在のフォントサイズに対する比率で指定します。1emの場合フォントサイズと同じ、1.5emの場合フォントサイズの1.5倍という風になります。px(ピクセル)現在のフォントサイズに対する比率で指定します。1emの場合フォントサイズと同じ、1.5emの場合フォントサイズの1.5倍という風になります。基本的に文字間はemを使って指定します。pxで指定すればわかりやすいような気がしますが、行間のときと同じ理由で使い勝手が悪いためpxで指定することは稀です。実際に文字間を変えてみましょう。}これテスト文章ですこれテスト文章です文字間が変わりましたね。一つ目は程よく読みやすいですが、2つ目は文字間が広がりすぎて不自然ですし読みづらく感じます。文字間はフォントサイズの5%〜10%が読みやすいとされています。emの場合は「0.05em〜0.1em」で設定するのが良いでしょう。文字間とは文字と文字の間のスペースのことです。同じ文章でも、文字間の詰まりすぎた文章は読みづらく、逆に適切な文字間であれば読みやすくなるので、適切な値を設定しておきましょう。[...]文章を、左寄せ・中央寄せ・右寄せにする文字の揃える位置を変えるには、text-alignプロパティを使います。揃える位置;揃える位置には、「left」・「center」・「right」のいずれかを指定します。left左寄せになります。center真ん中に揃えます。right右寄せになります。}左ぞろえ真ん中ぞろえ右ぞろえ文字の揃え位置が変わりましたね。あざらし見出しを真ん中揃えにするためによく使われるよより実践的な揃え位置の指定方法については下記の記事で解説しているので参考にしてみてください。参考記事text-alignを使って、文字の右寄せ・左寄せ・中央揃えを行う方法テキストの装飾全部のせこれまでに解説してきたスタイルを組み合わせてみましょう。}これはbeforeですれはbeforeですれはbeforeですれはbeforeですれはbeforeですこれはafterですこれはafterですこれはafterですこれはafterですこれはafterです※余白を設けるために、paddingというプロパティを追加しています。beforeと比べるとかなり個性的なスタイルにすることが出来ましたね。くますごい...けどなんかダサいなあざらし装飾しすぎてもださく感じてしまうんだよね!これは例のために大袈裟にやってるけど、もうちょっと控えめの装飾の方が良いかなまとめ文字の装飾についてまとめました。覚えるプロパティがたくさんあって大変ですが、どれも比較的よく使われるので覚えておくと便利です。おさらいですが、この記事では下記のようなこと解説しています。text-alignすずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。CSSのpositionの使い方!absolute・relativeの違いも解説html&CSS入門CSSで重なり順を変更!z-indexの使い方解説html&CSS入門HTMLでリストを作ろう!内容によって3種類のリストを使い分けるhtml&CSS入門WEBサイトで使う画像の種類や特徴html&CSS入門すずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。