2024.12.26 Web制作

Scss/flocssで自作ユーティリティー font-size / font-weight編

 

font-sizeでは、u-fs-20やu-fs-md-24など「u-fs」、font-weightではu-fw-boldやu-fw-mediumなど「u-fw」の接頭辞がついた、ユーティリティーを作成します

フォルダ構成やutilityの適用順などはflocssを基準にしています

社内のコーディング共通フォーマットとして少しずつ独自の改良をしてきた設定です

下記もあわせてご覧ください

ゴール

  • media queryのサイズによる階層的な適用が確実にされること
  • font-size
    • オリジナル名称の設定を作成すること
    • ピクセルごとの設定を作成すること
  • font-weight
    • weight名で設定できること

前提

foundation/variable

使用しないbreak pointを入れておくと無駄な設定ができてしまいますので、注意してください

$break-points: (
  all: '',
  lg: 'screen and (max-width: 1024px)',
  md: 'screen and (max-width: 820px)',
) !default;

$font-sizes: (
  sm: (14, 13, 12),
  md: (20, 19, 18),
  lg: (28, 27, 26),
);

$font-weights: (
 thin: 100,
 extra-light: 200,
 light: 300,
 regular: 400,
 medium: 500,
 semibold: 600,
 bold: 700,
 extra-bold: 800,
 black: 900,
);

foundation/mixin

@use 'sass:map';
@use 'sass:math';

@function Rem($size) {
  @return math.div($size, 10) + rem;
}

@mixin mq($breakpoint: md) {
  @if($breakpoint == 'all') {
    @content;
  } @else {
    @media #{map.get($break_points, $breakpoint)} {
      @content;
    }
  }
}

使用法

font-size

オリジナル名称の設定

.u-fs-{$font-sizes}

ピクセルごとの設定

.u-fs-{数値}
.u-fs-{$break-points}-{数値}

パラメータ

{数値} … 10～32

{$font-sizes}は、上記前提を参照

font-weight

オリジナル名称の設定

.u-fw-{重さ}
.u-fw-{$break-points}-{重さ}

パラメータ

{重さ} … 上記前提の$font-weights

使用例

<h2 class="u-fs-sm u-fw-regular u-fw-lg-bold u-fw-md-medium">
・・・
</h2>

上記では、画面幅により下記のようになります

  • 1025px以上：「u-fs-sm」でfont-sizeが1.4rem / 「u-fw-regular」でfont-weitが400
  • 821～1024px：「u-fs-sm」でfont-sizeが1.3rem / 「u-fw-lg-bold」でfont-weitが700
  • 820px以下：「u-fs-sm」でfont-sizeが1.2rem / 「u-fw-md-medium」でfont-weitが500
$font-weights: (
 thin: 100,
 extra-light: 200,
 light: 300,
 regular: 400,
 medium: 500,
 semibold: 600,
 bold: 700,
 extra-bold: 800,
 black: 900,
);
$font-sizes: (
  sm: (14, 13, 12),
  md: (20, 19, 18),
  lg: (28, 27, 26),
);

上記$font-sizesの設定は、この名称は自由に作成できるため、例えば、h1variationやh2variationなどの設定を作成することで、複数の文字設定も作成できます。

最終形

上記の前提は、各環境にあわせ別ファイルとして振り分け、下記ファイルで読み込んでください

font-size

@use 'sass:map';

@use '../../foundation/variable' as *;
@use '../../foundation/mixin' as *;

// -----------------------------------------------------------------
// Font-Size
// -----------------------------------------------------------------
.u-fs {
  @each $breakpoint, $query in $break-points {
    @include mq($breakpoint) {

      // $font-sizesのkey名で設定
      @each $name, $values in $font-sizes {
        $num: index(map.keys($break-points), $breakpoint);
        &-#{$name} {
          font-size: #{Rem(nth($values, $num))} !important;
        }
      }

      @for $i from 10 through 32 {
        @if $breakpoint=='all' {
          &-#{$i} {
            font-size: Rem($i) !important;
          }
        } @else {
          &-#{$breakpoint}-#{$i} {
            font-size: Rem($i) !important;
          }
        }
      }
    }
  }
}

