Home > スポンサー広告 > 最低限これだけ覚えればemmetの恩恵にあずかれるかもな考え方のヒント

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/171-9634d1a6
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > 最低限これだけ覚えればemmetの恩恵にあずかれるかもな考え方のヒント

Home > デザイン > 最低限これだけ覚えればemmetの恩恵にあずかれるかもな考え方のヒント

最低限これだけ覚えればemmetの恩恵にあずかれるかもな考え方のヒント

emmet.jpg

Emmet(旧 zen coding)を、できるだけ覚えずに入門するための、考え方を紹介します。
zen codingのときに私は一回挫折というか、面倒だなとおもって放置していた方で
なんで面倒と思ったかというと、速さに気を取られて一文で(何行ものHTMLを一発で=爆速を再現するため)長い呪文のような命令文をみて「あーだめだ」って思ったんですよね。

そのあたりも踏まえて、爆速にはならないかもしれないけど、短い文で面倒なコーディングを少しだけ楽にする基本を書いてみたいとおもいます。


環境設定でのサーバーや、OSのコアな部分のセッテイングは不要。

Emmetは、gitのようにサーバーとつないだり、Sassのようにコンパイルの設定が不要です。
必要なのは、使っているエディタにemmetのプラグインをインストールするだけ。
Atomだと、Emmet plugin Atom editorとか、sublime text だとこのあたりの記事が役に立つのかな。
(Codaは一時停止されて、復活して、バッチがでて、できるようになったみたいなんですが、最近バッチへのリンクが切れているので難しいかもしれません。)

展開方法
ctrl + e

Emmetでは、命令文を一文書いて、HTMLを展開する形をとっています。
で、ほとんどのエディタに割り当てられているのが ctrl + e です。
これだけ覚えれば展開はOK。他もあるけど、とりあえずはこれで動きます。

動作テスト
#test ctrl + e

エディタの環境が揃って、動作を確認するときは、こういうシンプルな文をhtmlファイルに打ち込んで、文末ctrl + e するといいです。

<div id="test"></div>

こんな風に展開されれば、正しく動作しています。

#は、cssでいうところのidですね。なので、「idがtestのdivタグを作って!」という命令に変換されています。


では、 . (cssのclass)だったらどうなるでしょうか。

.test ctrl + e

<div class="test"></div>

意図したとおり、classに「test」が渡りました。
cssでのidやclass指定がそのまま使えるとを覚えておくといいかもしれません。

この指定は省略形で、div#test div.testでも同じ展開結果になります。

つまり、
「HTMLエレメント+ CSSのClass or ID」で指示が出せるので

span#test span.test

p#test p.test

みたいに他のエレメントでも指定が可能です。

長い文もいろいろあるけど、大事なのは演算子

たとえば、
div>(header>ul>li*2>a)+footer>p

みたいな長い文があって
展開が
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>

こうなるって言われてもよくわかんないかもしれません。

でも、先ほど説明したとおり、エレメントを指定すれば展開されるんです。
では、他にわからないのは?
> とか () とか * ですね。
この演算子たちをうまく繋げてやることができれば、emmetの基本は覚えたも同じです。

子要素:>

>は、子要素を指定しています。
なので、

div#test>pを展開すると
<div id="test">
<p></p>
</div>
となります。
だいたいこの演算子でつないでいくことになります。

足し算:+

子要素にせず、同じ階層に置きたい場合は + を使います。

div#test+p

<div id="test"></div>
<p></p>

となります。

掛け算:*

繰り返して同じタグを使いたいときに便利な *

リストタグや、テーブルタグで使うことが多いですね。

ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>


グループ化:()

掛け算と足し算が混在するときは、計算式として () を使いたくなりますね。
もちろんEmmetでも用意されています。

div#test>(p>span)*5
<div id="test">
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
</div>

div#test>(p+span)*5

<div id="test">
<p></p>
<span></span>
<p></p>
<span></span>
<p></p>
<span></span>
<p></p>
<span></span>
<p></p>
<span></span>
</div>

演算子でつないでる感覚、わかりましたか?
基本、Emmetでやってるのはこれだけです。他にもひとつ要素を戻る ^ や 繰り返しの際に使えるナンバリングの $ がありますが、これは、慣れてから覚えてみてください。


Emmetは、なんとなくですが、CSSやJqueryの指定の仕方に似ているなぁって思います。
コツは、書きだされるHtmlをイメージすること。
あと、いろんな組み合わせを試すこと。
何度も展開しそうな命令文は、コピーしてどこか他のtxtエディタに貼り付けておくとすこし作業が楽になりますよ。

テンプレートの指定や、ショートカットは後から覚えても大丈夫。まずは基本からちょっとずつストレスをなくしていきましょう。
もしこのあと覚えるとしたら、コメントアウトの ⌘ + / などがおすすめです。

Emmetのチートシートもご参考にどうぞ。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/171-9634d1a6
Listed below are links to weblogs that reference
最低限これだけ覚えればemmetの恩恵にあずかれるかもな考え方のヒント from バニデザノート

Home > デザイン > 最低限これだけ覚えればemmetの恩恵にあずかれるかもな考え方のヒント

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。