タイポグラフィ（デザイン）

color

文字色を指定します

value	description
`hotpink`	色名による指定	A/あ
`rgb(56, 189, 248)`	rgb による指定	A/あ
`rgba(56, 189, 248, 50%)`	rgba による指定	A/あ
`#f59e0b`	16 進数表記による指定	A/あ
`hsl(284 90% 70%)`	hsl による指定	A/あ

Demo

Night on the Galactic Railroad

銀河鉄道の夜

<div class="wrapper">
  <p class="primary-line">Night on the Galactic Railroad</p>
  <p class="sub-line">銀河鉄道の夜</p>
</div>

.primary-line {
  color: rgb(56, 189, 248);
  font-size: 20px;
}

.sub-line {
  color: rgba(56, 189, 248, 70%);
}

.wrapper {
  font-weight: bold;
  text-align: center;
}

概要

文字色を指定することができます。指定する値は色の指定方法を参照してください。

初見だと「`color`ってなんの色?」となりますが、文字色のことです。

Example

<p class="text">
  あの<span class="emphasis">イーハトーヴォ</span>のすきとおった風、
  夏でも底に冷たさをもつ青いそら、うつくしい森で飾られた <span class="emphasis">モリーオ市</span>、
  郊外のぎらぎらひかる草の波。
</p>

.text {
  color: #dbe1e9;
}
.emphasis {
  color: #38bdf8;
}

color

Demo

概要

Example

関連

参照