[CSS]見出しや本文のfont-sizeとline-heightの単位にremを使用して、レスポンシブ対応にするスタイルシート

サイト構築 -CSS

Post on:2018年7月20日

sponsors

生成 AI と著作権？5分で分かるAdobe Fireflyの安全な商用利用のための設計 | アドビ公式

見出しのhn要素、本文のp要素のfont-sizeとline-heightをデスクトップとスマホに適したサイズに自動的に算出するためのSCSSファイルを紹介します。

サイズ指定の単位には「rem」を使用しており、ルート要素に基づいて定義します。

SCSScale -GitHub

サイズのベースとなっているのは、下記の記事からです。

参考: A More Modern Scale for Web Typography

SCSSファイルはそのまま使用しても、カスタマイズしてもOKです。「rem」のフォールバックには、「px」が使用されています。

// Function for converting a px based font-size to rem.
@function calculateRem($size) {
  $remSize: $size / 16px;
//Default font size on html element is 100%, equivalent to 16px;
  @return #{$remSize}rem;
}
@function calculateNum($lheight) {
  $numSize: $lheight;
//Default font size on html element is 100%, equivalent to 16px;
  @return #{$numSize};
}

// Mixin that will include the fall back px declaration as well as the calculated rem value.
@mixin fontSize($size) {
  font-size: $size;
  font-size: calculateRem($size);
}
@mixin lineHeight($lheight) {
  line-height: calculateNum($lheight);
}