Sublime Text3使ってるー！？
どうも。ブログで記事を書くとき丁寧な口調をそろそろやめようかと悩んでいる@tomicciです。
友達に話すように、優しく、そう、語りかけたい。
さあ、今日は久しぶりのSublime Textネタ。
HTMLでスマホの画像を高解像度対応する際、例えば 400px * 200px の画像を用意して、200px * 100px で表示するよね。
2x画像とも言うけど、これをHTMLやCSSで設定する際に今までは電卓叩いてた。暗算苦手だし。
その他にも、ボックスに収まるように数値計算をする必要がある場面が多くあるよね。
電卓を使わなくても、なんとSublimeText3のEmmetプラグインで数値計算ができる！ので紹介するよ。
クリックでジャンプ
SublimeText3のEmmetプラグイン
EmmetはHTMLやCSSの入力を超絶楽にしてくれるツール(記法)。
詳しくは当ブログの人気記事であるこれを読んでくだされ。
パッケージコントロールでEmmetプラグインをサクッとインストールしてくれい。
「Package Control:Install Pacage」を選択して、「Emmet」と入力して一瞬。
Emmetプラグインで数値計算
では、早速やってみよう。例えば、
<img src="xxxxx" width="679/2" height="auto" alt="">
と入力してみる。
ここでは、width内の「679/2」という記述が計算したい箇所。この記述の後ろ「2」の直後にカーソルを合わせておいて、
Windowsなら「Shift + Ctrl + Y」、Macの場合であれば「Shift + Cmd + Y」と入力。すると、
<img src="xxxxx" width="339.5" height="auto" alt="">
となったと思う。
…感動！
少数が気に食わない、四捨五入したい時は、
<img src="xxxxx" width="679\2" height="auto" alt="">
とすれば、なんと四捨五入される。
<img src="xxxxx" width="340" height="auto" alt="">
バックスラッシュ「\ 」を使うと、round(679/2) って感じの使い方ができるわけだね。
もちろん、この数値計算は、HTMLファイルだけでなく、CSSファイルでも使えるので、是非活用したい。
素晴らしいよ。Sublime Text、そしてEmmetプラグイン…
【おまけ】バックスラッシュ「\」ってどうやってタイプするの…？
分からなくて調べてみたよ！
Windows: なんかフォントを変えたりと面倒そうな方法しか見つからなかった。「スラッシュ」や「バックスラッシュ」と入力して変換するのが手っ取り早そう。
Mac: option + ¥
いやー、これで電卓捨てられるね！
