CSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」フォローアップ(2)Dreamweaverのコードエディター機能を進化させたBrackets | CSS Nite公式サイト

CSS Nite公式サイト - 2017年8月10日(木) 20:00
このページは、外部サイト CSS Nite公式サイト の情報をRSSフィード経由で取得して表示しているため、記事の一部分しか表示されていなかったり、画像などが正しく表示されなかったり、オリジナル記事が意図したデザインと異なっていたりする場合があります。
完全な状態のオリジナル記事は 「CSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」フォローアップ(2)Dreamweaverのコードエディター機能を進化させたBrackets」 からご覧ください。

2017年5月13日(土)大阪産業創造館 4Fイベントホールで開催したCSS Nite in OSAKA, Vol.43「Reboot Dreamweaver」のフォローアップとして、鷹野 雅弘(スイッチ)の『Dreamweaverのコードエディター機能を進化させたBrackets』セッションのスライドなどを公開します。

メッセージとフォローアップ

アンケートにいただいた質問やコメントへの返答Emmetでできることを全部知りたいです。特殊文字の変換の仕方があれば教えてください。

「p*4>lorem」でLorem Ipsumが入ったりしますが、特殊文字(©とか?)はないと思います。

BracketsはAtomでも使えますか?

おそらく「EmmetはAtomでも使えますか?」ですね。こちらからプラグインをダウンロードできます。

その他のエディタのプラグインも、こちらにまとまっています。

「Generic…」の続きがメモれなかった。

Dreamweaverもパッケージをインストールしてカスタマイズするやり方になっていることに驚きました。

10年以上前からDMXzoneはありますよ。つまり、拡張機能でカスタマイズするという文化は存在していました。以前は、アドビのサイト内でも拡張機能が紹介されていました。

Emmetフル版のインストール

公式サイトから拡張機能をダウンロードして、Dreamweaverにインストールします。

CC 2015以降、拡張機能をインストールするためのアプリケーション Extension Manager がサポート終了となってしまったため、DMXzone Extension Manager、または、オープンソースのZXPInstallerを利用します。

EmmetをDreamweaverにインストールしたときの全機能

Dreamweaverのキーボードショートカット設定にて割り当て可能です。

コマンド意味NumbersIncrement Number by 11増やすDecrement Number by 11減らすIncrement Number by 0.10.1増やすDecrement Number by 0.10.1減らすIncrement Number by 1010増やすDecrement Number by 1010減らすEvaluate Math Expression四則演算CSSReflect CSS Valueベンダープリフィックスの値を一致させるHTMLMatch Pair Tag (outward)親要素を選択(Dreamweaverの
親要素を選択と同様)Match Pair Tag (inward)子要素を選択Go To Matching Pair開始タグと終了タグを行き来するRemove Tagタグを削除Split/Join Tag Declaration閉じタグを省略するExpand Abbreviation省略語を展開するWrap with Abbreviation選択したテキストに省略語でマークアップするToggle Commentカーソルの位置の要素をコメントアウト
(HTML/CSS)Previous Edit Point前の編集ポイントへ移動Next Edit Point次の編集ポイントへ移動Select Next Item次のDOMに移動Select Previous Item直前のDOMの項目に移動Merge Lines改行を削除するEmmet Preferences環境設定(無効)ご参考

メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

インデックス
検索エンジンがWebページをデータベースに保存しているデータベース。データベース ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]