エンタメ

SublimeTextでEmmetを使う！HTML編

 

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      
      head

入れ子にしてみます。

 

head>link            

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

div#outside>ul.inside>li*5      
      
              
  •           
  •           
  •           
  •           
  •       

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

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

次に、

  • の中にテキストを挿入してみます。

    div#outside>ul.inside>li{テキスト入れる}*5      
          
                
    • テキスト入れる
      •           
    • テキスト入れる
      •           
    • テキスト入れる
      •           
    • テキスト入れる
      •           
    • テキスト入れる
      •       
      
        div#outside>ul.inside>li{連番「$」テキスト入れる}*5      
          
                
    • 連番「1」テキスト入れる
      •           
    • 連番「2」テキスト入れる
      •           
    • 連番「3」テキスト入れる
      •           
    • 連番「4」テキスト入れる
      •           
    • 連番「5」テキスト入れる
      •       

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

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

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

    div#outside>(ul.inside>li{連番「$」テキスト入れる}*5)+ul.tonari      
          
                
    • 連番「1」テキスト入れる
      •           
    • 連番「2」テキスト入れる
      •           
    • 連番「3」テキスト入れる
      •           
    • 連番「4」テキスト入れる
      •           
    • 連番「5」テキスト入れる
      •       
          
                
    •       
      
          div#outside>ul.inside>li{連番「$」テキスト入れる}*5^ul.tonari>li      
          
                
    • 連番「1」テキスト入れる
      •           
    • 連番「2」テキスト入れる
      •           
    • 連番「3」テキスト入れる
      •           
    • 連番「4」テキスト入れる
      •           
    • 連番「5」テキスト入れる
      •       
          
                
    •       

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

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

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

    ul+      
            
    •   
        dl+      
          
          
      
          table+                            

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

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

    HTMLの条件分岐です。

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

    cc:ie6            cc:noie            

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

     

    htmlのテンプレート

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

    html:5                      Document                   html:xs                      Document                   html:4s                      Document          

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

     

    DTD宣言のみ出す場合

     

    !!!            !!!4s            !!!xs

     

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

     

    input:hidden            input:t

    「input：typeの値」でイケます。

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

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

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

    でわ！

    • RELATED POST