こんにちは。
今週も残すところ金曜日になりました。
つい昨日くらいに今日は月曜日ですねなんて言っていた気がします笑
着々と今年の終わりが近づいてきますね・・・
やり残したことがないか考えないとです＾＾
では、今日はついにEmmetについての記事です・・・！
実はいつか書こうと思って温存していました笑
すでに使っている人、名前は聞いたことがある人、様々かと思います！
もしまだ使っていない人はこれを機に取り入れてみてはいかがでしょうか＾＾
Emmetとは
Emmetとは、HTMLとCSSの記述を省略記法で爆速にするテキストエディタの機能です！
ちなみに昔はZen-codingという名前だったそうな。
プロのコーダーやエンジニアは必ずと言っていいほど使っているのではないでしょうか。
私が使用している「Visual Studio Code」には標準で入っています＾＾
他のメジャーどころの「Sublime Text」や「Atom」も拡張機能をいれることで使えるようになります。
とにかく覚えるとめちゃめちゃ時間短縮になるので便利です！！(^○^)
今日はHTMLの記述方法をみていきましょうー！！
HTMLの記述方法
要素 + 「Tabキー」
基本の形は 要素 + 「Tabキー」 です！
例）<h2>をつくる
- h2 + Tabキー → <h2></h2>
h２の場合2文字打つだけで閉じタグまで補完してくれます。
便利ですよねーー！
ちなみに
- h2{テキスト} → <h2>テキスト</h2>
でタグに入れたい文字も指定することができます！
下で紹介する方法にも最後にTabキーを押すことで展開されます＾＾
要素＞要素
<ul>のなかに<li>をつくりたい場合などの階層が違う場合の書き方です！
例）<ul>のなかに<li>をつくる
ul > li
↓
<ul>
<li></li>
</ul>
ちなみに下で紹介する「アスタリスク＊」を使って複数のliをつくれます！！
例）<p>のなかに<img>をつくる
p>img
↓
<p>
<img src=”” alt=””>
</p>
要素＊数字
同じタグを複数つくりたい場合の書き方です！
例）<ul>のなかに<li>を４つつくる
ul>li*4
↓
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
tableタグなどでもよく使います！
あとは単に<p>を量産したい時などは p*20 と書くだけでpタグが20個できます笑
要素＋要素
並列でタグをつくりたい場合の書き方です！
例）<dl>のなかに<dt><dd>を1つずつつくる
dl>dt+dd
↓
<dl>
<dt></dt>
<dd></dd>
</dl>
ちなみに<dt><dd>を複数つくりたい場合は
- dl>(dt+dd)*3
と記述すると<dl>のなかに<dt><dd>のセットが３つできます♪
class名、id名をつける
これまた便利です！！
どちらもHTML上で
- .title + 「tabキー」 → <div class=”title”></div>
- #title + 「tabキー」 → <div id=”title”></div>
と自動的にdivに名前がつく形で展開されます＾＾
ちなみに、前に要素をかくとその要素の名前が付けられます！
- h2.title + 「tabキー」 → <h2 class=”title”></h2>
まとめ
HTMLの記述方法は基本は要素と 「＋」、「＊」、「＞」 の組み合わせになります。
この３つの記号の意味を覚えておけば大丈夫ではないでしょうか＾＾
今日はHTMLの記述方法をみていきました！
明日はCSSの記事を書きます＾＾
ではさようなら〜〜
コメント