プログラミングの学習ならUdemyがおすすめです!詳細はこちら

【css】fontプロパティを使いショートハンド(一括指定)で記述する方法

疑問ちゃん

font関連のプロパティを一括で指定したい

そうゆう場合は、fontプロパティを使います。

fontプロパティ

fontプロパティとは、font-size、font-familyなど一括で指定できるプロパティです。

fontプロパティで一括で指定できる値

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

【css】文字をイタリック体(italic)や斜体(oblique)する場合はfont-styleを使おう!

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

【css】font-weightで文字を太くする方法!指定できる数値をわかりやすく解説

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

CSSのfont-sizeの値[px],[em],[rem]誰でも簡単にわかるように解説

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

【css】line-heightとは?指定できる単位について誰にでもわかるように解説

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

【css】font-familyとは?記述方法など誰でもわかるように解説

値の指定順序について

line-heightの値以外は、各プロパティの値は半角スペースで区切って指定しましょう!

しかし、必要な値だけを任意の順序で指定できるわけではない点に注意してください。

順序についてのルールは以下の通りです。

  1. はじめに、必要に応じてfont-styleとfont-weightの値を指定します。順序はどちらが先でも大丈夫です。指定しない場合はnormalにリセットされます。
  2. 次にfont-sizeの値を指定しましょう!この値は必須なので注意です。
  3. 次にline-heightの値を指定します。この値を指定する場合は、font-sizeの値のあいだを半角の(/)で区切ります。指定しない場合は値はnormalにリセットされます。
  4. 最後に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の間です。こちらは半角スペースではなく、/にしましょう!

まとめ

ショートハンドを覚えると効率が上がり、スピードが上がるのでどんどん活用していきましょう!

それではまた!

コメントを残す

メールアドレスが公開されることはありません。