zukucode
主にWEB関連の情報を技術メモとして発信しています。

less font-sizeをremで汎用的に使いこなす

em%のようにサイズを相対的に指定すると、親要素の影響を受けてしまうのでサイズの計算が難しくなってしまいます。

css3ではremroot em)という単位でルートの要素(<html>)のサイズに対しての相対的な値を指定できるようになりました。

その便利なremlessのミックスインを使って便利に使いこなす方法を紹介します。

ルートのサイズの定義

最初にルート要素<html>のサイズを定義します。このサイズがページ全体の基準のサイズとなります。

html {
  font-size: 62.5%;
}

62.5%と指定すると、ベースのサイズが10pxになるため、計算がとても簡単になります。

例えばある要素のフォントサイズを16pxにしたい場合は10pxに対して1.6倍なので1.6remとなります。

font-sizeミックスインの作成

// ミックスイン
.font-size(@font-size: 16){
  @rem: (@font-size / 10);
  font-size: @font-size * 1px; // IE8などのフォールバック
  font-size: ~"@{rem}rem";
}

// lessで実装
.foo {
  .font-size(16);
}

// コンパイル後
.foo {
  font-size: 16px;
  font-size: 1.6rem;
}

フォントサイズはこのようにして実装しておけば、ページ全体の文字サイズを調整したい場合はルート要素<html>のサイズを調整するだけでよくなります。


続きを表示

関連記事

  • gulp lessをcssにコンパイルする

    lessファイルをgulpを使ってcssにコンパイルします。gulp-lessとgulp-autoprefixerをインストールします。gulp-autoprefixerはなくても構いませんが、古いブ...


  • less cssファイルをそのままImportする

    lessでcssファイルをそのままImportする方法を紹介します。cssの@importではなく、lessのコンパイル時にcssを読み込みます。下記のように(inline)を追加します。lessで実...


  • Vue.js lessを使いwebpackでビルドする

    .vueファイル(単一ファイルコンポーネント)のstyleをcssではなくlessで実装して、webpackでビルドをします。vue-loaderのオプションにlessのloaderを追加します。


  • Vue.js lessで外部のlessファイルをImportする

    メインカラーなどの共通情報は外部のlessファイルに記載し、各vueファイルではそのlessファイルをImportして実装するのが効率的です。.vueファイル内のlessで外部のlessファイルをIm...


  • webpack モジュールのパスを絶対パスで指定する方法

    自分で作成したモジュールをインポートするときはインポートするファイルを基準に相対パスで指定する必要があります。フォルダ構成によっては深く階層を辿らないといけないので、フォルダ構成が変わってしまうと大変...


  • webpack lessをImportしてビルドする

    htmlやbodyなどに適用するベースのクラスを外部のlessファイルに実装して、スタイルをサイト全体に適用したい場合があります。外部のlessファイルをモジュールとしてImportしてwebpack...


  • cssのcalcの設定をlessで記述するときの注意点

    cssで計算式を行うためのcalcをlessで同じように実装するには少し工夫が必要です。普通にcalcを指定すると、lessをコンパイルしたタイミングで計算が行われてしまいます。以下のようにダブルクォ...