Emmet でCSSコーディングをスピードアップ

eye_css-speedup

前回はHTMLマークアップ作業での Emmet 記法を勉強しましたが、今回はCSSコーディング作業での Emmet 記法を学びます。
例によって Emmet Documentation の意訳ですので、英語が読める方は本家で確認したほうが確実です。

Emmet に用意されているCSSのスニペットは500以上も用意されているそうで、それっぽい省略をフィーリングで入力すれば展開できたりしちゃいます。
Fuzzy search(あいまい検索)が仕事をしてくれるので、CSSプロパティ名が頭に入っていればまず問題ないかと思います。

チートシート も公開されているので、ざっと目を通しておいてもいいかと思います。

Emmet でのCSSコーディング

Emmet では1つのCSSプロパティに対していくつものスニペットを用意しています。例えば m 一文字を展開すれば margin: ; と出力されます。ただ、目的があって値を指定しないのでない限り、こんな使い方はしないでください。Emmet はコーディング作業を大きく最適化できます。マージンの値を10pxに指定したいなら、単純に m10 とだけ入力してください。展開する事で margin: 10px; と出力されます。複数指定をしたければ-(ハイフン)で繋いでください。m10-20 を展開することで margin: 10px 20px; と出力されます。
負の値ですか?問題ありません。気にせずにハイフンで繋いでください。m-10–20 は margin: -10px -20px; と展開されます。

続きを読む

Web制作環境を整える その5 – Emmet でマークアップをスピードアップ

コーディング最適化

Sublime Text 3 の操作方法にもだいぶ慣れてきました。オートコンプリートはあるしSurround 機能も使えるとはいえ、マークアップ作業はやっぱりキーを打つ回数が多いです。そこで、「Emmet」というパッケージを導入して、マークアップ作業の大幅スピードアップを図りたいと思います。

Emmet とは、前バージョンまで Zen Coding という名前だったコーディング補助プラグインで、省略記法を展開してコードを生成するものです。言葉で説明するより、実際使ったほうがそのすごさがよくわかります。

Sublime Text 3 で Emmet を使う

いつものように Package Control から Emmet パッケージをインストールします。Emeet をインストールすると、一緒に PyV8 Binaries という依存パッケージもインストールされますので、「ナンダコレ?」とか言って消さないようにしてください。

ではさっそく Emmet による展開とはどんなものか、試してみましょう。新規ファイルを開き、HTMLかPHPシンタックスへ変更します。そこへ

のように入力してください。行末にカーソルを置いた状態の挿入モードCtrl + e を押すと・・・

このようにHTMLが生成されます。CSSのclass,ID指定と同じ書式で解りやすいですね。

続きを読む

Web制作環境を整える その4 – Vintage を使いやすくカスタマイズする

Vintageous カスタマイズ

前回では、Sublime Text 3 をVimライクな操作方法にする設定を行いましたので、今回はもう少し細かなカスタマイズや、便利なキーストロークの追加をしていきたいと思います。
「Vintageous」パッケージを導入している環境では、マニュアルに記載された通りに sublime-keymap ファイルを変更しても、動作しなかったり、別の機能に影響が出たりします。これは、「Vintageous」がキーマップをもっと柔軟に設定できるように上書きハックしているからのようです。前回導入しようとした「Vintage Surround」が上手く動作しなかったのもこのせいですね。

この辺りの情報が日本語で入手できず、少し苦労したので覚書を兼ねて。(バージョンアップで変わるかもしれません。現在 Vintageous のバージョンは3.8.8です。)

Vimのキモはカーソル移動にあり

私はカーソルの行頭・行末への移動(インデントを含まない)を多用します。キーボードで言うとHome, Endキーです。ただ、このキーって遠いですよね。Vimのキーマップでいうと^, $になるんですけど、押しにくいですよね。

ということで、行頭・行末への移動を別のキーストロークで行うための設定をします。行頭へは g h 、行末へは g l で移動する様に設定します。

Vintageous を利用したキーマップの設定は、コマンドパレット(Ctrl+Shift+p)の 「Vintageous:Open .vintageousrc」から行います。
Vimを使った事がある方ならお馴染みの .vimrc を模した機能です。何も設定していなければ、真っ新なファイルが開かれます。ここに次のように入力します。

保存したら、Sublime Text 3 を再起動するか、コマンドから Vintageous: Reset すればOKです。

続きを読む

Web制作環境を整える その3 – Sublime Text 3 を Vim っぽく使う

Vintageous パッケージの導入

Sublime Text 3 には Unixプラットフォームに搭載されている vi というテキストエディタから派生した、 Vim(ヴィムまたはヴィアイエム)というテキストエディタによく似た操作感に変更する事が可能です。その為に「Vintage」というパッケージが初めから付属していますが、初期状態では無効に設定されています。

このページを気になって見ている人には不要な説明でしょうが、vi というエディタは、マウスが普及する以前から利用されてきたものの為、カーソルの移動から範囲選択、検索や置換などの操作すべてをキーボードのみで行える作りです。両手をキーボードから離す必要が無いため、プログラマーにはこのエディタの愛好者が多く存在します。しかし、その特徴的過ぎる操作方法を習得するにはかなりの苦労を強いられるでしょう。しかし、コーディングをする人ならば

Vimの使い方

などを見ながら、是非このVimライクな操作を体験して欲しいものです。

Vintage機能を解放する

それでは、前回の基本設定の内容に

という記述があったのを覚えているでしょうか。この設定は、読んで字のごとく ignored(無視された) packages(パッケージ) です。
初期状態では、ここに「Vintage」パッケージが指定されているので、

こうして削除します。「ignored_pakkages」の設定項目ごと削除してもいいですが、後で何かに使うかもしれないので残しておきます。

これで Vintage の機能が解放されましたが、これだけでは Vimライクとは言い難いです。そこで、基本設定を変更します。[Preference] – [Setting – User] を開き、

この2つの項目を追加します。
「vintage_ctrl_keys」はCtrlキーを使ったキーストロークの有効・無効を、「vintage_start_in_command_mode」はファイルを開いたときにコマンドモードで始まるようにするかどうか、です。

続きを読む

Web制作環境を整える その2 – Sublime Text 3 の外観をカスタマイズする

Sublime Text のアピアランス

モチベーションは見た目から。私はカタチから入る性質なので、まずは色とフォントをカスタマイズするとします。
とりあえず、ダミーテキストを流し込んだ状態をチェック。文字間が詰まりすぎで、途中で切れてしまっていますね。

フォントを設定する

[Preference] – [Font] を選びたいところですが、ここは文字の拡大・縮小だけです。なので、[Preference] – [Setting – User] を開きます。すると、次のようなファイルが表示されます。

予備知識のない人は「ナニコレ?」って感じになりますが、これはJSON(ジェイソン)という形式の記述法です。JavaScriptのオブジェクト表記の方法ですが、JavaScript のみならず、いろいろなシーンで利用されています。
このファイルに設定項目を書き加えていく事で、機能をカスタマイズしていきます。

続きを読む