【CSS】文字に対して出来ることをまとめてみた【初心者向け】

こんにちは朱夏です。

今回は、CSSで文字に対して出来ることをまとめてみようと思います。

文字の大きさを変えたり、色を変えたりするのは、webページ作成では頻繁に使うものなので覚えておいて損はないはずです。

それではいってみましょう。

文字の大きさを変えたい

文字の大きさ(フォントサイズ)を変える方法です。
文字の大きさを変える時に使うプロパティは「font-size」です。

サンプルはこちら。

See the Pen
XWbGRYV by 朱夏 (@syunatsu1)
on CodePen.

サイズを指定する単位は色々なものがあるので、場合によって変更してみてください。

文字の色を変えたい

文字の色を変更するには、「color」プロパティを使います。

コードはこんな感じです。

See the Pen
RwPdgbw by 朱夏 (@syunatsu1)
on CodePen.

文字の太さを変えたい

文字の太さを変えるには、「font-weight」プロパティを使います。

太さの指定方法は2種類あります。

1. 数値で指定
2. テキストで指定

それぞれのサンプルを用意しました。

See the Pen
MWwxoJX by 朱夏 (@syunatsu1)
on CodePen.

数値で指定する場合、100、200、300、～900まで9段階で指定できますが、実際には600未満か600以下かの2段階でしか切り替わりませんでした。

ブラウザが対応していないのか、フォントが対応していないのかまでは解りませんが、それならテキスト指定の「bold」を使って置けば良いと思います。

文字のフォントを変えたい

文字のフォントを変えたいときは「font-family」プロパティを使います。

フォントの指定方法は2パターンあります。

1. キーワードで指定
2. フォント名で指定

サンプルはこちら。

See the Pen
WNvmOyM by 朱夏 (@syunatsu1)
on CodePen.

また、指定できるフォントは、基本的にはブラウザが対応しているフォントになります。
どのブラウザでもフォントを統一して表示させる方法として、webフォントを使うということも可能です。

あとがき

というわけで、文字に対して出来ることをまとめてみました。

今回まとめたもの以外にもいくつかのプロパティがあります。
ですが、殆ど使われる事のないものやIE独自のものなどは、今回のまとめからは外しました。

今回は以上です。
次回もよろしくお願いします。