shimakyohsuke.com

今年の 7 月頃からほぼ毎月のように参加させてもらっていて、
インプットばかりで一度もアウトプットしていなかったのでほのぼのと書きます。

この記事は 関西フロントエンドUG Advent Calendar 2015 - Qiita の 12 日目の記事です。


関西フロントエンドUG(KFUG)

KFUG 中の人より「関西フロントエンドUGのこれまでとこれから」
http://qiita.com/mikakane/items/1a0a2e964c473d5b6859

イベント告知ページ
http://kfug.connpass.com/

主に JavaScript 界隈の話がこれとあれとあとついでにこれも食えって感じで、
けっこうな量を、それもほぼ毎月聞けて、間々に CSS やらデザインワークのセッションもあり、
ほんとフロントエンドてぇへんだっていうのを味わえるコミュニティだなって思います。楽しいです。

昨今の JavaScript 話はやっぱまだ難しいし、
話だけ聞いてもうおなかいっぱいで JavaScript のことは書けないので、
先日開催されたもしゃもしゃ会のレポートを書きます。

もしゃもしゃ会

もしゃもしゃ会についてはコミュニティページの冒頭に書いてます。

Webデザイン もしゃもしゃ会
http://kfug.connpass.com/event/21902/

上のリンク先のページにも書いてますが、
もしゃもしゃ会は特に今日はこれをしましょうーとか決められていないもくもく会みたいな勉強会ですが、
tamsatake さんが発表されている、実際のもしゃもしゃ例をご覧ください。

模写のやり方の例

自分はデザイナーではないのですがこの取り組みすごく良い!もしゃもしゃなら自分でもできそうって思い、
稀にデザイナーさんになにか助言することもあるので参加してみました。


文字と文字の間

先日は実際にある Web サイトを Illustrator を使って模写しておりまして、
文字間とかちゃんと模写していたのですが、
ふと、そういえばカーニングやトラッキングの値の単位ピクセルじゃなくね?
CSS の letter-spacing で値に変換するときどうすんの?どうしてんの?
って気になったんです。

そこで、これまで自分は目視でこんなもんだろうと適当に調整していたのですが、
ちゃんとしようと思いました。

で、書いた Mixin がこうです。

Stylus の Mixin

fz にはフォントのサイズを、tracking には Illustrator 上での数値を記述します。

1
2
ls(fz, tracking)
letter-spacing ((fz / 1000) * tracking)px

Stylus で使うとき

p タグの font-size が 16px で Illustrator のトラッキングが 20

1
2
p
ls(16, 20)

できあがった CSS

1
2
3
p {
letter-spacing: 0.32px;
}

こんな細かいピクセル値、ブラウザに反映されんかよって思ってましたが、
Chrome ではちゃんと反映されまして、スクショ取って Illustrator 上で照らし合わせたらきっちり合ってました。
他のブラウザではどうなるか知りません。

Mixin 化する際に参考にしたページは本家 Adobe Illustrator さんの Help ページ

Illustrator / 行と文字の間隔
https://helpx.adobe.com/jp/illustrator/using/line-character-spacing.html

字送りとカーニングの値は、現在の書体サイズを基準とした 1/1000 em 単位で指定します。
1 em は、6 ポイントのフォントでは 6 ポイントになり、10 ポイントのフォントでは 10 ポイントになります。 カーニングと字送りは、現在の書体サイズに比例します。

フォントサイズの 1 / 1000 em ってことなので、
フォントサイズ 16px だと 16 / 1000 = 0.016px が、トラッキングのサイズ「 1 」になります。

Illustrator のトラッキングが「 20 」の場合、
(16 / 1000) * 20 = 0.32px となり、
この値を CSS の letter-spacing で設定してやればきっとデザイナーさん指定通りの文字間になるはずです。
(なんか適当に除算したらできた。)

余談ですが 1 / 1000 em の 1000 という値は、
もしかするとフォントの 1 文字の 1000 メッシュが関係しているのではないかとフォントにお詳しい方から聞きました。

というわけで、なんだかんだ CSS のこと書いてますが、
モヤっていた部分をもしゃもしゃ会に参加し、もしゃもしゃすることにより解決することができました。よかったです。


終わりに

途中からいかに自然に、もしゃもしゃ言えるかに徹してしまった本稿ですが、
この Mixin 誰が興味あんねんと思いつつも、カーニングやトラッキングについて調べるいい機会になりました。

関西フロントエンドUG(KFUG)ではたまになんの話してんだろ。。みたいに置いてきぼりなる時もありますが、
一人で作業していると「ここ、これでいいんかな」とかいろいろ疑問湧いてくるじゃないですか。
そんな時は関西フロントエンドUG(KFUG)にさくっと参加してみると、

  • ここけっこうみんな失敗してるんだ
  • これはやっぱまだ手をださないほうがよさそう
  • こっちのほうが楽できてイマドキだよ

とかいろんな感触掴めて、良いも悪いもいろんな情報を聞いてちょっと安心したりできます。

個人的には Angular や TypeScript などまだまだ勉強することたくさんあるので、
今後も気軽に参加したいと思います。


勝手にお知らせ

今月も開催「もしゃもしゃ会」

日時:2015 / 12 / 21(月)19:30 - 21:30
会場:株式会社 TAM さん

Webデザイン もしゃもしゃ会 2015.12
http://kfug.connpass.com/event/23205/

そして明日、12 / 13 は「年忘れLT大会」!

日時:2015 / 12 / 13(日)16:00 - 20:00
会場:中央会計 セミナールーム さん

[HTML/CSS/JS] 関西フロントエンドUG 年忘れLT大会
http://kfug.connpass.com/event/22377/

LT 登壇者は 5 分話すだけで参加費無料でカロリー摂取できるとのことなので、LT してみます。
発表するっていう行為の敷居を下げてくれる素敵な会ですね。

参加迷われている方、まだ間に合うと思うのでぜひー
明日、しゃべってなんかフィードバックもらえたらまたなんか書きます。

関西最大級のフロントエンドイベント「frontend conference 2016‍」

あと来年大きなイベントもある

日時:2016 / 3 / 5(土)
会場:大阪 新梅田研修センター

frontend conference 2016 | 関西フロントエンドUG
http://frontconf2016.webflow.io/

その他、情報は Twitter ハッシュタグ #frontkansai で。

https://twitter.com/hashtag/frontkansai

(ハッシュタグは #kfug でええやんって思う)

以上、 関西フロントエンドUG Advent Calendar 2015 - Qiita の 12 日目の記事でした。