SublimeTextでEmmetを使う!HTML編

2014.5.5 エンタメ

Dreamweaverに頼りっきりの僕が冒険するための記事です。
Sublimetextパッケージ界きっての優秀パッケージ、Emmetを使っていきます。
僕自身が初心者級の知能なので、初心者の方には易しい記事だと思います^^
全2編(予定)

5/29 SublimetextでEmmetを使う!CSS編公開しました!

 

Package Installから

「Ctrl+Shift+p」 > 出てきたテキストエリアに「inst」まで入力
すると一番上にPackage Installが現れますので、「emmet」と入力し、Enterでインストール完了。

パッケージインストール Sublimetext

Emmetの基本操作

windowsマシンで利用する前提で話していきます。
基本的に「Ctrl+E」で機能させます。

div
<!-- Ctrl + E -->

<div></div>


head
<!-- Ctrl + E -->

<head></head>

入れ子にしてみます。

 

head>link
<!-- Ctrl + E -->

<head>
    <link rel="stylesheet" href="">
</head>

linkだけで、スタイルシートへのリンクを貼る記述が簡単にできます。
ではもう少し複雑にしてみます。Zen-cordingを使っていた方ならさほど問題はないはず!

div#outside>ul.inside>li*5
<!-- Ctrl + E -->

<div id="outisde">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

要素のあとに「#」をつけてidが指定可能になります。
同じように、要素のあとに「.」をつけるとclassの指定ができます

さらに「*のあとに記述した数値分、同じ要素を展開できます。

次に、<li>の中にテキストを挿入してみます。

div#outside>ul.inside>li{テキスト入れる}*5
<!-- Ctrl + E -->

<div id="outside">
    <ul>
        <li>テキスト入れる</li>
        <li>テキスト入れる</li>
        <li>テキスト入れる</li>
        <li>テキスト入れる</li>
        <li>テキスト入れる</li>
    </ul>
</div>

div#outside>ul.inside>li{連番「$」テキスト入れる}*5
<!-- Ctrl + E -->

<div id="outside">
    <ul>
        <li>連番「1」テキスト入れる</li>
        <li>連番「2」テキスト入れる</li>
        <li>連番「3」テキスト入れる</li>
        <li>連番「4」テキスト入れる</li>
        <li>連番「5」テキスト入れる</li>
    </ul>
</div>

要素のあとの「{}」内にテキストを入れるだけでOK
さらに、連番を振りたい場合は「$」を入れるだけでその箇所が数字に変わります。
2つ続けて「$$」とすると、01、02…と言った感じになります。
これはidやクラス名にも適用できます。

でもcssの指定で、先頭が数字のクラス/idはスタイル適用が出来ないので注意。

では、更に更に階層を操っていきます。先ほどの例をアレンジしましょう

div#outside>(ul.inside>li{連番「$」テキスト入れる}*5)+ul.tonari
<!-- Ctrl + E -->

<div id="outside">
    <ul>
        <li>連番「1」テキスト入れる</li>
        <li>連番「2」テキスト入れる</li>
        <li>連番「3」テキスト入れる</li>
        <li>連番「4」テキスト入れる</li>
        <li>連番「5」テキスト入れる</li>
    </ul>
    <ul>
        <li></li>
    </ul>
</div>


div#outside>ul.inside>li{連番「$」テキスト入れる}*5^ul.tonari>li
<!-- Ctrl + E -->

<div id="outside">
    <ul>
        <li>連番「1」テキスト入れる</li>
        <li>連番「2」テキスト入れる</li>
        <li>連番「3」テキスト入れる</li>
        <li>連番「4」テキスト入れる</li>
        <li>連番「5」テキスト入れる</li>
    </ul>
    <ul>
        <li></li>
    </ul>
</div>

ul」を隣り合わせに配置したい場合、「+」を使います。
ただ、そのままでは「li」のとなり、つまりは「ul」の入れ子になってしまうので、
ul.inside>li{連番「$」テキスト入れる}*5」をグループ化します。
そうすることで、入れ子になってしまわずに済みます。

同じように、「ul.inside>li{連番「$」テキスト入れる}*5」の横に「^」を続けて書いていくことで、
上記と同じことが出来ます。
ただ、個人的には「()」でグループ化したほうが親切ですね!

ここまで、「ul>li」としてきましたが、別にそうしなくてもできるのです。

ul+
<!-- Ctrl + E -->

<ul>
    <li></li>
</ul>

dl+
<!-- Ctrl + E -->

<dl>
    <dt></dt>
    <dd></dd>
</dl>


table+
<!-- Ctrl + E -->

<table>
    <tr>
        <td></td>
    </tr>
</table>

要素を内包するHTMLは「+」で出せちゃいます。

コンディショナルコメント

HTMLの条件分岐です。

これは頼らず書けたほうがいいと思うのですが、意外と凡ミスもあるので…

cc:ie6
<!-- Ctrl + E -->

<!--[if lte IE 6]>
    
<![endif]-->


cc:noie
<!-- Ctrl + E -->

<!--[if !IE]><!-->
    
<!--<![endif]-->

noie」は「IEではない場合」の条件分岐。コレは使えますね。
何故か「cc:ie7」とかはできませんでした。

 

htmlのテンプレート

機能として入っています。

html:5
<!-- Ctrl + E -->

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>


html:xs
<!-- Ctrl + E -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>


html:4s
<!-- Ctrl + E -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html「バージョン」「DTD宣言の種類」で、展開可能です!
XHTMLは「html:x●」なのでそこが注意です。

 

DTD宣言のみ出す場合

 

!!!
<!-- Ctrl + E -->

<!doctype html>


!!!4s
<!-- Ctrl + E -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


!!!xs
<!-- Ctrl + E -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

種類の多いinputもEmmetでこの通り。

 

input:hidden
<!-- Ctrl + E -->

<input type="hidden" name="" />


input:t
<!-- Ctrl + E -->

<input type="text" name="" id="" />

input:typeの値」でイケます。

いかがでしたでしょうか?今回はHTML編です。
ここに書いていないものでも、「たぶん…」で入力すると、意外と出てくるものもあると思います。
それだけ簡潔に構成されているってことですね。

以前、Sublimetext3でブラウザプレビューを実現した記事を書きましたが、
依然としてDreamweaver派の僕でも、さすがに心動きますね!
何より軽い!

次回、CSSのコードも紹介していこうと思います。

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからグラフィックデザイン的なことをして、ごにょごにょと小さく活動中。Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったり、主に散歩しています。だいたいラーメンを食べて帰ってくる、そんな過ごし方です(都内のオススメ散歩コース募集中!)。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。