HTMLやCSSが格段にコーディングしやすくなるEmmet(旧Zen-Coding)をNetbeansで使用する

カテゴリ:Web制作,パソコンタグ:,

以前エディタとしてNetbansを紹介しました。
今回はHTMLやCSSを書く時に更に便利になるプラグイン「Emmet」を紹介したいと思います。

EmmetはZen-Codingの次期バージョンとして開発されています。
様々な主要エディタにも対応しており、公式サイトで確認出来ます。

この記事のメニュー

  1. Netbeansにプラグインを追加する
  2. Emmetの使い方

emmet-netbeans_01
Netbeansを起動したら「ツール」から「プラグイン」を選択します。

emmet-netbeans_02
次に「使用可能なプラグイン」から「Emmet」の左横にチェックを入れて「インストール」をクリックします。

emmet-netbeans_03
「次 >」ボタンをクリックします。

emmet-netbeans_04
「すべてのライセンス契約条件に同意する」にチェックを入れて「インストール(I)」ボタンをクリックします。

emmet-netbeans_05
プラグインがダウンロードされ、インストールが開始されます。

emmet-netbeans_06
証明書の確認画面が出ますが、「続行(C)」ボタンをクリックしてインストールを継続します。

emmet-netbeans_07
この画面が出ればインストールは完了です。
「Restart IDE Now(今すぐIDEを再起動)」もしくは「Restart IDE Later(後で再起動する)」を選択して「終了(F)」ボタンをクリックすると完了です。
「Restart IDE Later」を選択した方はNetbeansを再起動するとプラグインの追加が完了します。

【HTMLの場合】
よく使うものの一つとしてはリストタグがあるのではないでしょうか。
項目が少ない場合は手打ちでも問題ないかもしれませんが、項目が多い場合などはコピペでも大変かもしれません。
今回導入したEmmetを使えばこんな記述で簡単にリストタグを入力出来ます。

と入力してから初期設定だと「Ctrl+Alt+N」を押せば

と展開されます。

【CSSの場合】
もちろんHTMLだけじゃなくてCSSも対応しています。
例えば

と入力して「Ctrl+Alt+N」を押せば

と展開されます。

詳しい書き方などは公式のCheat Sheetがありますので参照して下さい。
慣れるまでは独特の書き方に戸惑うかもしれませんが、慣れてしまえばタグを手打ちするよりかなりのスピードアップにつながるのではないでしょうか。

私も早く慣れるように頑張ります(笑)

尚、キーマップ(展開のショートカットキーなどの変更)は「ツール」>「オプション」>「キーマップ」より変更可能です。
「Expand Abbreviation」の値が展開に使用するショートカットキーです。
ショートカットの右側にある「…」を押して編集を選択することで変更可能です。他のショートカットキーとかぶらないように設定しましょう。

関連リンク:
Emmet — the essential toolkit for web-developers
Cheat Sheet(HTMLやCSSの記述方法のチートシート)

あとでよむ / みんなにシェアする

このエントリーをはてなブックマークに追加
LINEで送る

コメントをする / みる

コメントを残す

コメントはまだありません。

検索する

カテゴリ一覧

タグ一覧

お知らせ アクセス解析 アプリケーション ゲーム サーバー スニペット プラグイン 動画 日記 Laravelパッケージ Laravel3 Laravel4 Tips Webサービス Webデザイン WordPress

最近投稿された記事

つぶやき

【GIGAZINE読者限定早い者勝ち】無料でDropbox・Googleドライブなどのクラウドを自由自在に同期・一括管理できる「まとめてクラウド」が先着5万人48時間だけゲット可能 - GIGAZINE gigazine.net/news/20151010-…

約2年前

離れていてもコミュニケーションが取りやすい便利なサービス「Remotty」 #remotty remotty.net

約2年前

RT @localdisk: メジャーどころがたくさん / 【セキュリティ ニュース】「WPTouch」など多数のWordPressプラグインに脆弱性(1ページ目 / 全1ページ):Security NEXT security-next.com/057930

約2年前

Javascript フレームワーク「Aurelia」aurelia.io

約3年前

dockerで起動済みのコンテナに対して何かしたい時は、docker exec -it コンテナ名 /bin/bashで入って実行したり、docker exec -it コンテナ名 supervisorctl restart nginxみたいな事も出来て便利。

約3年前

サーバー移転完了に伴いサイトの閲覧も可能な状態になりました。移転作業中にご訪問いただいた方には大変ご迷惑をおかけいたしました。今後このようなことがないよう気をつけて参ります。

約3年前

現在当サイトが閲覧出来ない状態となっております。こちらはサーバーの移転作業に遅れが生じているためとなっております。ご利用いただいている方にはご迷惑をおかけいたします。

約3年前

WordPress4.1.1(日本語版)が利用出来るようになりました wp.me/p4RkJY-Dj

約3年前

RT @keito_jp: Twitterをサマーウォーズ的に表示させるやつを製作中。遊んでみてね。 open.moo.jp http://t.co/gIgp5Gh6qW

約3年前

任天堂、YouTubeの広告収入を動画制作者とシェアする「Creators Program」サービス開始 | Game*Spark - 国内・海外ゲーム情報サイト s.gamespark.jp/article/2015/0…

約3年前

↑上へ戻る