2018年12月5日
デザイン
Rucksackでレスポンシブタイポグラフィーを実装する


はじめに
新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay5です!
昨日はpatch-packageでnpmパッケージを修正・カスタマイズする方法についての記事でした。
今日は、RucksackというCSSのライブラリを使って簡単にレスポンシブタイポグラフィーを実装する方法をご紹介します。
レスポンシブタイポグラフィーとは画面の横幅 (具体的に言うと、Viewport)に応じて、フォントサイズが変わることを言います。
特にブログなど文字中心のサイトでよく使われる手法です!
デモサイトはこちら
サイトを開いたらブラウザの横幅を縮めたり、広めたりしてみてください。
文字サイズがブラウザの横幅に応じて変化するはずです!
Rucksackとは
Rucksackとは
Rucksack (Rucksack CSSとも呼ばれる)とはPostCSSベースで書かれたCSSのライブラリです。
PostCSSに関しては、こちらの記事でもう少し詳しく書いているので、ぜひご覧ください。
PostCSSから5年、CSSの今とこれから
Rucksackは少ないコードで(もしくは普通のCSSよりも簡単に)いろんな機能を書くことができます。
Rucksackの主な機能はこちらです。
今日ご紹介する機能です。
画面の横幅 (具体的に言うと、Viewport)に応じて、フォントサイズを簡単に変更することができます。
また、最小、最大フォントサイズなども設定することが可能です。
レスポンシブタイポグラフィーの概念自体は新しいものではなく、5−6年ほど前から手法としてはありましたが、実装するのが大変だったり、ブラウザ対応が必要だったり色々と実装上の問題がありました。
英語の記事ではありますが、レスポンシブタイポグラフィー については下記記事がおすすめです!
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が4つ以上あれば、文字が青になると言う指定です。
他にも、 :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のライブラリを使って簡単にレスポンシブタイポグラフィーを実装する方法をご紹介します。
とにかく1行でレスポンシブタイポグラフィーが実装できる気軽さが便利で楽しいので、ぜひ試してみてください。
この記事は
参考になりましたか?
0
0
関連記事

2018年12月9日
【CSS】3D transformsでコロッとなるエフェクトを作る

2018年12月5日
Rucksackでレスポンシブタイポグラフィーを実装する

2018年12月1日
PostCSSから5年、CSSの今とこれから

2018年9月12日
CSSだけでスクロール時に画面領域をぴたっと固定(スナップ)することができる, scroll snap

2018年5月30日
CSSでカスタマイズできるSVGアイコン集 Fontisto

2018年5月23日
繰り返し文・条件分岐を使ってラクしてSassを書いてみよう!
eishisでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー

Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ デザイナー
WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。
Miu マーケター
ドイツでWEBマーケティングしています。
しんのき エンジニア
新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

やまかわたかし デザイナー
フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。
furuya エンジニア
サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
うえまつゆい エンジニア
サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。