CSSで太字~細字の調整方法

この記事は約2分で読めます。
広告

なんとな~くだけど、タイトルは見やすく「太字」。テキストは読みやすく「細字」。
みたいにある日本語のウェブサイトの文字ルール。そんなルールも扱えなくちゃ従えないじゃない。
基本を押さえるために、学習は大事。

文字の太さの変更は「font-weight」で命令できる。でもエディタ使ってるとfont-w….あたりで記述できない。
ちゃんと覚えてってなるけどエディタ様(Atom)のおかげで覚える手間も省けていいね。

そのfont-w…なんだけど指定方法が2つあって、「normal 、bold、lighter、bolder」ってなんとなく、太く、細く、相対的に細く太くとかを指定する方法と「100~900」と数値でビシッと指定する方法。

どちらでもいいけど、数値で指定する方法は対応してるフォントがウェブフォントくらいだからウェブフォントを使う時は細かく数値で、それ以外はなんとなくの方でOKな感じ。

前置きが長くなっちゃって申し訳ない。
では、指定方法はこちらです!

// 大体このどちらかの指定でOKです。相対的にとか気にしなくて(覚えなくて)も大丈夫
font-weight: normal;
font-weight: bold;
// 数値を指定する場合
font-weight: 300;(100~500までがnormalの太さ)
font-weight: 600;(600~900までがboldの太さ)
エンデ・バタローをフォローする
CSSサイト制作

埼玉県北本市に越してきて2年と少しになります。以前は東京都の京王線沿線に、その前は神戸の三宮、さらにその前は名古屋の八事霊園近くに住んでいました。

怖い話が大好きで、ネット怪談、ホラー小説、心霊Youtuber(オウマガドキch、ゾゾゾ)を寝る前のお供にしてます。

フロントエンドエンジニアとして9年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

エンデ・バタローをフォローする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました