バイト先で「新ゆとり世代」と言われました。れこです。
\nHTML、CSSを省略して書けるZen-Codingの後見、
\nEmmetについて書こうと思います。
やれCoffeeだTypeScriptだSassだ〜と手をつける前に、
\nもっと簡単に、デメリット無く作業効率をあげられます。
CoffeeScriptやSassなどのプリプロセッサ系とは違い、
\nCoffeeやSassの知識を開発メンバー全員が持ってないとならず、
\n結局自由が効かなくなる、ということはありません。
個人から使えて、チームで使ってもなお良し。
\nさらに、展開後のカーソルの位置がいい感じだったりと、
\n細かい気配りまで完璧です。
そんなEmmetを
\n僕が頻繁に使っている機能に焦点を当てて、紹介したいと思います。
Emmetは各種エディタ・IDEのプラグイン形式で配布されています。
\nお値段は無料です。
Web系の人が使ってそうなエディタについて
\n導入方法をざっくり説明します。
Package Controlは入っている前提で、
\nCtrl + Shift + Pを押し、Install Packageを選択。
\n出てきたリストの中からEmmetを選ぶだけです。
数秒待てばインストールが完了し、もう準備完了です。
\n\n\n【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・上巻 ｜ Developers.IO
\n
プラグインページからCoda用プラグインを落としてきて、 それをダブルクリックするだけで準備完了です。
\n\n\n\n
最強と呼ばれるWeb Stormですが、
\n使ったこと無いので導入方法はイマイチわかりません。
\n\n\n
\n\n\n
\n\nEclipseにZen Codingをインストールする
\n
Emmetの使い方は、
\n各エディタやOS、設定によって微妙にショートカットが変わる可能性があるので、 もし展開がされなかったら、ググってみてください。
ショートカットは、基本的にCtrl + eになっていると思います。
Emmetのコードを入力して、その行末でショートカット押せば
\nカーソル以前のEmmetコードが展開されます。
EmmetでHTMLを書く際最低限知っておくと便利なのは、
\n#、classは.<と>は不要。タグ名だけでいいA>Bのように>を使う$を使う[属性名=値]と書く。値に\"は不要基本これだけで恩恵を受けられます。
\nCSSやjQueryを使ったことが有る方なら、すぐ馴染めると思います。
他にも()でグループ化したり、^で階層を上に戻ったりできますが、
\nそこら辺は割愛します。
ごくごくベーシックな例を出すと、
\nlinkheadタグ内に必ず入れると思います。
\nこれを展開すると、
<link rel=\"stylesheet\" href=\"\">と、rel=\"stylesheet\"、href=\"\"を付加した状態にしてくれます。
よくあるメニューは、こんな感じになると思います。
\nnav>ul#menu>li*5>a[href=#]navの中にidがmenuのulを入れて…という具合です。
\nこれを展開するとこんな感じになります。
<nav>\n <ul id=\"menu\">\n <li><a href=\"#\"></a></li>\n <li><a href=\"#\"></a></li>\n <li><a href=\"#\"></a></li>\n <li><a href=\"#\"></a></li>\n <li><a href=\"#\"></a></li>\n </ul>\n</nav>liに*5とついていますが、タグ名の後ろに*数字を入れることで、
\nそのタグを指定した数字分繰り返しますよー
\nとうい指定をできます。
最近は連番を使う機会があまりないのですが、
\nたまに使う時でもあると便利です。 連番を利用するには$を使います。
.thumb{サンプル$}*6今回はタグ名がありません。
\nタグ名を省略すると、デフォルトではdivになります。
\nulの中でタグ名を省略するとliになったり、だいたいいい感じになります。
<div class=\"thumb\">サンプル1</div>\n<div class=\"thumb\">サンプル2</div>\n<div class=\"thumb\">サンプル3</div>\n<div class=\"thumb\">サンプル4</div>\n<div class=\"thumb\">サンプル5</div>\n<div class=\"thumb\">サンプル6</div>連番って、行コピー&ペーストする際に、
\nさりげなくも、かなり面倒な作業だと思います。
そんなときも、連番にしたい所に$を一つ置くだけで連番に出来ます。
\nちなみに$$と$を２つ並べると、01、02、03…と２桁の連番になります。
僕がよく使うDOCTYPE宣言は、HTML4.01 transitionalとHTML5なので、
\nとりあえずそれだけ説明します。
!なんと1文字です。びっくり。
\nこれを展開するとHTML5のひな形が出来ます。
<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Document</title>\n</head>\n<body>\n\n</body>\n</html>文字コード指定のmetaタグまで入れてくれます!!！
\nデフォルトだと英語なのでlangがenになってしまいますが、
\n設定ファイルを数文字書き換えるだけでjaにできます。
\n\n新規テキスト ドキュメント (128).txt: Sublime Text 2 ： Emmet プラグインが出力する HTML の言語を修正する
\n
次に、HTML 4.01 transitionalはこうです。
\nhtml:4tこれがやや覚えにくいのですが、
\nIEが居る限り4.01と戦わざるを得ません。何とか覚えましょう。
\n展開すると以下のようになります。
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">\n<html lang=\"en\">\n<head>\n <meta http-equiv=\"Content-Type\" content=\"text/html;charset=UTF-8\">\n <title>Document</title>\n</head>\n<body>\n\n</body>\n</html>XHTML transitionalにしたい場合は、html:xtです。
Emmetの記事はHTMLについて書かれている場合が結構多いのですが、
\n個人的にはEmmetの真価はCSSにあると思ってます。
EmmetでCSSを書く時に意識すべきことは、
\n-で繋がるプロパティ名は、頭文字を打てばOK-を打つと、ベンダープレフィックスを適切に入れてくれるです。
\n慣れるまでは「むしろ面倒」と思うかもしれませんが、
\n慣れると、いちいちプロパティ名をフルで打つのがアホらしくなってきます。
EmmetのCSSの基本形は、こんな感じです。
\ntac唐突すぎてわけがわかりませんね。展開してみます。
\ntext-align: center;text-align: center; と、
\n頭文字をつないだ文字列になっています。
他にも例を出していきます。
\ndb => display: block;\nm:a => margin: auto;\ntdn => text-decoration: none;\nposl => position: relative;\npoa => position: absolute;\npf => position: fixed;\nw100 => width: 100px;\nfsz12 => font-size: 12px;\nfsz12pt => font-size: 12pt;このように、被るプロパティ名が多い頭文字は
\n少し長めに打たないと行けないのですが、たかだか5文字程度です。
単位は、多くの場合
\n省略してもpxを入れてくれるので数字だけ打てばOK。
他の単位を利用したい場合、明示的に書いてあげればそちらが優先されます。
\n僕も最近知りました。
\n上記の指定に+を組み合わせられるものがあります。
\nbackgroundなどを一括指定する場合に使うことが多いかと思います。
bg+ => background: #fff url() 0 0 no-repeat;\nf+ => font: 1em Arial,sans-serif;\nbd+ => border: 1px solid #000;CSS3を使うのがやや億劫な理由の一つ、
\nベンダープレフィックスさんにもしっかり対応しています。
Sublime Text2のように、複数カーソルに対応したエディタなら、
\n値を一度に指定できます。
ただでさえ捗るのに、さらに捗ります。
\n-bx\n\n-webkit-box-sizing: border-box;\n-moz-box-sizing: border-box;\nbox-sizing: border-box;\n\n-bxc\n\n-webkit-box-sizing: content-box;\n-moz-box-sizing: content-box;\nbox-sizing: content-box;-bxs\n\n-webkit-box-shadow: inset hoff voff blur color;\n-moz-box-shadow: inset hoff voff blur color;\nbox-shadow: inset hoff voff blur color;-trans\n\n-webkit-transition: prop time;\n-moz-transition: prop time;\n-ms-transition: prop time;\n-o-transition: prop time;\ntransition: prop time;-dbrs\n\n-webkit-border-radius: ;\n-moz-border-radius: ;\nborder-radius: ;\n\n-bdrs10\n\n-webkit-border-radius: 10px;\n-moz-border-radius: 10px;\nborder-radius: 10px;などなど。
\nお分かりだと思いますが、全部が全部に付けるのではなく、
\n必要な分だけプレフィックスを付けてくれます。
これは、ブラウザの進化ごとに、
\nEmmetもアップデートする形で変更されると思うので、 ちょくちょくアップデートをかけたほうが良さそうです。
Emmetを覚えて使うようになってから、 気にしているやEmmetが有効なタイミングも書いておきます。
\nこれはコーディングする際かなり重宝しています。
\nhtmlに展開してみて、「あ、ここの構造ミスったな」と思った時に、
\n展開前のEmmetコードを残しておくと、修正が非常に容易です。
特に、繰り返しのliタグの中身なんかを修正した際、
\nいちいち修正後をコピーして、１行ずつ貼り付け
\nなんてことをしなくて済みます。
素のhtmlは、見ればわかるのに、やたらと行数を取ります。
\nEmmetのコードとして１行で残いておいて、貼り付けて、展開
\nとすると、管理もしやすいし、何よりかさばりません。
htmlやjsの話をチャットなどでしている時に、
\nhtml構造やclass、idさえ伝われば良いのに、
\nいちいちhtmlを書くのは冗長です。
そんなときにEmmetのコードで表現すると、
\n簡潔かつ要所を的確に伝えることができます。
「メニューののhtmlどうなってる？」
\n「nav>ul>li*3>a[href=#]だよー」
\nと言った具合に。
ほぼ100％使用する機能しか触れていないので、
\n紹介がけっこう浅くなってしまいました。
「こういうのないの!?」と思われたら、公式のチートシートを見てみて下さい。
\nめちゃくちゃな数があります。とても覚えきれません。
\n要所要所見て覚えてみて下さい。
formやinputタグ回りや、CSSの面白い省略記法などアリアリです。
\nあと、日本語化で少し触れましたが、
\n自分流のカスタマイズも手軽にできるので、
\nチームで共有したりなんだりして、コーディングの効率をあげましょう!!！