penchi.jp

パソコン&Web屋 @penchi のブログ

Sublime Text と Emmet でハマったこと

   

Ec sublime

Sublime Text 超ビギナーの @penchi です。

Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ
を購入したのが去年の4月。

それ以来ハマっていたことが解決してスッキリしました。

 

Sublime Textに入れたEmmetでCSSが展開できない!

Sublime Textを導入した大きなポイントが、Emmetを使ってHTMLやCSSの入力を省力化できることです。

EmmteはZen codingの後継としてリリースされたコード入力を補助するプログラムで、Sublime Textの他にも、DreamweaverやCoda等にも提供されています。

Download

 

そんな便利なEmmetを使いてぇ! と導入したわけですが、HTMLの展開はできるものの、なぜかCSSの展開ができない・・・。

Emmetは指定の文字を入力して[control]+[e]で、コードを展開してくれるのですが、CSS用の文字を入れて展開してもHTMLのタグのようになってしまいます。

m0[control]+[e] なら margin: 0; となるはずなのに・・・

Sub007

HTMLのタグもどきになってしまう・・・。

また、[control]+[e]の他、[tab]でも展開できるはずなのに、[tab]では展開不能。

どうして??

ネットを調べても同じような症例の記事は見つからず、この件については放置状態でした。

 

原因はシンタックスモードだった!

このままではらちがあかないと、思い切って某質問サイトで相談したところ、1時間もしないうちに回答をいただきました。

右下にドキュメントタイプが表示されていると思いますが、CSSになっていないのではないでしょうか。

え? ここか? これか?

新規ウインドウだと Plain Text です。

Sub004

 

ここをクリックすると、ドキュメントタイプがずらっと表示され選ぶことができるので、CSSを選びます。

Sub002

 

その後、CSS用の文字を入力して展開してみると・・・キター!!

Sub003

完璧! [tab]キーでの展開もできました。

 

原因はファイルのドキュメントタイプ、Sublime Textではシンタックスモードをきちんと設定していないことでした。

なんて初歩的な・・・お恥ずかしい。--;;

某質問サイトで回答いただいたSさん、ありがとうございます!

 

これまでPlain Textで展開できていたHTMLのコードも

Sub005

シンタックスモードをHTMLにしてから展開してみると

Sub001

Sub006

きちんと色分けされて表示されます。[tab]キーでの展開も有効!

 

HTMLやCSSなど、既存のファイルは拡張子で判別し適切なシンタックスモードで開くので、そのまま利用できますが、新規ファイルを作成する場合は、シンタックスモードを設定してから作業を始めるようになるわけですね。

この点は、教科書やネットでもきちんと触れていないような気がします。(@penchi の読解力不足かもしれませんが。)

個人的にツボにハマってしまい、長期間解決できず悩んだことなので、恥ずかしながら記事にしてみました。

さぁ、これからガンガンSublime Textを使っていくぞー!!

 

Sublime Textと本格的に取り組むなら、この1冊が役立ちます!

 - ソフトウェア