8.0.2WindowsとMacの違いはキーバインドが異なるだけだと思います。会社の先輩から「Emmet良いよ」と言われて、3ヶ月くらい使ってみて思ったことをつらつらと書きます。EmmetとZenCodingの後継にあたるものです。言いつつも自分もよく知らないです。HTML/CSSのコードをサポートしてくれるツールです。私はCSSではほとんど使っていないので、HTMLの使い方だけについて書きます。今回はNetBeanspのEmmetプラグインをインストールします。idea、Emacs、Vim、サクラエディタ(!)にもプラグインがあります。NetBeansの場合はこちらからnbmファイルをダウンロードして、NetBeansにプラグインを追加します。V7.4用となっていますが、8.0.2でも使えるようです。キーバインドをCtrl+Eに変えます。(変えなくてもよいですが使いづらいのでEclipseのデフォルトにあわせてCtrl+Eにします。Abbreviations]で検索します。キーバインドを変更します。E」を押してみましょう。table>(col[width=*]+col[width=200]*2)+(thead>tr>th{ヘッダー$}*3)+(tbody>(tr>td{データ$}*3)*3)そうすると下のようなHTMLコードが生成されます。</table>ワンライナーで書いた内容がきれいなHTMLとして出力されます。慣れてくるとこのようなHTMLが一行で書けるようになります。書いてあってどれから手をつければいいかはわからないと思います。個人的にこれだけ覚えるだけで効率が上がると思ったものを取り上げていきます。最初の第一歩として単一のタグの書き方です。id属性は#をつけて、class属性は.をつけるとEmmetが設定してくれます。要素のテキストは{}で、その他の属性は[]でくくります。rowspan="2"></td>特定のタグでは必須となりうる属性についてはEmmetが勝手に付与してくれます。【>:子要素】つづいて子要素を作成します。子要素は「>」をつけます。子要素は複数の階層指定できます。これはCSSの隣接セレクタと同じです。</dl>これも子要素と同じく複数指定することができます。今までに説明した内容を使うだけでも効率が上がると思います。続いて、さらに効率化させるためにグルーピングを使います。簡単なテーブルを作りたい場合を例にします。グルーピングを使わない場合は下記のような順番でコードを書くことになると思います。「table」でtableタグの大枠を作る「col」をカラム数分だけ作る「thead」以下を作る「tbody」以下を作るグルーピングを使うと一発で書けるようになります。</table>グルーピングはネストすることができます。</table>【*:繰り返し】プログラマとしては同じものを書きたくないですね。いう場合は「*」を使うと繰り返して生成してくれます。</ul>$を使うとテキストに繰り返し回数が埋め込まれます。今まで説明したことを使ってちょっと複雑なものを作ってみます。</table>【おまけ】ここから正規なHTMLじゃなくて、変則なものでも使えますよと言うお話ですです。</f:view>ただし、Emmetの機能性で下記のような変換があるので万能ではないです。class="message"></div>下記のようなものは動かないので注意。class="message"></div>【まとめ】Emmetは非常に便利です。今回はロックについてです。今回はレコード更新についてです。今回は値の自動生成についてです。月別アーカイブはてなブログをはじめよう!gloryofさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。