[CSS エディタ]MeryでCSS3のベンダープレフィックスをボタン1個で書く

[CSS エディタ]MeryでCSS3のベンダープレフィックスをボタン1個で書く

毎日暑い日が続きますね!自宅のエアコン壊れっぱなし下山です。

今日はエディタの便利機能の紹介を。
ボクが最近使ってるエディタはMery。

スニペット(もどき)なんか自分で作れてオリジナルの環境作れるから便利です。
もちろんZenCodingも使えます。ボク使ってませんけど・・・

ちなみにスニペット(もどき)はJavascriptで書けます。

Meryダウンロード

そして最近気付いた機能が書いてるコードからスニペットを登録できるらしんですよ!

例えば上画像のようなボックス作ろうと思ったら、やってることは角丸、影、グラデーションの3つですが、各ブラウザ対応のためにプレフィックスも書きます。
ってそれがメンドクサイんです。

しかし、一度書いたコードをスニペットに登録しておけば次回からは「あら、簡単じゃない」ってことに・・・

では手順を。

とりあえずは1回メンドウなCSSを書きましょう。

今回書いたのはこれ。

次に登録したいCSSを選択してスニペットボタンをクリック→選択範囲を登録
[CSS エディタ]MeryでCSS3のベンダープレフィックスをボタン1個で書く

スニペットボタン→スニペットを編集
[CSS エディタ]MeryでCSS3のベンダープレフィックスをボタン1個で書く

こんな感じになってると思います。
[CSS エディタ]MeryでCSS3のベンダープレフィックスをボタン1個で書く

これをこう書き換えましょう。

css → 改行 → shadow → Tab の順番です。

すると次回からはこう出てきます。
[CSS エディタ]MeryでCSS3のベンダープレフィックスをボタン1個で書く

ようするにcssというカテゴリを作って(css → 改行)その中にshadowというスニペットを作りましたよって感じです。
あとは必要なCSSを随時登録していけば、きっとそのうちスニペットだけでCSS書けちゃうんじゃね?(なわけないですが)

他にもJavascriptで多数スニペット作ってますので、そのうち公開します。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク