今回のポイント
今回はフォントの太さを変える指定方法について学んでいきましょう。
指定で使用するプロパティは『font-weight』です。
そしてこの『font-weight』には『単語で指定する方法』と『数字で指定する方法』の２つがあります。
このそれぞれの指定方法について今回は解説していきますね。
前準備をしよう
HTMLファイルを準備する
まずはHTMLのファイルを準備しましょう。
HTMLファイルの作り方は以下の記事を参考にしてみて下さい。
そしてそのファイルの中に以下のソースを記述します。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h2>ぱくぱくCSSを学ぶ。</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</body>
</html>
CSSファイルを準備する
今回はCSSファイルを外部に作成してソースを記述する方法で解説します。
この方法については以下の記事を参考にして下さい。
それでは今回のHTMLファイルをブラウザで確認しておきましょう。
font-weightを単語を使って指定する
それでは『font-weight』の使い方について解説します。
今回はp要素に対して文字の太さを指定していきます。
基本的には以下のように記述します。
p {font-weight:○○○○;}
そして『○○○○』の部分には太さを指定するための単語を記述します。
単語と意味は以下の通りです。
bald ：太く
bolder ：やや太く
normal ：普通
lighter ：やや細く
inherit ：親要素の指定を引き継ぐ
それではそれぞれを指定して試してみましょう。
前もって準備したCSSへ以下のソースコードを記述してみて下さい。
p {font-weight:bald;}
それではブラウザで確認してみましょう。
文字が太くなったのが分かりますか？
それではもう一つ試してみましょう。
先程のCSSを、以下のソースコードに書き換えてみて下さい。
p {font-weight:lighter;}
それではブラウザで確認してみましょう。
文字が細くなったことが分かりますか？
font-weightを数字を使って指定する
数字を使って文字の太さを指定する場合も、先程と同様の方法で記述します。
p {font-weight:○○○○;}
そして『○○○○』の部分には数字を入れるわけです。
数字は１００〜９００を使って指定します。
先程の単語と数字で比較すると以下と同じ効果を得ることができます。
normal ＝ 100
bald = 700
そして数字で指定する場合は単語で指定する場合とは違い、文字の数字で太さを微調整することもできます。
試しに文字の太さを『５００』で指定してみましょう。
先程のCSSを以下のソースコードに書き換えてみて下さい。
p {font-weight:500;}
それではブラウザで確認してみましょう。
いかがでしょうか？
微妙な変化ですが、文字の太さが変わりましたね。
このように文字の太さを変えることで、ユーザーへ文章の印象を強く与えたい時には有効的な指定となります。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
