MENU
アーカイブ
つな
医療従事者からWebデザイナーへ転職。現在はフロントエンドエンジニア。このブログでは私自身が異業種からWeb業界に転職した体験を元に、Webデザイナーやコーダーを目指す方に役立つ記事、サイト制作にまつわる知識や技術について発信しています(適当な日記もたまに)。

Sassを使ってfont-sizeのrem単位をpx感覚で使う方法

計算が面倒なrem単位について、Sassの関数を用いてpxのごとく直感的に扱う方法を紹介します。

 

前提としてSassを使える環境が必要です。

そのような環境がまだないという方は、GulpでSassを含むタスクランナーを比較的簡単に導入できる方法も別の記事で書いていますので、是非この機会にやってみてください。

目次

記述方法

ベースとしてSassファイルに記述するものは以下のコードです。

$baseFontSize: 16;
  @function rem($pixels) {
    @return $pixels / $baseFontSize * 1rem;
  }

 

そしてremを使用する際は以下のようにfont-sizeを記述します。

p {
    font-size: rem(16);
}

 

このように記述するとCSSファイルでは1remと出力され、ブラウザでは16pxとなります。

rem(20)と書けば、CSSでは1.25remと出力され、ブラウザでは20px。

rem(40)なら、2.5rem、ブラウザでは40px。

 

つまり「rem( n )のnの数字がそのままpx値になる」ということです。

 

以上です。楽ちんですよね。

 

また、フォントサイズの「vw」単位もこの記述の仕方を利用して関数式で書くことができます。

個人的にはこちらも便利だなと思いますので是非。

シェアする
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次