こんにちは、だいちゃんです。

ポツポツとWebページ制作の依頼を請けてるので、Static Page Starterという、静的なWebページを作成する際のテンプレートになるものを自分なりに作りはじめています。

udcxx/StaticPageStarter: 静的なWebページを簡単に作り始めることができるテンプレートです

その中でいま悩んでいることが、特にレスポンシブサイトでのfont-sizeをどう指定するか問題。

まだ完璧に方向性は定まりきってないですが、mixinを使った案を思いついたので、直近の実案件に採用してみて有用性を確認して見ようと思っています。

これまでの書き方

これまでは、html要素のfont-sizeで、PCのとき10px・SPのときは画面サイズに応じて10px未満になるように指定して、すべてのフォントサイズをremで指定していました。

この方法であれば、画面サイズがブレークポイント以下になった際に、画面サイズが小さくなるに応じて、remで指定したすべてのサイズが同じペースで小さくなるので、バランスを保ちやすく、なにより10px = 1remと、デザイン通りに仕上げやすいメリットがありました。

ただ、単にページが縮小されるようなイメージなので、iPhone 13 mini などの画面幅が小さい端末では、文字が小さくなりすぎる問題を抱えています。

文字サイズを算出する式を考える

文字サイズを算出する計算式を工夫することで、画面幅に応じて文字サイズを小さくしつつ、小さくなりすぎることを防げるのではないかと考え、以下のような計算式にたどり着きました。

{文字サイズ} - {ブレークポイントの0.01倍} + {現在の画面幅の0.012倍}

上記の計算式を用いると、基本の文字サイズとして 16px 、ブレークポイントを768pxと指定した場合、以下のような挙動になります。

// 画面幅 400px の場合
16px - 7.68 + 4.8px = 13.12px

// 画面幅 700px の場合
16px - 7.68 + 8.4px = 16.72px

ただし、このままだと、画面幅が700pxのときに、16pxを超えてしまうので、min() 関数を組み合わせて16pxを超えないように制御しつつ、画面サイズを vw を使って表現すると、以下のようになります。

@media (max-width: 768px) {
    font-size: min(16px, calc(16px - 7.68px + 1.2vw));
}

font-sizeを算出する式を組み込む

前述の式を使う場面として、次の2つの方法を検討しました。

1. mixin を作成して、各要素のfont-sizeを指定するタイミングで利用する
2. html のfont-sizeに利用して、各要素ではremでfont-sizeを指定する

上記のうち、2. の方法なら、各要素ではこれまで通りの記述を行うことができますが、以下の表の通り、文字サイズの拡縮幅も比較的大きいままとなってしまい、変更のメリットが薄れてしまいます。

しかも、せっかくscssが利用できる環境を構築するので、mixinなど、scssだからこそ使える機能も積極的に活用していきたいと思い、1. の方法を採用することにしました。

mixinでの利用方法

あらかじめ、以下のようにmixinを定義しておきます。

@mixin fontsize($size...) {

    $sizePC: nth($size, 1);
    $sizeTB: nth($size, 1);
    $sizeSP: nth($size, 1);

    @if (length($size) == 2) {
        $sizePC: nth($size, 1);
        $sizeTB: nth($size, 1);
        $sizeSP: nth($size, 2);
    }  @else if (length($size) == 3) {
        $sizePC: nth($size, 1);
        $sizeTB: nth($size, 2);
        $sizeSP: nth($size, 3);
     }

    font-size: #{$sizePC}px;

    @media (max-width: $wrap) {
        font-size: min(#{$sizeTB}px, calc(#{$sizeTB}px - #{math.div($wrap, 100)} + 1vw));
    }

    @media (max-width: $break) {
        font-size: min(#{$sizeSP}px, calc(#{$sizeSP}px - #{math.div($break, 100)} + 1.2vw));
    }
}

font-sizeを指定したい各要素では、以下のようにincludeして利用します。

.hoge {
    @include fontsie(16)
}

また、今回定義したmixinでは、includeの際に引数を3つまで指定でき、ブレークポイントごとに個別のフォントサイズを指定するといった細かい運用も可能です。

// PC & Tab , SP で異なるフォントサイズを指定する場合
.hoge {
    @include fontsize(16, 20);
}

// PC, Tab, SP でそれぞれ異なるフォントサイズを指定する場合
.hoge {
    @include fontsize(16, 18, 20);
}

こんな感じで、汎用性高く、自分が使いやすいテンプレートを用意して、なるべく効率よくコーディングができる環境を作ろうと試行錯誤中です。

このテンプレートを使った第一弾のWebサイトがもうすぐ納品できそうなので、納品前のフィードバックなども踏まえて、このテンプレートをよりブラッシュアップしていければと思っています。

そろそろ ポートフォリオサイト も更新したい…