CSS

フォントサイズを横幅で自動変更させる方法【Sass】

レスポンシブのサイトを作ることが多くなりましたね。
そこでremだったり、vwだったりサイズを指定する単位も多様化しました。

そこで今回は、運動の幅に合わせてフォントサイズが変動する指定方法をSassで紹介します。

ウィンドウ幅でフォントサイズを自動変更

では早速コードから。

 

@mixin fontsize($fsize){
  $windowW : 700;
  font-size: ($fsize / $windowW) * 100 + vw;
}

 

こんな感じで「(フォントサイズ/デザインの幅)*100」でフォントサイズを割り出してSassで計算しています。
使用する際は、

 

@include fontsize(30); //30pxの場合

 

このように記述し、デザインでのフォントサイズを入力するだけでOK!

 

フォントサイズを横幅で自動変更させるメリット

横幅に合わせてフォントサイズが小さくなるので、基本改行が変わりません。
デザイン通りに改行変えないで!という要望に答えやすいです。

 

今だとremを使うことが多いですが、1つの選択肢として使用してみて下さい!

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)