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 ファイルには展開前と後のコードが一覧で記述されているので、自分の使いやすいように編集してください。 “展開前”:
こんにちは、ちょっと年末前くらいから、「Emmet」というキーワードを聞くようになり、 日頃お世話になっている、sublme text 2でも使えるということで今回、上下巻に分けてご紹介したいと思います。 アジェンダ Emmetとは？ 誰が開発してるの？ Emmetプラグインのインストール！ インストール後の設定 どんな感じがさわってみる。 おまけ Emmetとは？ はじめて「Emmet」を聞いた方は「Emmetってなに？」となるかと思いますので、簡単にご説明をできればと思います。 それでは、「Zen Coding」はどこかでお聞きしたことがあるのではないでしょうか？ 「Zen Coding」は、コード(スニペット)とショートカットを組み合わせて、効率的にHTMLやCSSのマークアップ手助けしてくれる、すごいツールで認知度も高いと思います。 その「Zen Coding」が名前を変えて＆進化
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く