お疲れさまです、デザイナーのサリーです。 LIGにSassがもたらされて1年… たまにあるCSSで書かなきゃいけない機会にネストして書いてハッとしてキーーッてなったりしますよね（Sassあるある）。 私はDreamweaverを使いつつたまーにSublimeText2を使っているのですが、DreamweaverはSassのコードヒントが出ないので、Compassのmixinを呼び出すのがかなり面倒です。 簡単に呼び出せるようにスニペット機能を使おうと思ったのですが、Emmetのスニペットを使う方が簡単そうだったので、やり方に慣れていることもありEmmetを使うことにしました。 今回はDreamweaverまたはSublimeText2で、Emmetにオリジナルスニペットを登録する方法を紹介します。 Emmetをインストールする すでにEmmetをインストール済の方はこの項目は飛ばしてくださ
BEM Advent Calendar 2013の3日目です。 BEM、良さげだけどHTML書くのが面倒になるじゃん、class長いし、多いし。などと思ってBEMを敬遠されている方がいらっしゃったらEmmetのBEMフィルターを利用すれば良いと思います。 Emmetって？ Zen-Codingをさらにすごくしたやつです。以下あたりが分かりやすいと思います。 Zen-Codingの次期バージョン、Emmet について｜Web Design KOJIKA17 EmmetのBEMフィルターを使ってサクッとHTMLを書いてみる BEMろうかなと思ってはみたものの、いざやってみると毎回「ブロック名-エレメント名」なんてclassを書いてらんねーよとなって途中で投げ出してしまうということがあります。僕は結構あります。 まぁ、それでもBEM + 自分ルールの良い感じの HTML / CSS にはなるので
Most articles and tutorials on Emmet cover its handling of HTML, but today we're going to focus on Emmet with CSS. Ready to turbo-charge your CSS writing? Let's go! Note: It is recommended that you have a reasonable understanding of CSS before following along. What is Emmet? Emmet is a collection of abbreviations that expand into html/xml/css, taking the idea of text snippets further. Visit the do
朝型になりたい、@cappeeです。 Dreamweaverでコーディングを効率良く行うために私もみんな大好きZen-Codingを使っています。 でも使っているデザインソフトやコーディングルールによって「展開後のコードを変えたい！」という時もあります。ので、カスタマイズしてみたところ、結構効率化できたと思うのでその方法と実際に変更したサンプルをまとめたいと思います。 Zen-Codingのカスタマイズ 下記のファイルを開きます。 C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Dreamweaver CS6\ja_JP\Configuration\Commands\ZenCoding\zen_settings.js zen_settings.js ファイルには展開前と後のコードが一覧で記述されているので、自分の使いやすいように編集してください。 “展開前”:
夏休みをとられている人が多いので電車が空いていて出勤が快適な週ですね。tanakaです。 今日はIDE PhpStormの機能のなかで既存のコードを包む機能「Surround Template」を紹介します。 プログラムのコードというのはなかなか最初から最後まで一直線に書いていくのはできなくて、あとでifブロックで囲んだり無名関数で囲んだりしたくなるものです。そんなときに使えるのが「Surround Template」。…といっても実際のところまだ使ったことがありません。 使い方 まず、Surround Templateで何ができるかというと、すでに書かれたコードをifブロックやforブロックで囲むことができます。JavaScriptなら無名関数で囲めますし、htmlファイルならタグで囲むことができます。 上記のように文字列を選択した状態でCtrl+Alt+Tを押します。すると次のような選
![[PhpStorm/WebStorm]Surround Templatesでコード変更を効率化 | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/2b62b4e0fd4ed08a00e42d880ceb27ae1f776b93/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fbashalog.c-brains.jp%2Fimages%2Fws_ps01.jpg)
こんにちは、ちょっと年末前くらいから、「Emmet」というキーワードを聞くようになり、 日頃お世話になっている、sublme text 2でも使えるということで今回、上下巻に分けてご紹介したいと思います。 アジェンダ Emmetとは？ 誰が開発してるの？ Emmetプラグインのインストール！ インストール後の設定 どんな感じがさわってみる。 おまけ Emmetとは？ はじめて「Emmet」を聞いた方は「Emmetってなに？」となるかと思いますので、簡単にご説明をできればと思います。 それでは、「Zen Coding」はどこかでお聞きしたことがあるのではないでしょうか？ 「Zen Coding」は、コード(スニペット)とショートカットを組み合わせて、効率的にHTMLやCSSのマークアップ手助けしてくれる、すごいツールで認知度も高いと思います。 その「Zen Coding」が名前を変えて＆進化
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
