便利!SublimeText3のEmmetで数値計算できるぞ!

Sublime Text3使ってるー!?

どうも。ブログで記事を書くとき丁寧な口調をそろそろやめようかと悩んでいる@tomicciです。

友達に話すように、優しく、そう、語りかけたい。
 

さあ、今日は久しぶりのSublime Textネタ。

HTMLでスマホの画像を高解像度対応する際、例えば 400px * 200px の画像を用意して、200px * 100px で表示するよね。

2x画像とも言うけど、これをHTMLやCSSで設定する際に今までは電卓叩いてた。暗算苦手だし。

その他にも、ボックスに収まるように数値計算をする必要がある場面が多くあるよね。

電卓を使わなくても、なんとSublimeText3のEmmetプラグインで数値計算ができる!ので紹介するよ。

SublimeText3のEmmetプラグイン

EmmetはHTMLやCSSの入力を超絶楽にしてくれるツール(記法)。

詳しくは当ブログの人気記事であるこれを読んでくだされ。

え!?まだHTMLコーディングでEmmet + LiveStyleを使ったことがないの?

パッケージコントロールで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 + ¥
 

いやー、これで電卓捨てられるね!

プロから直接学べるプログラミングスクールの紹介!PHPコースあり!

Webデザインスクールの「WebCamp」が手がけるママのためのWebデザインコース

1ヶ月の短期集中でWebデザイナーを目指せます。仕事復帰を希望する主婦やママさんにオススメです。

1ヶ月でHP作成!WebCamp

【参考記事】HTMLの勉強ならTechAcademy(テックアカデミー)のフロントエンドコースが短期集中でオススメ!

自己流でプログラミングを覚えようとすると、環境設定でつまづく、書いたプログラムがなぜ動かないか解決できず、多大な時間を浪費してしまいがちです。

担当の指導者(メンター)が付いてくれるTechAcademyなら、分からないことをどんどん質問して解決できます!コードレビューしてもらえるのも素晴らしい点ですね。

【TechAcademy】家で学べるプログラミングスクール

【参考記事】HTMLの勉強ならTechAcademy(テックアカデミー)のフロントエンドコースが短期集中でオススメ!

Web制作会社が立ち上げたWebデザイナー育成スクール Web塾超現場主義

Web制作に実際に携わっている講師陣が、現場で通用するスキルを伝授します!卒業後は転職支援、仕事紹介などを行っており、フリーランス独立する道を探すこともできそうです。

まだ「独立・開業はちょっと...」という方へは、当社の制作案件をお手伝いして頂く道も開けます。
Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

ABOUTこの記事を書いた人

とみっち

埼玉でザ サイベースを主催しています。Webクリエイター。フリーランス歴7年。飄々と生きています。これでも育児頑張ってます。長野市出身。 @tomicci 詳しいプロフィール【興味】ギター/DTM/Web/車/田舎/旅/酒/育児 自然の音からデスメタルまで聴きます。【運営サイト】 ザ サイベース おと風景