読者です 読者をやめる 読者になる 読者になる

tamlog

主にwebのフロント回り たまに登山

EmmetでCSSを展開した時のコロンの後ろのスペースを取る方法

通常Emmetを展開するとコロン後ろにスペースが開くのですが、 記述ルールによっては消したい場合もあるので取りたいな、て時の対処法 手順 1.適当に「Extensions」などの名前をつけたファイルを作ります。 今回は次に作成しました。 /Users/(ユーザー名)/…

Emmetの閉じタグコメントを手前に変更する方法

filtersの閉じタグコメントは後ろに展開されるのでそれを手前に変更する方法 「emmet-app.js」の12035行目を変更 変更前 node.end = node.end.replace(/>/, '>' + nodeAfter); 変更後 node.end = node.end.replace(/

Emmet の便利なfilters

Emmetにはfilters機能があります。 閉じタグコメントをつけたり エンコードしてれたりとても便利です。 使い方は、最後に「|」と下記を入力して展開だけです。 hamlに変換 |haml htmlに変換 |html 展開時エンコーディング |e 閉じタグコメント |c デフォルト…

Emmet+Compass

Emmetの「snippets.json」にCompassの機能を登録しただけなのですが、 ひゃー便利便利!もうCompassもEmmetも手放せないですねー。 TextExpander的な事ですが、チーム内に共通のスニペット管理アプリが無い場合や Mac、Windowsだろうが関係ないですね。 素晴…

Emmetの拡張方法(snippets.json)

Emmetのスニペットは拡張することが出来ます。 自分でよく使う項目をスニペットとして登録出来るので便利です。 lang属性の変更や文字コードの変更、インデントの設定なども出来ます。 さらに独自に変数を追加することも可能です。 「snippets.json」内のソ…

DreamweaverのEmmetを日本語化

DreamweaverでEmmetのプラグインが出ましたねー。 Coda2よりちょっと機能が少ない気もしますが、嬉しいです。 Emmet 日本語化にチャレンジしてみました。 無事に動いてますので大丈夫だと思いますが、バックアップは忘れずに! さて、日本語化の設定方法は以…

もっとコーディングが早くなる「Emmet」使い方CSS編

1, 基本編 2, 応用 3, まとめ 1, 基本編 control+Eで展開 以下チートシートを参考にHTML編と同じで展開するとOKです。 http://docs.emmet.io/cheat-sheet/ ただすべて覚えるのは大変です。。 しかし!ある程度いい加減でも展開されるみたいです。 以下でいい…

Emmetショートカットなど

チートシート Fuzzy search ・Expand Abbreviation(展開)・・・control+E ・Wrap With Abbreviation(選択範囲を展開)・・・control+A ・Toggle Comment(トグルコメント)・・・command+/ ・Previous Edit Point(前のタグポイント)・・・control+← ・N…

もっとコーディングが早くなる「Emmet」使い方HTML編

1, 基本編 2, 応用 1, 基本編 control+Eで展開 idは # classは . 以下コードを使ってHTMLを記述 【入れ子】 > div>ul>li <div> <ul> <li></li> </ul> </div> 【同じ階層】 + div+p+bq <div></div> <p></p> <blockquote></blockquote> 【1つ戻る】 ^ div+div>p>span+em <div></div> <div> <p><span></span><em></em></p> </div> 【3つ戻る】 ^^^ div+div>p>span+em^^^bq

もっとコーディングが早くなる「Emmet」の便利なショートカットキー

1, 便利なショートカットキー 2, ショートカットキーを使いやすく 1, 便利なショートカット 「Emmet」のショートカットキーは強力です。 【以下よく使うもの】 ・展開 control+E ・選択範囲を展開 control + A ・トグルコメント command+/ ・一行にする cont…

もっとコーディングが早くなる「Emmet」の環境設定(coda2)

個人的に「Emmet」を使うのが最速な感じなこの頃ですが、みなさんはどのようなツールを使ってますか? Emmetとは 「Zen-Coding」の次期バージョンで「Emmet」としてベータ版開発が進んでいるみたいです。 Emmet v1.0がリリースしましたね! 簡単に言うと「Ze…