はてなブログテーマ開発（7）フォントサイズを可変にする

2018.09.07 CSS, SASS, はてなテーマ, はてなブログ

はてなブログテーマ開発（7）フォントサイズを可変にする

フォントサイズの指定っていうのは結構悩ましいですね。絶対値指定の px 、相対値指定の %, em, rem 、最近では vw も使われます。はてなブログテーマ開発の7回目は、フォントサイズを可変に出来ないかです。

はてなブログテーマ開発（1）
はてなブログテーマ開発（2）
はてなブログテーマ開発（3）
はてなブログテーマ開発（4）
はてなブログテーマ開発（5）
はてなブログテーマ開発（6）（Javascript 記載の漏れがありました）

本文のフォントサイズ
ブログタイトルのフォントサイズ

01本文のフォントサイズ

このシリーズのベーステーマにしている Hatena-Blog-Theme-Boilerplate は、html 要素や body 要素でフォントサイズの指定をしていませんので、ブラウザのデフォルト設定に従うということになります。つまり、100% = 1em = 1rem = 16px をベースにしているということです。

ベースサイズを変更したい場合は、_core.scss に

html,
body {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic';
    color: $text;
    background-color: $background;
    line-height: 1.6;
    // 追加例
    font-size: 90%;
}

などと追加すれば相対指定の文字はすべて変更されます。

最近は、rem を使って指定する方法が主流かと思いますが、その場合に、

html {
  font-size: 62.5%;
}

として、直感的にサイズをわかりやすくする方法がよく紹介されています。これは、ベースサイズを 16px * 62.5% = 10px としますと、1em = 1rem = 10px となり、たとえば 16px を指定したい場合は、1.6rem とすればよく、計算が不要になるということです。

ただ、Boilerplate でこれをやりますと、相対指定してあるフォントサイズをすべて変更し直すことになります。body で 1.6rem とすれば一部戻りますが、rem 指定の h1 ～は再指定が必要ですね。

02ブログタイトルのフォントサイズ

ということで、本文など基本的なものはデフォルトのままでいくとして、ブログタイトルや記事タイトルはページを開いた時の印象が随分変わりますので、気を使ってサイズを決めたいものです。

前回のデモ画像「まずはデモ画像」のブログタイトルを見てください。基本として、ブログタイトルは左上に小さくという方針で作ろうと思いますが、すべてのデバイスでバランスよく表示しようとしますとかなり難しいです。

vw を使って可変にしてみる

フォントサイズをデバイスに応じて可変にするためにはビューポートを利用するしかありません。

たとえば、font-size: 5vw; としますと、

iPhone6 ですと 375px * 0.05 = 18.78px
iPad ですと 768px * 0.05 = 38.4px
デスクトップで 1200px のブラウザですと 1200px * 0.05 = 60px

と一応可変にはなります。

ただ、これでは使い物になりませんので、まずベースとなるビューポートのフォントサイズを決め、ビューポートが大きくなるにつれ一定比率分マイナスしていく方法を取ります。

#title {
    font-size: calc(4.5vw - (100vw - 320px) * .035);
}

この例では、ビューポート 320px（iPhone5）でフォントサイズ 4.5vw = 14px をベースとして、大きくなるにつれフォントサイズをマイナスしていき、375px で 14px、768px で 18px、1200px で 23px となります。

CSSカスタムプロパティ（変数）を使って可変にしてみる

これでほぼ希望通りにはなるのですが、このシリーズの基本設計「ブレイクポイントひとつの基本構造設計」では、コンテンツの表示幅を最大で 1000px として設計しています。ですので、上のようにビューポートから算出しますと、コンテンツ表示幅が 1000px の上限に達した後もビューポートが大きくなればフォントサイズは大きくなっていきます。

それを防ぐために、CSSカスタムプロパティというものを使ってみようと思います。

developer.mozilla.org

IE は対応していないようですが、vw 指定の方を先にしておけば大丈夫（のはず）です。

<script>
function resize() { 
    var cw = document.getElementById('blog-title-content').clientWidth + 'px';
    document.documentElement.style.setProperty('--content-width', cw);
}
window.onresize = resize;


(function(){
    resize();


（略）


}());
</script>

Javascript で html 要素に #blog-title-content の横幅をカスタムプロパティとして設定します。ウィンドウサイズが変更されるたびに値を設定し直します。

#title {
    font-size: calc(4.5vw - (100vw - 320px) * .035);
    font-size: calc((var(--content-width) * .05) - ((var(--content-width) - 294px) * .035));
}

* .05 は、ビューポート 320px にして最適サイズを探した結果の数値です。
294px は、最低マージンを 13px * 2 にしていますので、320 – 26 = 294px です。ビューポート 320px の時、–content-width は、294px になってい（るはず）ます。* .035 はいろいろ試した結果です。