Sublime Text 3 + Emmetでid,class名コメントをHTML閉じタグの前に入れる / masuP.net
idやclass属性を付与した要素の閉じタグ付近に属性の名前をコメントで残すことで、HTMLの構造を分かりやすくすることが多いのですが、その都度コメントを入力するのは面倒くさいので、Mac + Sublime Text 3上で、Emmet使って楽しようという話です。 というわけで最終目標は、Emmetで.hogehogeを下記のように展開することです。 HTML <div class="hogehoge"> <!-- /.hogehoge --></div> Emmetのfilter機能 まずEmmetのfilter機能を使って、.hogehoge|cという風に末尾に|cを入力して展開すると、 HTML <div class="hogehoge"> </div> <!-- /.hogehoge --> という形で、閉じタグの後ろにid,class属性の値をコメントで入れてくれます。 とは言
[報告]Chrome即反映が魅力の快適テキストエディタ『Adobe Brackets』がなかなか良い感じだったよ
先日、勉強会でAdobe Bracketsをはじめて触ってきました！ 私はST2に恋している身なのでそこまで興味はなかったのですｇげふんげふん！これ、使ってみたらなかなか良かったのですよ…！ なので、今日はそこで学んできたAdobe Bracketsの魅力と、コーダー必須アイテムであるEmmet（Zen-Coding）のインストール方法を皆さんにご紹介したいと思います！！ というわけで、@stocker_jpさんがオープンされた教室『Stocker.jp / Space 』にて行われた@glatyouさんのAdobe Brackets勉強会にいってきました。 こういう勉強会に参加して、アプリケーションに触れてみるのって大事ですねー。ST2の時も触るまで微塵も興味なかったなぁ…ｗ Adobe Bracketsとは Adobeから出ている無料のテキストエディタです。CCに加入している必要はなく
![[報告]Chrome即反映が魅力の快適テキストエディタ『Adobe Brackets』がなかなか良い感じだったよ](https://cdn-ak-scissors.b.st-hatena.com/image/square/7f002ec6f1c95cdefd60abc37e5ecc2b1adcba9c/height=288;version=1;width=512/http%3A%2F%2Fwebimemo.com%2Fwp-content%2Fuploads%2Fadobebrackets.png)
[SublimeText]Emmetで高速HTML/CSSコーディング HTML編
Sublime Text 2 を使い始めた理由の半分が Emmet で高速 HTML/CSS コーディングしたかったからだ。 Emmet の凄さを見ればきっとあなたも使いたくなるだろう。 百聞は一見に如かずだ。 Emmet Documentationでその凄さを見てきてほしい。 Sublime Text 2 へのインストールは sergeche/emmet-sublime · GitHub から。 ここではHTML展開の基本をまとめたいと思う。 トリガータブまたはCtrl+Eで以下のような変換ができる。 HTMLの展開要素名タグ名を入力してトリガー発動するだけ。タグ名でなくてもタグっぽく展開する。 ネスト演算子子: >ul>li<ul> <li></li> </ul>兄弟: +div+div<div></div> <div></div> 親: ^ul>li^div<ul> <li></li
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Emmet v1.0がリリース！ナンバリング展開が逆順に対応！