初心者向けエディターの選び方

2020年11月13日 2020年11月20日

　HTLM,CSSを記述するエディターに関して。ATOM? VSCode? テキストエディタ？いろいろあると思います。初心者向けにまとめてみましたので参考になれば幸いです。

　html,cssで記述を行う際のエディタの選び方に関して

　プログラミング始めたばかりの方にはどのエディターを使っていいのかわからないかと思いますが、初めの方はどれを使っても同じだと思います。有名なATOMやVS Codeあたりを使っていき、後々自分の使いやすいものに変えていけば良いと思います。

　実際私も初めは訳もわからずATOMを使っていました。プログラミングを勉強して

　3ヶ月目ぐらいでVS Codeの使いやすさがわかり、現在もVS Codeを使用しています。私的にはVS Code一択だと思います。

　初めて三ヶ月ですがこれらのことが便利だと感じました。

　順に説明します。

　HTMLの<head>内にCSSファイルのリンクを記述すると思います。その際CSSファイルを作成する前でもリンクを「command」+clickすればファイルが生成されます。

　style.cssというファイルを作成していなくてもこの部分を「command」+clickすれば良いのです。CSSファイル以外にも別途でファイルを作成する場面はあると思うのでこの機能はかなり便利だと感じました。

　Live ServerとはVScodeに追加できる機能でHTML、CSSを記述している際リアルタイムで反映されてウェブページが見れます。画面を2つ用意して片方で入力、片方でウェブページを開いておけば作業スピードがかなりアップします。

　やり方は

　まずVScodeの左側の上から５つ目を選択して[Search Extensions in…]からLiveServerを検索してインストール。

　その後、VScodeのOpen Folderから当該フォルダを開いて下部にあるLiveHtmlをクリックすれば始まります。

（注意：HTMLファイルだけを開いて行おうとすると下部が紫になりうまくいかない場合があります。）

　この機能はSass,Scssを使うなら必須の機能かと思います。機能は単純でSass,Scssを記述している際リアルタイムでCssに反映されるというものです。

　やり方は２とほぼ同じで、

　まずVScodeの左側の上から５つ目を選択して[Search Extensions in…]からLiveSassCompilerを検索してインストール。その後、VScodeのOpen Folderから当該フォルダを開いて下部にあるWatchSassをクリックすれば始まります。

（注意：Sass,Scssファイルだけを開いて行おうとすると下部が紫になりうまくいかない場合があります。）

　以上の機能を基本的に使っていてとても便利です。少しでも気になったらインストールして使ってみてください！

1件のコメント