疑問ちゃん
font関連のプロパティを一括で指定したい
そうゆう場合は、fontプロパティを使います。
fontプロパティ
fontプロパティとは、font-size、font-familyなど一括で指定できるプロパティです。
fontプロパティで一括で指定できる値
・font-styleの値(font-styleについては、下記の記事を参考にしてください。)

・font-weightの値(font-weightについては、下記の記事を参考にしてください。)

・font-sizeの値 必須(font-sizeについては、下記の記事を参考にしてください。)

・line-heightの値(line-heightについては、下記の記事を参考にしてください。)

・font-familyの値 必須(font-familyについては、下記の記事を参考にしてください。)

値の指定順序について
line-heightの値以外は、各プロパティの値は半角スペースで区切って指定しましょう!
しかし、必要な値だけを任意の順序で指定できるわけではない点に注意してください。
順序についてのルールは以下の通りです。
- はじめに、必要に応じてfont-styleとfont-weightの値を指定します。順序はどちらが先でも大丈夫です。指定しない場合はnormalにリセットされます。
- 次にfont-sizeの値を指定しましょう!この値は必須なので注意です。
- 次にline-heightの値を指定します。この値を指定する場合は、font-sizeの値のあいだを半角の(/)で区切ります。指定しない場合は値はnormalにリセットされます。
- 最後にfont-familyの値を指定します。こちらの値も必須なので注意です。
fontプロパティの記述例
記述例は以下になります。
h1{
font: 32px selif; //font-sizeとfont-familyのみ指定
}
p{
font: bold 18px/1.5 "メイリオ","Meiryo" sans-serif; //font-weightとfont-sizeとline-heightとfont-familyの場合
}
h1タグには、必須項目のfont-sizeとfont-familyの記述例です 値のあいだは半角スペースをあけて記述しましょう。
pタグには、左からfont-weight,font-size,line-height,font-familyを記述しています。注意してほしいのがfont-sizeとline-heightの間です。こちらは半角スペースではなく、/にしましょう!
まとめ
ショートハンドを覚えると効率が上がり、スピードが上がるのでどんどん活用していきましょう!
それではまた!