フォントとフォントプロパティの操作
メニューを表示するにはスワイプしてください
フォントはウェブページの雰囲気や可読性に大きな影響を与える要素。
本章では、最も一般的に使用されるフォント関連のCSSプロパティである font-family、font-size、font-weight、font-style について解説。
すべての例では、これらのプロパティによる見た目の変化を示すために同じテキストを使用。
font-family
font-family プロパティは、テキストの表示に使用する書体を指定。
p {
font-family: 'Montserrat', Arial, sans-serif;
}
複数のフォントをカンマで区切って指定することで、フォールバックとして利用可能。最初のフォントが利用できない場合、ブラウザは次のフォントを使用。常に serif、sans-serif、monospace などの汎用フォールバックを含めることが推奨される。
font-size
font-size プロパティは、テキストの表示サイズを制御。
p {
font-size: 16px;
}
主な単位：
px: 固定サイズ；em: 親要素に対する相対サイズ；rem: ルート要素に対する相対サイズ。
font-weight
テキストの太さを制御。数値値：100–900。キーワード：normal、bold、lighter。
font-style
テキストのスタイルを指定：normal、italic、oblique。
疑似クラス ::first-letter
::first-letter は要素（主に段落や見出し）の最初の文字を対象とし、装飾やスタイリング効果を適用可能。
selector::first-letter {
/* some styles */
}
次の例を実行して、その動作を確認。
index.html
styles.css
font-family はフォントファミリーとフォールバックを定義。
font-size はテキストサイズを px、em、rem で指定。
font-weight は数値やキーワードで太さを調整。
font-style はフォントのスタイルを変更。
::first-letter はテキストブロックの最初の文字を装飾。
1. どのプロパティがフォントの太さを決定しますか？
2. CSSにおけるfont-styleプロパティのデフォルト値は何ですか？
フィードバックありがとうございます！
AIに質問する
AIに質問する
何でも質問するか、提案された質問の1つを試してチャットを始めてください
