2018年12月5日

デザイン

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

目次

  1. はじめに
  2. Rucksackとは
  3. レスポンシブタイポグラフィーを試す
  4. まとめ

はじめに

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

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

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

a.png (80.5 kB)

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

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

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

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

Rucksackとは

Rucksackとは

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

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

Screenshot 2018-12-04 at 4.35.17 PM.png (148.6 kB)

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

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

レスポンシブタイポグラフィー (Responsive Typography)

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

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

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

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

positionの省略 (Shorthand Positioning)

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

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

      ↓

/*output*/
.bar {
  position: relative;
  top: 20%;
  left: auto;
  right: auto;
}
擬似セレクターの数で取得 (Quantity Pseudo-Selectors )
/*rucksack*/
li:at-least(4) {
  color: blue;
}

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

inputタグに擬似要素を追加する (Input Pseudo-Elements)

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

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

ネイティブクリアフィックス (Native Clearfix)

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

/*rucksack*/
.foo {
  clear: fix;
}
フォントソースの拡張 (Font Src Expansion)

@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;
}
Hex, RGBAショートカット

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

/*rucksack*/
.foo {
  color: rgba(#fff, 0.8);
}
プロパティのエイリアス(Property Aliases)

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

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

.foo {
  fs: 16px;
  fw: bold;
}
複雑なイージング (All The Easings )

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

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

      ↓

/*output*/
.foo {
  transition: all 250ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
レガシーフォールバック (Legacy Fallbacks )

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

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

      ↓

/*output*/
.foo {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  opacity: 0.8;
}
オークプレフィックス (Automatic Prefixing)

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

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

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

他のワークフローで試したい方はrucksackのインストールに関するドキュメントをご覧ください。
Screenshot 2018-12-04 at 5.21.32 PM.png (233.2 kB)

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;
  }
}

実際にどんな感じが見てみると…
a.gif (1.5 MB)

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

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

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

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

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

b.gif (1.2 MB)

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

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

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

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

まとめ

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

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

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP