お読みあそばせ

もはやただの日記

ブレイクポイントとフォントサイズのmixin備忘録

デザイン・コーディング

最近ブレイクポイントの書き方を少し変えた。すぐ忘れるのでAlfredのスニペットに登録するか、SASS開発セットみたいなものを作ればいいんだけど、備忘録的にブログに書いておく。

ブレイクポイントのmixin

いままでは@mediaを使ってたけど、こうすると@includeで呼び出せる。
ぶっちゃけどっちでもいいとは思う。

以下の方法が今まで使ってたパターン。@mediaで呼び出しているので、パッと見でブレイクポイントなんだなとわかる。

$mq-xs: '(max-width: 480px)';
$mq-sm: '(min-width: 600px)';
$mq-md: '(min-width: 960px)';
$mq-lg: '(min-width: 1240px)';

// 呼び出し方
a {
  @media #{$mq-lg} {
    text-decoration: none;
  }
}

以下が最近使っているパターン。
@includeなので、どこかにルールを書いたりわかりやすい名前にしておかないと、ブレイクポイントだと分かりにくい。ただしこっちのほうがタイプする文字数が少なくてすむ。

$breakpoint: (
  xs: 'screen and (max-width: 480px)',
  sm: 'screen and (min-width: 600px)',
  md: 'screen and (min-width: 960px)',
  lg: 'screen and (min-width: 1260px)'
) !default;

@mixin mq($bp) {
  @media #{map-get($breakpoint, $bp)} {
    @content;
  }
}

// 呼び出し方
a {
  @include mq(sm) {
    text-decoration: none;
  }
}

厳密には両者出てくるタグが違うけど、とくに困らない（雑）。
ちなみにメディアクエリはSP優先で書くのが好きだ。余計なタグをかかなくてすむので、ほぼSP優先。たまにPC優先のときがあるし、それでも全然かまわないんだけど「スマホの見た目を重視してください」みたいなやつで、PC優先に書いてるのは思想のゆらぎを感じで混乱する。

フォントサイズ

これあまり好きじゃないんだけど、時々見かける。
スマホ幅にあわせて文字を適宜拡大する手法。リード文やエッセンシャルテキストの意図しない段落ちが防げる。

// 375px（iPhoneSE）であわせてる
@function get_vw($size, $viewport: 375) {
  $rate: 100 / $viewport;
  @return $rate * $size * 1vw;
}

// baseは10px
@mixin fz_vw($font_size: 10) {
  font-size: $font_size * 1px;
  font-size: get_vw($font_size);
}

// 呼び出し方
a {
  @include fz_vw(12);
}

// 出力されるcss
a {
  font-size: 12px;
  font-size: 3.2vw;
}

あまり好きじゃない理由としては、SP優先で書いてると、PCで見たときにこれだと文字がでかくなりすぎる。これのためだけのメディアクエリを書きたくない……できれば。
いいかげん法律で「レスポンシブの段落ちは仕様上しかたないので諦める」っていうの書いといて欲しい*1。

そもそもWEBサイト屋さんはいろんな派閥がある

メディアクエリひとつとっても、スマホ優先派・PC優先派、フォントサイズはfont-size: 62.5%;する派・しない派、SASS使う派・不要派などいる。いろんなブログであーだこーだ書かれてるので、初学者は混乱すると思っている。テーブル組が主流だった自体にhtmlとcssやりはじめてよかった。その頃は正解らしきものがあって、いろんな裏技を駆使した（1pxの透過gifを使って空白を作ったりした）。

今は一概にこれが正解、というものがない。まじで。どれでも動けばそれが正解だ。ただチームの都合や時流があってだいたい、googleやappleがサイトで使ってたらそれがいいのかな？ というような流れになる。
基本的にはチームの思想や自分の思想を信じるしかない。

自分がこのvwでフォント指定するコードを使うとしたら、比較的うるさめのこだわりの強いクライアントさんが、命と引き換えにしてもリード文を段落ちさせたくない場合です。

ちなみに自分は、font-size: 62.5%;を使いたくない派閥である。

おまけ: フォントサイズの指定

font-size: 62.5%;を使いたくない理由としては、ブラウザが予めいい感じになるようにCSSを持っていてくれるんだけど、それをリセットしたら思わぬところでレイアウト崩れを起こしたり、書かなくていいCSSを書く必要がでてくるのを避けたい。

わからない人に説明すると、ブラウザのもってるフォントサイズは16pxなので、全体でfont-size: 62.5%;を指定すれば基準が10pxになる。そうするとremやemで指定しやすい（14pxにしたい場合は1.4remと書ける）し、わかりやすい。
でもデザインや設計というものは、「計算しやすい」とかいう中の人の単純な楽したい都合で作るもんじゃないはずだ。

基準が16pxだといちいち計算しないといけないのでCSSだとこういうのをどっかに書いてコピペしていた。こんなんしてたの10年以上前だと思うが。

/* フォントサイズ基準 */
.font-dammy {
  font-size: 0.75rem;   /* 12px */
  font-size: 0.8125rem; /* 13px */
  font-size: 0.875rem;  /* 14px */
  font-size: 1rem;      /* 16px */
  font-size: 1.25rem;   /* 20px */
  font-size: 1.75rem;   /* 28px */
}

sassだとこれでいい。

@mixin font-rem($size) {
  font-size: $size + px;
  font-size: ($size / 16) + rem;
}

//　呼び出し方
a {
  @include font-rem(14);
}

いまどきはCSSで計算もできるから、SASSも使わなくなってくのかなーなんて思っています。

*1:お前のでかいスマホではそう見えてるかもしれんが、小さいスマホでは段落ちしてるぞ。