IT Design 旅 PetLife Life RenojiStock AboutUs
ITメモ
CSS
「CSS」の「Topics」
「印刷用CSS」を「コンテンツ」に適用する方法「表示サイズ別」に「CSS」を適用する方法「スマートフォン」に「CSS」を適用する方法「コンテンツ」の「縦位置」を「真ん中」に配置する方法「コンテンツ」の「横位置」を「真ん中」に配置する方法「ベージ表示」を「フワッ」とした「フェードイン」で表示する方法「CSS」で「スクロールバー」を表示・設定する方法
背景・背景画像関連
背景画像のスライドショーを作成する方法背景画像を表示場所に自動フィットさせる設定背景画像を表示位置を調整する方法「背景色」に「透明度」を加える方法 「背景色」を「グラデーション」にする方法
画像関連
画像の下にできる空白を消す方法背景や画像に透明感を加える方法画像の横に文字を回り込ませる方法「CSS」で画像を変更する方法
「CSS」の基礎知識
「CSS」のファイル書式「CSS」のヘッダー書式「CSS」のコード書式「CSS」を「HTML」ファイルに記述する方法「CSS」外部ファイルをHTMLファイルとリンクさせる方法「CSS」でコメントを使う方法「CSS」で利用する単位「CSS」でテキストを編集する方法「CSS」での「セレクタ」優先順位「CSS」の命名規則「BEM」とは
CSSプロパティ【レイアウト関連】
【 width 】「横幅」を指定する方法【 height 】「高さ」を指定する方法【 margin 】「枠線外側」の「余白」を指定する方法【 padding 】「枠線内側」の「余白」を指定する方法【 border 】「枠線（ボーダー）」を付ける方法【 outline 】「枠線（ボーダー）」を付ける方法【 border-radius 】要素の四隅に丸みを付ける【 transform 】コンテンツに「2D変形」「3D変形」を適用【 display 】「ブロック要素」「インライン要素」に変換【 position 】コンテンツの配置指定【 float 】コンテンツを片側に寄せる方法
CSSプロパティ【コンテンツ関連】
【 content 】コンテンツの追加
CSSプロパティ【背景関連】
【 background 】背景を設定する方法
CSSプロパティ【文字・テキスト関連】
【 color 】文字の色を設定する【 font 】フォントを設定を一括指定する方法【 font-size 】フォントサイズを変更する方法【 font-family 】フォントの変更をする方法【 font-style 】フォントのスタイルを指定する方法【 font-weight 】文字を太字にする方法【 font-stretch 】文字を横幅（フェイス）を指定する方法【 font-size-adjust 】小文字の大きさを設定する方法【 line-height 】テキストラインの高さを設定する【 text-indent 】テキストインデントを設定する【 text-align 】テキストの配置位置を設定する【 text-decoration 】テキストに加えるで装飾を設定する【 text-underline-position 】テキストのアンダーライン位置を設定する【 text-shadow 】テキストのシャドー位置を設定する【 text-transform 】テキストの文字形態を設定する【 white-space 】要素内のホワイトスペースを設定する【 word-break 】テキストの自動改行の設定をする【 word-spacing 】単語間の隙間を指定【 letter-spacing 】文字間の隙間を指定【 text-justify 】文章右端空白にならないように、単語間・文字間のスペースを調整【 text-autospace 】表意文字（漢字）と非表意文字（半角英数字）の隙間を指定【 word-wrap 】テキストの自動改行の設定をする【 writing-mode 】縦書きを設定【 direction 】文章の方向を設定【 unicode-bidi 】単語の並びを設定【擬似要素】「:before」 - 文字の先頭にマークを表示する方法
CSSプロパティ【カラー関連】
【linear-gradient】二色以上でグラデーションを作るカラー設定
CSSプロパティ【アニメーション関連】
【 animation 】アニメーション操作をする方法【 transition 】変化をスムーズにスムーズにする方法【 opacity 】要素の透明度を設定する





IT Memo >>> CSS >>> 【CSS】【 font-weight 】文字を太字にする方法

【CSS】【 font-weight 】文字を太字にする方法

【CSS】
【 font-weight 】プロパティ
文字を太字にする方法




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

太さの指定は、「数値」「キーワード」でできるようになっている。
良く使う「太字」にするための書式は、
font-weight: bold;
font-weight: 700;
と記述するだけ。
「bold」と「700」は、同じ太さを意味している値。
数値は、「1-1000」の間で指定が可能。


更に詳しい内容は、下記をご参照ください。



「font-weight」プロパティの使い方


「font-weight」プロパティは、
「フォント」を太くすることができる「CSSプロパティ」。

指定する方法は簡単で、
「キーワード値」「数値」で指定して太さを調節する。



「font-weight」プロパティの書式

■ キーワード値
font-weight: normal; font-weight: bold;

■ 親要素に対して相対的なキーワード値
font-weight: lighter; font-weight: bolder;

■ 数値のキーワード値
font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400;// normal font-weight: 500; font-weight: 600; font-weight: 700;// bold font-weight: 800; font-weight: 900;

■ グローバル値
font-weight: inherit; font-weight: initial; font-weight: revert; font-weight: unset;



キーワード値の意味

font-weight プロパティは、以下の一覧から選択した単一のキーワードで指定します。 値
  
thin (100) 通常のフォントの太さに比べると相対的に細くなる太さで、
数値の「100」と同じ太さ。
normal (400) 通常のフォントの太さで、
数値の「400」と同じ太さ。
bold (700) 太字のフォントと同じ太さで、
数値の「700」と同じ太さ。
bolder フォントの太さが親要素よりも相対的に1つ太くなります。
相対的な太さの計算に考慮されるフォントの太さは 4 つのみであることに注意してください。
下記の相対的な太さの意味を参照してください。
heavy (900)
数値 1 以上 1000 以下の数値で指定が可能。
キーワード値を数値に換算すると下記のようになる。
「thin (100)」「normal (400)」「bold (700)」「heavy (900)」となっている。
「321」と入力は可能ですが、「300」に自動換算されるらしいです。

OpenType 仕様書による数値換算表
・100 = Thin (Hairline)
・200 = Extra Light (Ultra Light)
・300 = Light
・400 = Normal (Regular)
・500 = Medium
・600 = Semi Bold (Demi Bold)
・700 = Bold
・800 = Extra Bold (Ultra Bold)
・900 = Black (Heavy)
・950 = Extra Black (Ultra Black)




キーワード値の相対的な太さ

継承値bolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700



Back