font-weight

// 上記前提が記載されたファイル
@use '../../foundation/variable' as *;
@use '../../foundation/mixin' as *;

// -----------------------------------------------------------------
// Font-Weight
// -----------------------------------------------------------------
.u-fw {
  @each $breakpoint, $query in $break-points {
    @include mq($breakpoint) {

      @each $key, $weight in $font_weights {
        @if $breakpoint=='all' {
          &-#{""+$key} {
            font-weight: $weight !important;
          }
        } @else {
          &-#{$breakpoint}-#{""+$key} {
            font-weight: $weight !important;
          }
        }
      }

    }
  }
}

解説

上記最終系を一つずつ見ていきます。下記はfont-size及びfont-weightで同じです

ループ設定

$break-points: (
  all: '',
  lg: 'screen and (max-width: 1024px)',
  md: 'screen and (max-width: 820px)',
) !default;

上記$break-pointsをループして展開していきます（font-weightの場合は、u-fsの部分はu-fwとなります。以下同様）

.u-fs {
  @each $breakpoint, $query in $break-points {
    @include mq($breakpoint) {
・・・
  }
}

展開されるイメージは下記の通りです

.u-fs {
 // all
 // lg
　@media 'screen and (max-width: 1024px)' {
 }
 // md
　@media 'screen and (max-width: 820px)' {
 }
}

最初の$breakpointは「all」となりますが、下記mixinでは、allの場合は、特に処理を行っていませんので空になります

@mixin mq($breakpoint: md) {
  @if($breakpoint == 'all') {
    @content;
  } @else {
    @media #{map.get($break_points, $breakpoint)} {
      @content;
    }
  }
}

ここでのポイントは、「$break-points」を大きいサイズから設定していことです

詳細クラスの設定

font-size

オリジナル名称の設定

配列「$font-sizes」を展開していきます

$font-sizes: (
  sm: (14, 13, 12),
  md: (20, 19, 18),
  lg: (28, 27, 26),
);

$font-sizesにある各変数のカッコ内の数字は、$break-pointsの数と同じ数設定しています

したがって、ここは、左から「all」「lg」「md」のpxサイズを数値のみで設定しています

.u-fs {
  @each $breakpoint, $query in $break-points {
    @include mq($breakpoint) {
      @each $name, $values in $font-sizes {
        $num: index(map.keys($break-points), $breakpoint);
        &-#{$name} {
          font-size: #{Rem(nth($values, $num))} !important;
        }
      }
    }
  }
}

上記ブロックの真ん中の部分を解説していきます

@each $name, $values in $font-sizes {

$font-sizesをeach文で展開していますが、ここでは、最初は「$name」に「sm」が、「$values」には「(14, 13, 12)」が入ることになります

$num: index(map.keys($break-points), $breakpoint);

map.keysで$break-pointsのkeyだけの配列を作成しています。結果は「all, lg, md」となります

そしてindex関数で、「all, lg, md」の中でall（二つ目のループで最初の$breakpointは「all」）の位置を取得しています。ここでは「1」が$numとして設定されます

&-#{$name} {

「&-#{$name} {」は、$marginsの最初のキーのsmを使用して「&-sm {」となり、結果として「.u-fs-sm」が作成されます

font-size: #{Rem(nth($values, $num))} !important;

「nth($values, $num)」では、nth関数で、$values、つまり「(14, 13, 12)」のうち、$numの値の順番（最初は「1」）にある値を取得し、Rem関数でremの値に変換しています

結果として「font-size: 1.4rem !important;」という記述が作成されます

下記が展開イメージとなります

// all
.u-fs-sm {
 font-size: 1.4rem !important;
}
// lg
@media 'screen and (max-width: 1024px)' {
 .u-fs-sm {
  font-size: 1.3rem !important;
 }
}
// md
@media 'screen and (max-width: 820px)' {
 .u-fs-sm {
  font-size: 1.2rem !important;
 }
}
・・・

ピクセルごとの設定

次にピクセル単位の設定を行います

下記のループ部分は、上記と同じです。2番目のブロックについて解説します

.u-fs {
  @each $breakpoint, $query in $break-points {
    @include mq($breakpoint) {
      @for $i from 10 through 32 {
        @if $breakpoint=='all' {
          &-#{$i} {
            font-size: Rem($i) !important;
          }
        } @else {
          &-#{$breakpoint}-#{$i} {
            font-size: Rem($i) !important;
          }
        }
      }
    }
  }
}

