ぽんぽこ開発日記

主にHTML, CSS, JavaScriptなどフロントエンドの話を。目指せ脱初心者。

fontプロパティを使えば改善される2つのこと

みなさん、fontプロパティ使っていますか?
知ってるけど覚えるのがめんどくさくて使ったことがない。
そんな方に向けてfontプロパティの素晴らしさについてまとめてみました!!


今までこんなふうに書いていたりしませんか?

.hoge{
color: #000;
font-family: “メイリオ”;
font-weight: bold;
font-size: 24px;
lineheight: 2.0em;
}

 

いくらSublimetextが便利で予測変換能力がすさまじいからといって、このような冗長的なCSSを書いていては遅いですし、メンテがしづらい時がよくあります。少しのコード量であればそれもありかもしれません。しかしウェブ制作をしていると、このようなシンプルなCSSで収まってくれることはあまりありません。paddingやらdisplayやらなんやらで、ひとつのclassやidにひもづくプロパティが膨大になってきます。

そんな問題を解決してくれるのがこのfontプロパティ。fontプロパティを使えばさきほどの.hogeはこのようになります。

.hoge{
  color: #000;
  font: bold 24px/2.0em “メイリオ”;
}

なんと、わずか2行でまとめることができました!
便利やん!と思っても実はあまり使ったことがない、というのであればさっそく使ってみましょう!


fontプロパティの設定方法

fontプロパティではまとめてfont-style、 font-variant、 font-weight、 font-size、 line-height、 font-familyの6つのプロパティを設定することができます。

順番もある程度決まっており、そのルールにのっとって設定しなければなりません。その順番とは

  1. font-style, font-variant, font-weight (順不同)
  2. font-size
  3. line-height
  4. font-family

となっております。
文法的にはこんな感じ。

p{ font: font-style font-variant font-weight font-size/line-height font-family; }

※太い赤文字は省略可能。順番も自由
※line-heightは省略可能。

例えば、こんなふうに設定することとができます。

.test{
   font: bold 18px/1.3em "メイリオ";
}

 

fontプロパティのメリット

fontプロパティを使えば以下の2つの特典がもれなく得られます。もしあなたがfontプロパティと仲良くなれば家に帰る時間が早くなるかもしれません。

 

①メンテナンスのしやすい形になる
fontプロパティは上記で紹介した長ったらしいCSSを一行にまとめてくれます。一行にまとまることで読むコード量が絶対的に減り、さらに直感的に適応されているfontまわりのCSSが把握できるようになるので、のちのちメンテナンスがしやすい形になります。

 

②覚えてしまえば設定が早くできる
fontプロパティの設定方法を覚えてしまえば、長ったらしいCSSを書くよりも早く仕上げることができます。その差はわずかかもしれませんが年間を通せばおそらくものすごい時短になるのではないでしょうか。

 

 

fontプロパティを使う上での注意点

  • line-heightを設定する場合はfont-size/line-heightのようにline-heightの直前にスラッシュを忘れずに!
  • fontプロパティを使用すると、一度fontの情報がリセットされ再設定されるので他の要素からの継承がリセットされ、通用しなくなります。

 

以上、長くなってしまいましたがぜひfontプロパティを使いこなして楽しいCSSライフを送っていきましょう。