文字のスタイル設定（続き）

文字に色を付ける

em（強調）ってあんまし使わない。

このあまり使わないemphasisを利用して文字色を変えてみる。
カスタムクラスを指定しなければ普通にemphasisとして使えるので問題ないかと思う。

こうすればemphasisだが、

[markdown]

*フォントに色*を付ける。

フォントに色を付ける。

インライン要素にクラス名が付けられるのを利用して文字色を変えてみる。

[markdown]

*フォントに色*{:.fc-red}を付ける

フォントに色を付ける

[html]

<em class="fc-red">フォントに色</em>を付ける

emタグだがCSS側でfont-style: normal;にしてしまいcolor: red;にしている。 クラス名にfc-色名で文字色指定する。

本文中の説明とかいれたいとき。　<– こんな感じで使えるかも

fc-xxxクラスの強調文字をノーマルスタイルにする設定はこれ。

em[class^="fc-"], 
em[class*=" fc-"]  {
  font-style: normal;
}

もし斜体文字に色をつけたかったらまたスタイルを指定しないといけないが、日本語だとあまり使わないので問題ないだろう。ただ。どうしてもイタリックの色文字にしたい場合のために、{: style="font-style: italic;"}とか書かなくていいように、emクラスも定義しておく。

em.em { font-style: italic; }

[markdown]

*イタリックの色文字*{:.em.fc-red} です。

イタリックの色文字 です。

文字の太さを変える

同じ手法で文字の太さを部分的に変える。markdownでも**太文字**とすれば太文字になるが、より太く、より細くも用意できる。.font.fw-xxxで指定する。

[markdown]

フォントの*太さノーマル*{:.font.fw-normal}。_font weight is normal_{:.font.fw-normal}.
フォントの*太さを*{:.font.fw-bold}変える。_font weight is bold_{:.font.fw-bold}.
より*太い文字*{:.font.fw-bolder}。_font weight is bolder_{:.font.fw-bolder}.
より*細い文字*{:.font.fw-lighter}。_font weight is lighter_{:.font.fw-lighter}.

フォントの太さノーマル。font weight is normal.

フォントの太さを変える。font weight is bold.

より太い文字。font weight is bolder.

より細い文字。font weight is lighter.

cssの設定はboldとbolderの区別がつきにくいのでbolderのみ数値で設定している。font-weight: 1000;は最高値なので細かい文字はつぶれる。また日本語だとlighterにあまり意味がない。

[scss]

.font {
  &.fw-lighter { font-weight: lighter; }
  &.fw-normal { font-weight: normal; }
  &.fw-bold { font-weight: bold; }
  &.fw-bolder { font-weight: 1000; }
}

太さboldで、文字色oliveとした例

[markdown]

_オリーブ色の太い文字_{:.font.fw-bold.fc-olive}です。

オリーブ色の太い文字です。

.fw-xxxの付いたemもfc-xxxと同様にスタイルノーマルにする。

em[class^="fw-"], 
em[class*=" fw-"]  {
  font-style: normal;
}

文字色クラス

.fc-カラー名で文字色を変えられるようにしたが、これはすでに_color-palette.scssでカラーの変数リストを作ってあるので簡単。

// font color
@each $key, $val in $color-var-list {
	.fc-#{$key} { color: $val !important;	}
}

ただこれだけで153色のfc-xxxが完了。

fc-xxxクラスは割と使うと思うので、.fontクラスに属さない単階層のクラスにした。なので、.font.fc-xxxと書かなくてもfc-xxxだけで使える。

文中の色文字は、強調表示*em*を使わないといけないが、.fc-xxxや.fw-xxxが別に*em*に依存しているわけではないので、

普通に段落に適用すれば、段落全体を色文字にできる。

普通に段落に適用すれば、段落全体を色文字にできる。
{:.fc-limegreen}

背景色

background-colorもfc-xxxと同じ方法で定義する。bg-xxxで指定。これもすでに変数リストがあるので簡単。.bg-transparentという背景色透明のクラスも定義しておく。これが意外と便利。

.bg-transparent { background: transparent !important; }

// background 140+13 color
@each $key, $val in $color-var-list {
	.bg-#{$key} {	background: $val !important;	}
}

これも単階層のクラスなので指定するだけでバックの色が変わる。

Background Gold {:.bg-gold}