CSS/テキストとフォント関連

テキストとフォント関連

この章では、CSSを使用したテキストとフォントのスタイリングに関する基本的なプロパティから応用的なテクニックまでを解説します。テキストの外観やレイアウトを細かく調整することで、より魅力的で読みやすいデザインを作成できます。

以下は、テキストのスタイリングに関する基本的なプロパティです。

color

テキストの色を指定します。

p {
  color: #333333; /* テキストの色をダークグレーに設定 */
}

text-align

テキストの水平方向の配置を指定します。

h1 {
  text-align: center; /* テキストを中央揃え */
}

line-height

テキスト行の高さ（行間）を指定します。

body {
  line-height: 1.6; /* 行間を1.6倍に設定 */
}

text-transform

テキストの大文字小文字を変換します。

button {
  text-transform: uppercase; /* テキストをすべて大文字に変換 */
}

text-decoration

テキストの装飾（下線、取り消し線など）を指定します。

a {
  text-decoration: none; /* 下線を削除 */
}

フォントのスタイリングに使用される基本プロパティを以下に示します。

font-family

フォントの種類を指定します。

body {
  font-family: "Arial", sans-serif; /* Arialフォントを優先 */
}

font-size

フォントサイズを指定します。

h1 {
  font-size: 2em; /* フォントサイズを2倍の相対値に設定 */
}

font-weight

フォントの太さを指定します。

h2 {
  font-weight: bold; /* 太字に設定 */
}

font-style

フォントを斜体に設定します。

em {
  font-style: italic; /* 斜体に設定 */
}

font-variant

フォントのバリアント（小型大文字など）を指定します。

p {
  font-variant: small-caps; /* 小型大文字を使用 */
}

以下は、より高度なテキストのスタイリングに役立つプロパティです。

letter-spacing

文字間のスペースを調整します。

h1 {
  letter-spacing: 2px; /* 文字間を2px広げる */
}

word-spacing

単語間のスペースを調整します。

p {
  word-spacing: 5px; /* 単語間を5px広げる */
}

white-space

テキストの空白や折り返しの処理を指定します。

pre {
  white-space: pre; /* 改行や空白をそのまま表示 */
}

overflow-wrap

長い単語の折り返しを制御します。

div {
  overflow-wrap: break-word; /* 長い単語を折り返す */
}

Webフォントを使用すると、システムフォントに依存せず、任意のフォントをWebページで使用できます。以下はGoogle Fontsを使用する例です。

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

body {
  font-family: 'Roboto', sans-serif;
}

この章では、テキストとフォントに関連する基本的なCSSプロパティと応用的なテクニックについて解説しました。これらのプロパティを適切に使用することで、視覚的に魅力的で読みやすいテキストをデザインすることが可能です。