CSSのプロパティまとめ-テキスト装飾編
頭の整理のために、CSSにはどのようなプロパティがあるのかということをまとめました。
割と詳しく説明しますので、CSSの理解に不安がある人は参考になるはずです。
今回は、テキストの装飾に関わるプロパティについて解説していきます。
フォントの装飾
まずは、フォントの装飾関連のプロパティを解説していきます。
フォントの色
colorプロパティは、説明不要かと思います。
フォントの色を指定することができます。
フォントの太さ
font-weightで、フォントの太さを指定できます。
100~900の値を用いて、細かく指定することができます。
また、大きな単位として、normalとboldが指定できます。
normalは400、boldは700に相当します。
さらに、lighterやbolderを使って、親要素よりも一段階違う値も設定できます。
ちなみに、フォントによってはその太さに対応するデータがない場合があり、その場合は指定した値と違う太さで表示されることになります。
フォントの変換
text-transfromで、フォントを変換させることができます。
プロパティ値は、次のとおりです。
| プロパティ値 | 説明 |
|---|---|
| none | そのまま(デフォルト) |
| uppercase | 全て大文字に変換 |
| lowercase | 全て小文字に変換 |
| capitalize | 最初の文字だけ大文字に変換 |
フォントの装飾
text-decorationプロパティで、フォントの飾りを指定できます。
値は次のとおりです。
| プロパティ値 | 説明 |
|---|---|
| none | 何も起きないデフォルト |
| underline | アンダーラインが表示される |
| overline | オーバーラインが表示される |
ちなみに、underlineを指定した場合は、text-underline-positionで位置を制御できます。
フォントの大きさ
9割の人は知ってると思いますが、font-sizeでフォントの大きさを指定できます。
単位としては、pxや%、emやremが使用できます。
ただ、あまりにも小さ過ぎると適用されない場合があります。
例えば、chromeでは10px、safariでは9pxが最小単位です。
フォントの影
text-shadowで、テキストの影を制御できます。
このプロパティは、次のように4つの値を取ります。
- 水平方向の位置
- 垂直方向の位置
- ぼかし半径
- 色
例えば、以下のように指定することができます。
h1{
text-shadow: 1px 1px 2px red;
}
テキストのレイアウト
CSSでは、テキストの装飾以外にも、テキストのレイアウトも指定することができます。
なので次は、テキストのレイアウトに関するプロパティを解説していきます。
文字の高さ
line-heightというプロパティを使って、テキストの高さを指定できます。
1がフォントサイズと同じ大きさになります。
なので、1.5を指定した場合は、テキストサイズの1.5倍の高さになります。
文字の間隔
文字の間隔も指定することができます。
letter-spacingが文字同士の間隔を制御し、word-spacingが単語同士の間隔を制御します。
こちらは、pxかem,remを使って指定できます。
今回紹介したプロパティは、ほとんどfontというショートハンドのプロパティで指定できます。
ただこのプロパティだと、どの値が何をスタイリングしてるかが分かりづらいので、あまり使われないかと思います。
フォントの種類
最後にフォントの種類について説明していきます。
こちらは、意外と理解してる人が少ないので、参考になるはずです。
フォントファミリー
font-familyで、フォントの種類を指定することができます。
ウェブサイトにアクセスしているマシンで利用可能な場合にのみ、ブラウザーはフォントを適用します。
そうでない場合は、ブラウザーのデフォルトフォントを使用します。
こちらは複数の指定が可能で、そのフォントが使用できなかった場合は、次のプロパティ値にフォールバックされます。
また、フォントを指定する場合は、フォントファミリー名か総称フォント名を使うことになります。
総称フォント名とは、明朝体やゴシック体など、フォントの総称となるフォント名になります。
総称フォント名を指定した場合は、ブラウザがその種類に合わせた使用可能なフォントを適用してくれます。
なので、なるべく意図したフォントを適用させるために、総称フォントを末尾などにつけるのが一般的です。
総称フォントにはいくつか種類がありますが、sans-serif(ゴシック体)、serif(明朝体)を覚えておけばOKです。
ちなみに、総称フォントを指定数場合は引用符が必要なく、フォントファミリーを指定する場合は使用します。
なので、以下のようになります。
body {
font-family:"MS Pゴシック",sans-serif;
}
webフォント
先ほどフォントファミリーの指定方法を説明しましたが、いろいろとややこしいですよね？
また、クライアントごとに表示が変わるのは、デザイン的に好ましくないと感じるかもしれないです。
それを解決するのが、webフォントになります。
これは簡単に説明すると、「どこからでもアクセスできる場所にフォントを置いて、みんなにそこのフォントを使ってもらう」という手法になります。
こうすることで、フォントが使えないということが起きないので、全てのクライアントに同じ文字を表示させることができるわけです。
具体的には、Googleフォントなどがありますが、他に有料のものなどもあります。
実際の使い方としては、以下の通りです。
@font-face {
font-family: 'myfont';/* フォント名 */
src: url('../fonts/special-font.ttf');/* フォント名 */
}
body {
font-family: 'myfont', sans-serif;
}
まず、@演算子を使って、フォントを読み込みそのフォントに名前をつけます。
そして、そのフォント名を使いたいところに適用させればOKです。
他にもリンクタグを使った指定方法もありますが、適宜使用するときに調べればOKかと。
まとめ
今回は、フォントに対するCSSのプロパティをまとめました。
この記事を参考にすれば、もうテキストの装飾で悩むことはなくなるはずです。
ぜひ、参考にしてください。
また、レイアウト作成編やアニメーション編も執筆中なので、お待ちください。
宣伝
0からエンジニアになるためのノウハウをブログで発信しています。
また、YouTubeでの動画解説も始めました。 YouTubeのvideoIDが不正です
インスタの発信も細々とやっています。
興味がある方は、ぜひリンクをクリックして確認してみてください！
Discussion