フォントやテキストに関するCSS (font-family など)

投稿日時 : 2024/11/09 更新日時 : -

ここではフォントやテキストに関するCSSの基本をレクチャーする。全てを覚える必要はないが、どんな事ができるのかは確認するようにしよう。

フォントを変更するfont-familyについて

Webサイトには無料で使えるたくさんのフォントが公開されている。ダウンロードや配布先からフォントデータを参照する事により一風変わったフォントをWebサイトで使うことができる。

実は日本語のフォントは漢字がたくさんあるからフォントデータは少し容量が大きい事が多い為、それを使うとWebサイトの表示が遅くなるので僕はお勧めしない

新しいフォントを使う場合はその辺も考えないといけないのですね


html {
  font-family: ’使いたいフォントをここに書く’;
}

例えば


html {
  font-family: Yuthic, "游ゴシック", "Yu thic", "ヒラギノ角ゴシック";
}

このコードは前回のページに出てきた<html>のルートのフォントを変えている。上記はブラウザやOSがデフォルトで持っているフォントなので読み込み速度は速い。

ダウンロードしたフォントや公開されているフォントを使いたい場合はCSSの応用編で解説する。

色を扱うカラーコードは別のページのCSSで色を扱う為のカラーコードについてで解説した。これを使ってテキストをデザインしよう。


.style1 {
  color: 'フォントの色をカラーコード等で指定';
  background-color: '背景色をカラーコード等で指定';
}

上記を使った例を見てみよう。


<style>
.style1 {
  color: white;
  background-color: #0044ff;
}
</style>
<body>
 <span class="style1">デザインされたテキスト</span>
</body>

デザインされたテキスト

フォントのカラーは白で背景が青色になっているな。

表が大きいので面食らうかもしれないが、たいしたことは書いていない。大切な部分だけ色を付けたので確認してほしい。

プロパティ	値	説明
font-weight	100	フォントを最も細く
font-weight	200	フォントを細く
font-weight	300	フォントを少し細く
font-weight	400	フォントの太さを通常に
font-weight	500	フォントをほんの少し太く
font-weight	600	フォントを少し太く
font-weight	700	フォントを太く
font-weight	800	フォントをとても太く
font-weight	900	フォントを最も太く
font-weight	thin	100と同じでフォントを最も細く。hairlineと書いてもOKらしい
font-weight	extra-light	200と同じでフォントを細く。ultra-lightと書いてもOKらしい
font-weight	light	300と同じでフォントを少し細く
font-weight	normal	400と同じでフォントの太さを通常に
font-weight	medium	500と同じでフォントをほんの少し太く
font-weight	semi-bold	600と同じでフォントを少し太く。demi-boldと書いてもOKらしい
font-weight	bold	700と同じでフォントを太く
font-weight	extra-bold	800と同じでフォントをとても太く。ultra-boldと書いてもOKらしい
font-weight	black	900と同じでフォントを最も太く。heavyと書いてもOKらしい
font-style	italic	テキストを斜体にする
text-decoration	underline	テキストに下線を引く
text-decoration	line-through	テキストに打消し線を引く
line-height	0.0 ～ x.x	1.5と指定したら文章の行間の幅を1.5倍にする
letter-spacing	px	3pxと指定したら文章で文字と文字の間隔が3px広がる

この例ではフォントを太くし、斜体にし、下線を引き、行間を2.5倍に、文字と文字の間隔を3pxに指定している。


.font-style {
  font-weight: 700;
  font-style: italic;
  text-decoration: underline;
  line-height: 2.5;
  letter-spacing: 3px;
}

テキストに関するCSSのたくさんのプロパティを指定する事で、このように簡単にテキストのデザインや見た目を変更できるので覚えておこう！テキストに関するCSSのたくさんのプロパティを指定する事で、このように簡単にテキストのデザインや見た目を変更できるので覚えておこう！

タグ	説明
<strong>テキスト</strong>	重要なテキストを意味する。これを使うとSEOでそのテキストがヒットしやすくなるかも！？
<em>テキスト</em>	強調されるテキストを意味する。フォントサイズの単位のemだな
<u>テキスト</u>	テキストに下線を引く。使われなくなってきているので非推奨になる可能性も
<mark>テキスト</mark>	ハイライトされるテキスト。下でCSSのサンプルデザインを公開しておく
<del>テキスト</del>	テキストを打ち消し線で表示して、削除されている事を示せる

上記のタグをデフォルトで表示すると下記のようになる。

strongタグのテキスト
emタグのテキスト
uタグのテキスト
markタグのテキスト
~~delタグのテキスト~~


mark {
 background-color: lime;
}

強調されるmarkのデザインを変更

上記のようにタグを直接CSSでデザインを修正する事ができる。markはデフォルトは背景が黄色だが、ライム(黄緑)にCSSで変更した。このようにhtmlタグをcssで自分のサイト用にデザインを変更して使う事を覚えよう。