2016/09/17

あなたは理解できてる？CSSの「font-weight」の使い方とstrongタグの違い！

BO151030535008_TP_V
 

やぁ、腕毛が濃いユトピ(@yutopi60pa)だよ。

 
今回はcolor、font-sizeに引き続き、文字に関するCSSプロパティ「font-weight」について解説していきますよ。
機能としては太文字にする単純なものですが、フォントによっては細かい太さのしてもできちゃったりします。
 

そういえば皆さんはfont-weightとstrongタグの違いはしっかりと理解できていますか？
実はこれを間違えて理解していると文章の構造的にもSEO的にもアカン場合があります！

そこで今回は「font-weight」の使い方とstrongタグとの注意点を解説していくぜ！
 
 

font-weightとは？

 

CSSプロパティ「font-weight」とは、文字の太さを指定することができるプロパティです。
 

これだけ！！

 

これだけですけど、文字の読みやすさやデザインでは非常に重要なプロパティなので、しっかりとチェックしておきましょう！
 

それでは指定方法です。
 

  • 数値による指定
    • 100
    • 200
    • 300
    • 400
    • 500
    • 600
    • 700
    • 800
    • 900
  • キーワードによる指定
    • bold・・・700ほどの太さ
    • normal・・・400ほどの太さ
    • lighter・・・相対的に1段階細くする
    • bolder・・・相対的に1段階太くする

 

数字による指定では9段階での指定をすることが可能です。
キーワードの指定ではboldの場合は700ほどの太さに、normalの場合は400ほどの太さになります。基本的にnormalが標準的な文字の太さです。
 

lighter・bolderは親要素のfont-weightの太さによって変わってきます。
親要素のfont-weightが500を指定された場合、lighterは400、bolderは600になります。
 
 

ここまでがfont-weightの指定方法です。
では早速やってみましょうか！

 
 

font-weightを使おう！

数値で指定！

コード

 

結果

太さを100にしたよ！太さを100にしたよ！

太さを200にしたよ！太さを200にしたよ！

太さを300にしたよ！太さを300にしたよ！

太さを400にしたよ！太さを400にしたよ！

太さを500にしたよ！太さを500にしたよ！

太さを600にしたよ！太さを600にしたよ！

太さを700にしたよ！太さを700にしたよ！

太さを800にしたよ！太さを800にしたよ！

太さを900にしたよ！太さを900にしたよ！

キーワードで指定 - bold・normal

コード

 

結果

太さをnomarlにしたよ！太さをnomarlにしたよ！

太さをboldにしたよ！太さをboldにしたよ！

キーワードで指定 - bolder・lighter(親要素font-weight:400の場合)

コード

 

結果

太さをlighter(300)にしたよ！

太さをbolder(500)にしたよ！

キーワードで指定 - bolder・lighter(親要素font-weight:200の場合)

コード

 

結果

太さをlighter(100)にしたよ！

太さをbolder(300)にしたよ！

 
 

CSSヤンキー
あれ？変わってねーじゃん！！！ぶっとばすぞ！！

ユトピ
こわい

 
 

そうなんです。ここまで細かく指定できるのにもかかわらず、ほとんど変わっていないんです。
 

これはフォントの問題なのです。
フォントとは文字のデザインのこと。ゴシック体とか明朝体とかですね。
 

このフォントは1文字1文字のデザインだけではなく、細くしたバージョン、太くしたバージョンなども別で用意しなければなりません。
でずが、大抵のフォントは9段階も用意していないんです。大体が2~3種類ほど。
 
font
 

こういった理由からfont-weightで細かく数値を指定したとしても、反映されないんです。
 

9段階まで用意しているフォントはWEBフォントあたりを見ればあるとは思います。
ただ日本語フォントの場合はあまりありませんね。そこまで労力をかけるほど重要ではないんでしょうね。特に日本語フォントなんて半端ない時間を費やしそう。
 

数値で細かく指定することは実質できないようなものなので、font-weightを使用する場合は大体が「bold」か「normal」での指定をしています。ただ単に太くしたり、標準の太さに戻したりするならこの二つでも十分使うことができますよ。
 
 

font-weightとstrongタグの違いって？

 

これはよく疑問に思ってどうやって使い分けるのかが分からない方もいると思います。
font-weightもstrongタグも効果は文字を太字にすることです。(font-weightは細くもできますが)
 

試しに少しデモを。
 
 

font-weightとstrongタグの違いは？

font-weight:boldを指定

コード

 

結果

文字が太いぞ！文字が太いぞ！文字が太いぞ！文字が太いぞ！

strongタグを指定

コード

 

結果
HTML

文字が太いぞ！文字が太いぞ！文字が太いぞ！文字が太いぞ！

さて、やっぱりどちらも同じですよね。
これはどういった使い分けをするのでしょうか？
 

HTMLタグであるstrongは、太字にする他にも文章に”強調”という意味を持たせる役割があります。
これは見た目上ではわかりませんが、機械側としてはstrongタグで囲まれた部分は強調され、重要な文章だと理解しています。
 

これはSEO的にも意味のあることですね。
 

逆にfont-weightには強調といった意味は持っていないです。見た目では太文字なので強調されているように見えますが、機械側としてはそのようには理解していません。
 

font-weightとsteongタグにはこういった違いがあります。
ここはしっかりと理解しておきましょう。

 
 

まとめ

といった感じで、これがfont-weightです。
フォントの種類によってはバリエーションの高いプロパティなのですが、大体のものはboldで済んでしまいます。
なのであまり悩まずに使っていけるかなとは思いますね。
 

他にもfont-weightとstrongタグの違いもしっかりと意識しながら使っていきましょうね！

,