「Sublime Text 3」で【Emmet(エメット)】を導入する方法・手順をわかりやすく解説!

HTML/CSS

みなさんこんにちは!おさかなです!

今回は「「Sublime Text 3」で【Emmet(エメット)】を導入する方法」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・「Sublime Text 3」を使用している方
・「Emmet(エメット)」に挑戦してみたい方
・「Emmet(エメット)」の導入方法が知りたい方

はじめに

今回は、Sublime text 3というエディタにEmmet(エメット)導入していきます!
「まだ、パソコンに入ってないよ…。」
という方は下の記事から準備してみてね✨

【Sublime Text 3】の「ダウンロード」&「インストール」方法・手順について!わかいりやすく解説!
【Sublime Text 3】の「ダウンロード」&「インストール」方法がこの記事だけでわかっちゃう!「プログラミング学習」には欠かせない「テキストエディタ」の使い方を徹底解説!初心者でも安心!「おさかなび-osakanav-」では、「デジタル時代を楽しむためのミニ知識」をご紹介しています!ゆるいイラストが目印!
おさかな
おさかな

順番通りにやっていけば大丈夫だよ!
焦らずゆっくりね!

※Emmet(エメット)って何?という方はコチラ!(準備中)

事前準備!「Packege Control」を導入していこう!

まず、「Sublime Text 3」に機能を追加していくためのプラグインである「Packege Control」を導入していきます!

まずは、下記コードを「コピー」します!

次に「Sublime Text 3」を開いて、「View」>「Show Console」を選択します。
(または、ショートカットキー「ctrl」+「`」)

すると、このような画面が表示されます…!

この画面の「テキストボックス」の中に、先ほどコピーしたコードを「貼り付け」て「Enter」を押します…!

これで、事前準備は完了です…!
(Emmet(エメット)が使えるまであともう少し!)

Emmet(エメット)を導入していこう!

それでは、早速Emmet(エメット)を導入していきましょう~!

まず、「Tool」>「Command Palette」を選択して「コマンドパレット」を開きます。
(または、ショートカットキー「Ctrl」+ 「Shift」+「P」)

すると、このような検索ボックスが表示されるので、「Packege Control:Install Packege」と入力します…!

途中まで入力すると検索候補に表示されるので、「選択」して「Enter」をクリックします!
すると、今度は先ほどとは少し違う「検索ボックス」が表示されます…!
この「検索ボックス」に「Emmet」と入力して「Enter」をクリックします…!
これで「Emmet(エメット)」の導入は無事に完了です…!(おめでとうございます🎉)

実際につかってみよう!

それでは、実際に「Emmet(エメット)」が使用できるようになったかどうか、チェックしていきましょう!

まず新しくファイルを開いて、右下の「言語設定」を「HTML」に変更します…!

右下に「HTML」と表示されていれば、OKです!

そして、ファイルの中に

html:5

と入力して「Tab(タブキー)」を押すと…。

 

こんな感じで!HTMLのひな型が一瞬で表示されました!(やった~!)

「Tab(タブキー)」を押すときに、カーソルの位置が「5」の後ろに来ていないと、Emmet(エメット)が上手く使えないので、ご注意を!
これで無事にEmmet(エメット)が使えるようになりました…!
おつかれさまでした🍹
Emmet(エメット)を使用すると、一気にコーディングペースが速くなるので、開発がサクサク捗ります!
是非!たくさん使ってみてください…!

感想・まとめ

今回は「「Sublime Text 3」で【Emmet(エメット)】を導入する方法」について、書いていきました…!

いかがだったでしょうか?

最初は「Emmet(エメット)」に慣れず、難しいと感じてしまうかもしれませんが、慣れると本当にスピーディーにコーディングすることができるので、がんばって使ってみてください…!

おさかなも、もうEmmet(エメット)なしの生活には戻れません!笑

ぜひ!積極的にチャレンジしてみてください…!(応援しています!)

おさかなびではプログラミング学習中の人、ブログ初心者に向けて、「デジタル時代を楽しむためのミニ知識」をご紹介しています!
ぜひ他のページも覗いてみてください…!

それでは今回はこの辺で!

ここまで読んでくださり、ありがとうございました!

おさかなでした!

【おさかなび-osakanav-】では、この記事の感想!おさかなへの応援メッセージ!おさかなに聞きたい事、質問!記事にしてほしい内容!などを大募集中!

「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください!

この記事は役に立ちましたか?

タイトルとURLをコピーしました