Rucksackでレスポンシブタイポグラフィーを実装する

はじめに

新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay5です！

昨日はpatch-packageでnpmパッケージを修正・カスタマイズする方法についての記事でした。

かゆいところに手が届く！patch-packageでnpmパッケージを乗りこなそう

今日は、RucksackというCSSのライブラリを使って簡単にレスポンシブタイポグラフィーを実装する方法をご紹介します。

レスポンシブタイポグラフィーとは画面の横幅 (具体的に言うと、Viewport)に応じて、フォントサイズが変わることを言います。

特にブログなど文字中心のサイトでよく使われる手法です！
デモサイトはこちら

サイトを開いたらブラウザの横幅を縮めたり、広めたりしてみてください。
文字サイズがブラウザの横幅に応じて変化するはずです！

Rucksackとは

Rucksackとは

Rucksack (Rucksack CSSとも呼ばれる)とはPostCSSベースで書かれたCSSのライブラリです。

PostCSSに関しては、こちらの記事でもう少し詳しく書いているので、ぜひご覧ください。
PostCSSから5年、CSSの今とこれから

Rucksackは少ないコードで（もしくは普通のCSSよりも簡単に）いろんな機能を書くことができます。

Rucksackの主な機能はこちらです。

今日ご紹介する機能です。
画面の横幅 (具体的に言うと、Viewport)に応じて、フォントサイズを簡単に変更することができます。
また、最小、最大フォントサイズなども設定することが可能です。

レスポンシブタイポグラフィーの概念自体は新しいものではなく、５−６年ほど前から手法としてはありましたが、実装するのが大変だったり、ブラウザ対応が必要だったり色々と実装上の問題がありました。

英語の記事ではありますが、レスポンシブタイポグラフィー については下記記事がおすすめです！
Viewport Unit Based Typography

こちらは上記記事を日本語にまとめたものです。
[CSS]レスポンシブ対応の文字サイズを指定するこれからのテクニック

position プロパティを省略法で書くことができるというものです。

/*rucksack*/
.bar {
  position: relative 20% auto;
}

　　　　　　↓

/*output*/
.bar {
  position: relative;
  top: 20%;
  left: auto;
  right: auto;
}

/*rucksack*/
li:at-least(4) {
  color: blue;
}

liが４つ以上あれば、文字が青になると言う指定です。
他にも、 :at-most (タグの数が~より少なかったら)、:between (タグの数が~より多く、~より少なかったら)、 :exactly (タグの数が~だったら)などがあります。

input[type="range"] などスタイルを当てにくいHTML5の input の中の要素に擬似要素を追加し、簡単にスタイルを整えることができる機能です。

ただし、こちらの機能はブラウザ対応に少し不安があります。

今までに一般的だったクリアフィックス法をまとめて、 clear というプロパティを作ったものです。

/*rucksack*/
.foo {
  clear: fix;
}

@font-face内の src を設定するときに簡単にする方法です。

/*rucksack*/
@font-face {
  font-family: 'My Font';
  font-path: '/my/font/file';
  font-weight: normal;
  font-style: normal;
}

　　　　　　↓

/*output*/
@font-face {
  font-family: 'My Font';
  src: url("/my/font/file.eot");
  src: url("/my/font/file.eot?#iefix") format('embedded-opentype'),
       url("/my/font/file.woff") format('woff'),
       url("/my/font/file.ttf") format('truetype'),
       url("/my/font/file.svg") format('svg');
  font-weight: normal;
  font-style: normal;
}

scssなどでも使われているHex, RGBAのショートカットを追加します。

/*rucksack*/
.foo {
  color: rgba(#fff, 0.8);
}

Rucksackでは、長いプロパティ名にエイリアスを作ることができます。

/*rucksack*/
@alias {
  fs: font-size;
  fw: font-weight;
}

.foo {
  fs: 16px;
  fw: bold;
}

複雑なイージングを簡単に設定することができます。

/*rucksack*/
.foo {
  transition: all 250ms ease-in-cubic;
}

　　　　　　↓

/*output*/
.foo {
  transition: all 250ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

Laggardを使い、レガシーブラウザでも新しいcssが使えるようにします。

/*rucksack*/
.foo {
  opacity: 0.8;
}

　　　　　　↓

/*output*/
.foo {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  opacity: 0.8;
}

autoprefixerを使い、自動でベンダープレフィックスを付与してくれます。

レスポンシブタイポグラフィーを試す

Rucksackはgulp, grunt, command line, Javascript API, Stylus など様々なワークフローに対応していますが、今回はgulpを使ってレスポンシブタイポグラフィーを試したいと思います。

他のワークフローで試したい方はrucksackのインストールに関するドキュメントをご覧ください。

Gulpfileを用意する

まずは、PostCSSとRucksackが使えるように、gulpfileを用意します。

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const rucksack = require('rucksack-css');

gulp.task('default', () => {
  return gulp.src('src/*.css')
    .pipe(postcss([ rucksack() ]))
    .pipe(gulp.dest('dist'));
});

Rucksackをインストールする

コマンドラインで、該当ディレクトリに移動し、 下記をインストールする。
これで、gulp, PostCSS, Rucksackが使えるようになります。

npm install --save-dev gulp
npm install --save-dev gulp-postcss
npm install --save-dev rucksack-css

Rucksackを使ってみる

src フォルダに test.css など名前はなんでも大丈夫なので、CSSファイルを作成します。
(RucksackはPostCSSを使っているので、scssなどではなく普通のCSSファイルでOKです！)

作成したCSSファイルの中に下記をテストで入れてみましょう。

body{
  font-size: responsive;
}

え？これだけ？と思われるかもしれませんが…これだけです！！

こちらを入力し、gulpを再度回すと下記が dist/test.css に出力されます。

1行で、こんな複雑なコードを自動で書いてくれるんです。

body{
  font-size: calc(12px + 9 * ((100vw - 420px) / 860));
}
@media screen and (min-width: 1280px){
  body{
    font-size: 21px;
  }
}
@media screen and (max-width: 420px){
  body{
    font-size: 12px;
  }
}

実際にどんな感じが見てみると…

バッチリ、viewportに応じてフォントサイズが変わっていますね。

最小、最大フォントサイズを設定する

上記のテストですが、画面が小さいときに小さすぎるなど細かいところが気になってきます。
そんなときは最小、最大フォントサイズを設定してあげてください。

responsiveという値の後に 最小フォントサイズ、最大フォントサイズを並べるだけです。

body{
  font-size: responsive 16px 40px;
}

今度は小さくなりすぎることはなく、サイズも自由に調整できました。

レスポンシブタイポグラフィーの範囲を決める

また、font-range プロパティで、文字をレスポンシブにするviewportの範囲を決めることができます。

html {
  font-range: 420px 1280px;
}

まとめ

以上、RucksackというCSSのライブラリを使って簡単にレスポンシブタイポグラフィーを実装する方法をご紹介します。

とにかく１行でレスポンシブタイポグラフィーが実装できる気軽さが便利で楽しいので、ぜひ試してみてください。