Brackets（ブラケッツ）の拡張機能「Emmet」に感動！ - 求職者支援訓練（職業訓練）からWeb業界への転身を目指すオッサンの奮闘記

週明けの月曜日、講義は復習から始まりました。

これは助かる、知識やスキルなんて一朝一夕に身に付くものではないし、

繰り返しやっていくしかありません。

新しい言語を習うなら尚更ですね。

先生からはこんなキツイ言葉ありました。

「1日の講義時間は5時間だから、本当は5時間の復習が出来るといいんだけど・・

　最低でも2時間はやって下さい。」

と。

本当は初心者なら地道にタグ打ちをしてスキルアップを目指すべきだけど、

先生は効率的に打つ秘密兵器を教えてくれました。

それが、Brackets（ブラケッツ）に備えられた拡張機能＝Emmet（エメット）です。

この機能を使うとどうなるか？

（例）

<ul>

</ul>

というリストタグを打つ時、

（エメットを使うと）

li*3>a[href="#"]{メニュー$}

と打ち、カーソルが一番右（最後）にある状態で「tabキー」を

押すと、上記の構文となるのです。

これはCSSの入力時にも使え、

（例）

margin-botoom: 10px

なら

（エメットを使うと）

mb:10

です。

カーソルの位置を確認して「tabキー」を押せば（例）のように

変換されます。

ここで大事なのはこの省略文を覚えるのではなく、

「こんな風に打ったらどんな風に変換されるかな？」と

考える事。

「こんな風に省略したらこんな結果になるんじゃないの？」

と言う具合に、タグ打ちを楽しむといいそうです。

う～ん、基本が出来てないのに応用はハードルが高いなぁと

思いつつ、頭の片隅に入れて置こうと思います。

そうそう、コメントタグを打つ時の便利なショートカットも習ったので

メモしておきます。

「Ctrlキー」＋「/」（スラッシュ）

です。

が挿入されます。

初心者のうちは出来るだけコメントタグを入れるよう指導されています。

＜スポンサーリンク＞