ものづくりカフェひつじ 第２話「翻弄するフォントサイズ！店長のAnleitung！」
※筆者は病気です。（精神的な意味で）オススメの精神科があればご一報ください。
※登場人物のモデルになった人であれば、口調の改変等OKです。
https://gyazo.com/159a3c3cf9efac5f10609dada9d25c4d
舞台
https://gyazo.com/6ffda56ddd834c3318abf4fb28d2ebdf
ものづくりカフェひつじ
全席にコンセントとwifiを完備し、オライリーをはじめとする多くの技術書が置いてありエンジニアに愛されている。
コーヒーはお代わり自由。
日中はカフェ、夜は勉強会の会場として貸し出しており、この貸出料で日中の売り上げ不足を補っている。
登場人物
https://gyazo.com/25b4d8412ccf0cd1bbdd9009b32efdeb
ぜんの店長
猫の姿をしているのに人の言葉を喋る。
元は人間だったらしいという噂があるが、それを探ろうとしたものが次々と行方不明になっている。
普段はプログラムの実装に困っている客にアドバイスをしたりモフラれたりして過ごしている。
仕事は全てバイトに丸投げムーブしている。
語尾にニャをつけて喋るが、それはわざとであり素が出るとおっさんの声で関西弁になる。まさに猫かぶり。
https://gyazo.com/8f0180ff6965b70b6afefd71dd823a4c
マスター加藤
マスター加藤は実はただのニックネームのバイト。
ものづくりカフェひつじのコーヒー、デザート、軽食の開発及び提供などの業務を行なっている。
初見の客にはマスター加藤というニックネームも合間って、店長とよく勘違いされる。
この仕事を辞めて、フリーランスエンジニアになりたいらしいが、ぜんの店長に致命的な弱みを握られているため辞められず、社畜になってしまっている。
https://gyazo.com/e6db7f9ed8366b569b18ace13e0f1062
スティーブ
ものづくりカフェひつじの常連。
現在大学の2回生である。
日々興味のあることに挑戦しており、ものづくりカフェひつじでは他の客や店員などからアドバイスをもらいながら日進月歩している。
その場にいるだけでアメリカンコメディのようなノリを生み出す特殊能力を持っている。
プロローグ
zenno.icon もうすぐクリスマスだニャ〜
稼ぎ時ですね、気合い入れて行きましょう ktr.icon
スティーブ.icon うーん....
どうしたニャ？辛気臭い顔して zenno.icon
スティーブ.icon 実は今、クリスマスに向けたWebサイトを作ってるんですけど、レスポンシブ対応が上手くいかなくて...PCで見るといい感じなんですけど、スマホで見ると思っていたよりも文字が大きくなってしまって、だからと言って全部にmediaクエリを使うのもコードがかさばるからなぁって
スティーブさん、もしかしてフォントサイズの指定を全てpxで行ってないですか？ ktr.icon
スティーブ.icon そうですけど、なんでわかったんですかマスター？
スティーブさんの話からフォントサイズには絶対値を指定しているかつ絶対値で一番ポピュラーなのはpxだからです ktr.icon
スティーブ.icon 絶対値ってなんですか？
おや？ご存知ないですか？ ktr.icon
じゃぁ今日はフォントサイズの話でもするかニャ zenno.icon
スティーブ.icon ハイ！お願いします
https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png
本編
まずはフォントサイズの種類からニャ、フォントサイズには大きく絶対値と相対値の2種類があるニャ zenno.icon
table:fontsize
絶対値 相対値
cm em
mm ex
in ch
px rem
pt vw
pc vh
vmin
vmax
%
スティーブ.icon こんなに種類があるんですか！？
そうニャ、pxはほんの一部なのニャ！まずは絶対値から解説していくニャ！ zenno.icon
https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png
いつもの奴！px（ピクセル）
言わずと知れた単位ニャ！絶対値で指定したい場合はほぼこれ一択でいいニャ zenno.icon
スティーブ.icon はい！僕もよく使います！
ただしデメリットとしてスティーブを言っていたようにレスポンシブ対応できないのが何より辛いニャ zenno.icon
一部では「このサイトはスマホに対応しない」という強い意志を示すためにあえて使う人もいますね ktr.icon
スティーブ.icon 捻くれてますね...
ここで驚愕の事実があるニャ！このpxは実は相対値なのニャ！ zenno.icon
スティーブ.icon えっ！？どういうことですか？
pxは絶対値であるptを元に計算されているのニャ！ zenno.icon
PCでもスマホでもptの単位は変わらないので、実質絶対値というわけです。ちなみに1pxは0.75ptに相当します ktr.icon
スティーブ.icon なるほど！良くわかりました！どんなデバイスでも同じサイズで表示したい場合には絶対値を使うんですね！
https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png
その他の絶対値
スティーブ.icon 他の絶対値はどうなってるんですか？
絶対値はその性質上あまり特筆することがないニャ zenno.icon
では軽く各単位の説明をしましょう。cmは文字どうりセンチメートルです ktr.icon
スティーブ.icon その流れでいくとmmはミリメートルですか？
そうです。inはインチで「1in = 96px」に相当します ktr.icon
ptは先述した通り、「1px = 0.75pt」に相当するニャ zenno.icon
最後はpc、パイカと呼ばれる単位です。これは「1pc = 12px」に相当します。 ktr.icon
スティーブ.icon パイカ？聞きなれない単位ですね...
パイカは印刷用の単位ですから、印刷に関係することをしていないとまず聞かないでしょう ktr.icon
スティーブ.icon 印刷用の単位ですか。どうりで初耳な訳です。
https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png
定番！%（パーセント）
ここからは相対値の解説ニャ zenno.icon
スティーブ.icon まずはわかりやすい%（パーセント）からですね！
そうニャ！%は親のフォントサイズを元に計算が行われるニャ！ zenno.icon
例えば、親に16pxでフォントサイズを指定していた場合、50%と指定すれば8pxのフォントサイズが得られる訳です。 ktr.icon
スティーブ.icon 親にフォントサイズを指定していない場合はどうなるんですか？
その場合はCSS標準の16pxが基準値として計算されます ktr.icon
メリットとして使い慣れた%だから直感的という利点があるニャ！ zenno.icon
デメリットとしては、HTMLの入れ子構造が複雑化した際に複数のフォントサイズ指定を行っていると、計算しづらくなるという点でしょう。 ktr.icon
https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png
%とほぼ同じ... em（エム）
emは%と使い方は同じニャ！「1em = 100%」ニャ！ zenno.icon
スティーブ.icon %とどんな違いがあるんですか？
無いニャ zenno.icon
スティーブ.icon えっ...
https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png
使いやすい！rem（レム）
次は相対値の大本命！remニャ！remは「root em」の略称でCSS3から追加された単位ニャ zenno.icon
今現在、著名なWebサイトでデベロッパーツールを開きCSSを見るとそのほとんどのフォントサイズ単位がremであることに気づくはずです ktr.icon
スティーブ.icon おぉ！最新版って感じですね！
その通りニャ！remの基準値は名前の通りルートつまりhtmlのfont-sizeを元に計算されるニャ！ zenno.icon
htmlのfont-sizeが10pxなら1.5remは15pxな訳です ktr.icon
%やemと違って基準値の対象が一箇所だからHTMLの入れ子構造が複雑になった場合でも計算しやすいニャ！ zenno.icon
注意としてChromeが指定している最小フォントサイズである10px以下をremで表現するのは無理があるので、何か別の手段を使う必要がある点でしょうか ktr.icon
スティーブ.icon おぉ！ってあれ？これ何もレスポンシブじゃなく無いですか？本質的には%やemとかわら無いんですよね？
お前のような感のいいガキは嫌いだよ... zenno.icon
店長、素が出てます。スティーブくん確かにその通りだ、でも基準値の対象が一箇所ならそこだけmediaクエリで調節してやればいいんじゃ無いかな ktr.icon
スティーブ.icon あっそうか！
そもそもデバイスごとのレイアウトにしっかり気を使っておけばfont-sizeにmediaクエリを使うケースは少ないニャ zenno.icon
スティーブ.icon うっ...
まぁ、何事も慣れです。それに手段は多いに限ります。 ktr.icon
スティーブ.icon そうですね！
https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png
レスポンシブ対応向き！vhとvw
vhとvwはそれぞれビューポートのheightとwidthを基準値として計算されるニャ zenno.icon
スティーブ.icon あぁ！viewport heightでvh、viewport widthでvwか！
その通り、1vhならビューポートの1/100のサイズということだね ktr.icon
これを使えば全てのデバイスの幅に対応できるニャ、mediaクエリを使う必要も無いし楽だニャ zenno.icon
現状、レスポンシブ対応に最も向いている単位でしょう ktr.icon
スティーブ.icon さっきのremと合わせて使うといい感じですね
https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png
スマホで使える！vmaxとvmin
vmaxとvminはそれぞれvhとvwの内大きい方、小さい方を基準に計算する単位ニャ zenno.icon
例えば、1200vw、700vhのビューポートでvmaxを指定すると、大きい方のvwを基準値として計算される訳です ktr.icon
スティーブ.icon なるほど、でもこれどこで使うんですか？
スマホは同じデバイスでも縦向き、横向きで使えるニャ、その時どちらの向きでも見やすいフォントサイズにできるニャ！ zenno.icon
スティーブ.icon 確かに、スマホ用の時に使えそうですね！
https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png
何故それを基準値にした？exとch
残りの相対値のexとchは滅多に使われないニャ zenno.icon
これはexとchの基準値が特殊な事に起因します。exは小文字のxの高さを基準とし、chは数字の0の幅を基準としています ktr.icon
スティーブ.icon 何故そんな基準値に...
知らないニャ、気にしたら負けニャ zenno.icon
エピローグ
どうかニャ？レスポンシブ対応できそうかニャ？ zenno.icon
スティーブ.icon はい！まずはremとvh、vwを使って対応しようと思います！その後時間があればレイアウトの見直しをしてみようと思います。
クリスマスに間に合うといいですね、応援してますよスティーブさん ktr.icon
スティーブ.icon ありがとうございます！店長！マスター！
次回予告
ひつじ.icon 今回が最終回となります。
ご愛読ありがとうございました！先生の次回作にご期待ください！