今回は、10～32の数値で設定しています

@for $i from 10 through 32 {

「@for $i from 0 through 180」が0～180までの数値をループし$iに0から順に数字を代入しています

@if $breakpoint=='all' {

上記同様allの場合の振り分けをしています

下記が展開イメージです

// all
.u-fs-10 {
 font-size: 1rem !important;
}
// lg
@media 'screen and (max-width: 1024px)' {
 .u-fs-lg-10 {
   font-size: 1rem !important;
 }
}
// md
@media 'screen and (max-width: 820px)' {
 .u-fs-md-0 {
   font-size: 1rem !important;
 }
}
・・・

font-weight

$font-weights: (
 thin: 100,
 extra-light: 200,
 light: 300,
 regular: 400,
 medium: 500,
 semibold: 600,
 bold: 700,
 extra-bold: 800,
 black: 900,
);

上記配列「$font-weights」を展開していきます

.u-fs {
  @each $breakpoint, $query in $break-points {
    @include mq($breakpoint) {
      @each $key, $weight in $font_weights {
        @if $breakpoint=='all' {
          &-#{""+$key} {
            font-weight: $weight !important;
          }
        } @else {
          &-#{$breakpoint}-#{""+$key} {
            font-weight: $weight !important;
          }
        }
      }
    }
  }
}

上記ブロックの真ん中の部分を解説していきます

@each $key, $weight in $font_weights {

$font_weightsをeach文で展開していますが、ここでは、最初は「$key」に「thin」が、「$weight」には「100」が入ることになります

@if $breakpoint=='all' {

allの場合の振り分けをしています

下記が展開イメージです

// all
.u-fw-thin {
 font-weight: 100 !important;
}
// lg
@media 'screen and (max-width: 1024px)' {
 .u-fw-lg-thin {
   font-weight: 100 !important;
 }
}
// md
@media 'screen and (max-width: 820px)' {
 .u-fw-md-thin {
   font-weight: 100 !important;
 }
}
・・・

まとめ

以上でfont-sizeとfont-weightのユーティリティーの完成となります

全設定が吐き出されてしまうと膨大な量になってしまいますが、弊社では、vite＋@fullhuman/postcss-purgecssなどを使って、余計なclassは入らないようにしていますので、そういった工夫も必要になるかと思います

コーディングの省力化に貢献できれば幸いです

文責：フライング・ハイ・ワークス代表 松田 治人（まつだ はるひと）
会社では、Laravelを中心としたエンジニアとして働いており、これまでに50本以上のLaravelによるWebアプリケーションの構築や東京でホームページ制作をしています。
エンジニアとして弊社で働きたい方、お仕事のご相談など、お待ちしております。

WEBサイト・ホームページの制作をご検討の方

コーポレートサイト

フライング・ハイ・ワークスの紹介

フライング・ハイ・ワークスは、東京のホームページ制作・Web制作会社・システム開発会社です。東京都及びその近郊（首都圏）を中心として、SEO対策を意識したPC及びスマホのサイトをワンソース（レスポンシブ対応）で制作します。

実績

デザイナーチームは、グラフィックデザインやイラストの制作も得意としており、著作権を意識しない素材の提供が可能です。システム・コーディングチームでは、Laravelなどを使用したスクラッチからのオリジナルシステム開発を始め、WordPressのカスタマイズを得意としております。

また、SEOやランディングページ（LP）、広告向けバナーなどを他社様でやっていた作業の引継ぎでも問題ありません。制作実績は多数ございますので、お客様に合わせたご提案が可能です。

500点以上のフライング・ハイ・ワークスの制作実績ページをご覧ください。

東京のWeb制作会社・ホームページ制作のお問い合わせ、お見積り依頼、相談、質問は
お問い合わせフォームよりお願いいたします

ホームページ制作実績

コーポレートサイトへ