webデザイン独学【無料】文字の斜体と太さのCSSスタイル

ここでは文字の斜体と太さを変更するCSSについて説明します。文字の斜体を指定するスタイルとして「font-style」。文字の太さを指定するスタイルでは「font-weight」になります。斜体については、文字が少し斜めになる見え方をします。表現の一つですが頻繁に使うことは無いでしょう。一方、font-weightについては度々使います。文字の太さを指定するのでタイトルや強調したい文字にも使います。

こんにちは！あーるくんです。ヾ ^_^♪
未経験からWebデザインの知識を独学できる記事を書いています。プログラミングに興味がある人は是非参考にして下さい。HTMLとCSSの知識が身につきますよ！

もくじ

webデザイン独学【無料】文字の斜体と太さのCSSスタイル

斜体の表現｜font-style
font-styleの記述方法。
文字の太さ｜font-weight
font-weightの記述方法。
classでfont-weight適用する参考例。
まとめ

文字の太さを指定するのがfont-weightだね。

文字の斜体を指定するはfont-styleね！

斜体の表現｜font-style

	スタイル	内容
font-style (ﾌｫﾝﾄｽﾀｲﾙ)	normal	斜体で表示しません。
	oblique （ｵﾌﾞﾘｰｸ）	斜体で表示します。日本語フォントの場合、単純に斜めに傾けた表示になります。
	italic (ｲﾀﾘｯｸ)	対応するフォントに対してイタリック体で表示します。筆記体風に斜めに傾いた表示になります。

※ Safari（MacintoshやiPhone）では「oblic」と「italic」の書体を持っている欧文フォントのみ有効になります。

ブラウザーによって「oblique」と「italic」を指定しても、表示に差が出ない場合があります。

font-styleの参考例。

上記では、CSSスタイルで「oblique」と「italic」を指定しました。MacBookproのSafariブラウザからスクショした参考画像です。

font-styleの記述方法。

p{
font-size:18px;
font-style:oblique;
}

p{
font-size:18px;
font-style:italic;
}

pタグに対してfont-styleを適用した例です。上記のように書くことで文字が斜めになります。

文字の太さ｜font-weight

	スタイル	内容
font-weight (ﾌｫﾝﾄｳｪｲﾄ)	normal	太字で表示しません。
	bold (ﾎﾞｳﾙﾄﾞ)	一般的な太字で表示します。
	bolder (ﾎﾞｳﾙﾀﾞｰ)	現在表示されている太さより1段階太く表示します。
	lighter (ﾗｲﾀｰ)	現在表示されている太さより1段階細く表示します。
	100～900	100～900の数値を100刻みで指定します。400がnormal、700がboldと同じ太さになります。（ブラウザにより多少大きさが異なります）