Sublime Textの導入から使ってみよう

Sublime Textの導入から使ってみよう

皆様こんばんわ、Webデザイナー目指し中のちゃんけいです。「つくると!」の出展が確定しましたので是非会場にお越しください。私の恩師の方や、所属するFacebookのコミュニティの方々も出展しますので是非お越しください。

さて本日はSublime Textを使い始めたので導入と使い方を少しと感想を書いていきたいと思います。

目次

  • Sublime Textについてとダウンロード
  • プラグインの説明+Sassを少し
  • まとめ

Sublime Textについてとダウンロード

http://www.sublimetext.com/3
こちらのサイトよりダウンロードします。私はSublimeText3を使っています。
SublimeTextを使っての感想は、以下のようになります

  • 動作が軽い
  • プラグインが豊富(今回のメイン)

プラグインの説明

先ほどメインと書きましたプラグインを入れていきましょう。とても快適に使えるようになると思います。実際に私が使っているプラグインの説明を行いたいと思います。

コード補完

『HTML5』『css3』『jQuery』こちらは、コード補完機能になります。

Emmet

短縮系でコード書ける優れもの!
例えば、上記のようなグローバルメニューのHTMLを書きたい場合、下のように書いて tabキー(control+E) を押すことで一瞬でできます。


nav.gMenu>ul.list1>li*5>a

初めてした時、感動しました。Emmetはcssにも使える書き方が厳密でcssにはあまり向いていません。なのでHTMLを書くのに使うという感覚で良いかもしれません。短縮の仕方はチートシートをご覧ください。

Hayaku

こちらも短縮系コードで書ける優れもの!EmmetはHTMLにと書きましたが、Hayakuはcssに使います。例えば先ほど書いたグローバルメニューにcssを書きたい時、Hayakuを使うと


dt → tabキー → display:table;
bg#0 → tabキー → background:#000;

こんな感じにかけます。慣れるまで少し時間がかかりますが、ほんとうにHayakuなります。EmmetとHayakuをHTMLとcssでうまく使い分けてみてください。きっとコーディングが楽しくなります。

Sassをすこしだけ

Sassってご存知でしょうか?少しパソコンの知識がないと導入のハードルが高いのです。なので下記のサイトを参考にしてみてください。もちろん、私にきいていただいてもしっかりお答えできるように頑張ります!

Sassはcssの書き方を変えることができます。ファイルの拡張子を.sassか.scssにしてください、どっちが良いの?という方には.scssをお勧めします。では、早速下記のcssを書きたい場合とsassで書いた場合を比較しましょう。Emmetの紹介で書いたHTMLにcssを書くことが前提とします。

cssの一般的な書き方の場合

ul.list{
display:table;
width:100%;
}
li{
display:inline-block;
}
a{
display:block;
}
a:hover{
background:#000;
color:#fff;
}

scssで書いた場合

.list{
	display: table;
	width: 100%;
	li{
		display: inline-block;
		a{
			display: block;
			&.hover{
				background: #000;
				color: #FFF;
			}
		}
	}
}

明らかに書き方の違いがありますね、sassを使った場合入れ子い出来るのでとても書きやすくわかりやすいです。

まとめ

使った感想をメインに書きましたが、少しでも興味をもっていただけたら幸いです。導入方法はここで書くより、他のサイトでとてもわかりやすく説明されているのでそちらを参考にしてみてください。

今回の記事本当は先週公開するはずが、一度データが全て消えてしまったので遅くなりました。ブログを書く時は投稿フォームではなくローカルで一度書いてからあげるようにしようと身に沁みました。

私が参考にしたサイトNaverまとめ
こちらのサイトと先輩に教えてもらいながら導入しました。人に聞くことが一番早いと思いました。。。

それでは、また次回の記事でお会いしましょう。