HTML/CSS

HTMLとCSSのエディタ紹介【これさえあればOK】

投稿日:2020年11月25日 更新日:

HTMLとCSSのエディタ紹介【これさえあればOK】と書かれた画像

 

あなた
HTMLとCSSの初心者です。HTMLとCSSのおすすめエディタが知りたいです。

 

HTMLとCSSを使って何かを作ろうと思ったときに必要なものが「エディタ」です。

この記事ではHTMLとCSSの編集にオススメのエディタを紹介していきます。

 

【この記事でわかること】

HTMLとCSSのオススメのエディタ

 

【この記事の信頼性】

この記事を書いている僕は現役のWEBエンジニアです。

普段からHTMLとCSSを使ってWEBページを制作しています。

 

ではさっそく見ていきましょう。

>>HTMLとCSSの学習ステップ一覧はコチラ

 

HTMLとCSSのおすすめエディタはVisualStudioCodeです

 

結論から話すとHTMLとCSSのオススメのエディタはVisualStudioCodeです。

 

この章ではエディタの意味やVisualStudioCodeのインストール方法を紹介します。

 

【この章でわかること】

 エディタの意味・メリット

HTMLとCSSのオススメのエディタであるVisualStudioCodeのインストール方法

 

そもそもエディタとは

 

HTMLとCSSの初学者の方にとっては「エディタ」という言葉も聞き慣れないと思います。

エディタとはHTMLとCSSを編集するツールです。

 

HTMLとCSSは通常のテキストエディタやメモ機能でも編集できます。

以下はMacに最初から入っているテキストエディットHTMLファイルを開いたものです。

 

テキストエディットでの編集画面

 

改行場所がわからず、色もタグ(<p>や<h1>など)に関わらず黒だけでぶっちゃけわかりにくいです。

 

次はエディタで開いたものです。

 

vscodeで編集したhtmlファイル

 

タグごとに改行が入りとても見やすくなっています。

文字によっても色も変わっていますね。

 

このようにエディタはHTMLとCSSを編集しやすくしてくれます。

あなたは今はまだその良さがわかっていないかもしれませんがこの先きっとエディタに感謝するときが来るはずです。

 

【結論】VisualStudioCode(VSコード)がオススメです

visualstudioコードの公式サイト

 

さてエディタの意味を紹介した次は本題のHTMLとCSSのオススメエディタについてです。

 

結論から話すとHTMLとCSSのエディタはVisualStudioCode(VSコード)がオススメです。

正式名称はVisualStudioCodeですが長いのでここからはVSコードと読んでいきます。

 

VSコードはMicrosoftが開発している非常に便利なエディターです。

サクサク動くのでストレスも少なく使えますし、拡張機能もたくさんあります。

 

初心者の方でも使いやすいのでまだエディタをインストールしていない方はとりあえずVSコードを入れておけばOKです。

 

インストール方法

 

ここからはMacの環境においてのVSコードのインストール方法を紹介していきます。

あなたが使っているパソコンがWindowsの場合はコチラを参考にインストールしてください。

>>【HTML】初心者が独学で勉強を始めてみた時の話【意外と出来る】

 

まずは公式サイトにアクセスします。

>>Visual Studio Code

 

以下のような画面になりますので、「今すぐダウンロード」を選択します。

「マック」を選択してインストールします。

 

vsコードのインストール画面

 

ダウンロードしたzipファイルを解凍してアプリケーションを起動します。

左の拡張機能検索で「Japanese」と打ち込みます。

すると日本語拡張機能が1番上に出てきます。

 

vsコードの言語拡張

 

インストールして有効化しておきましょう。

インストールして有効化出来たら一回VSコードを終了して、再起動してみてください。

日本語表記になっていればOKです。

 

vsコードの日本語拡張機能

 

無事準備できればHTMLとCSSを使っての開発環境は完璧です。

 

【この章のまとめ】

エディタはHTMLとCSSの編集をしやすくしてくれるツール

おすすめのHTMLとCSSのエディタはVSコード

 

HTMLとCSSの学習教材はコチラ

>>HTMLとCSSのオススメ教材を紹介【失敗しない】

HTMLとCSSの学習の始め方はコチラ

>>HTMLとCSSの入門方法【現役エンジニアの僕が解説】

初心者の方がやるべきことはコチラ

>>HTMLとCSSの初心者は何をすべき?【経験をもとに解説】

独学を頑張りたい方はコチラ

>>HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】

 

HTMLとCSSのエディタ一覧

 

あなた
HTMLとCSSの他のエディタはありますか?

 

HTMLとCSSのエディタにはVSコード以外にもあります。

この章ではVSコード以外のHTMLとCSSのエディタを紹介します。

 

【この章でわかること】

VSコード以外のよく使われるHTMLとCSSのエディタ

 

Atom

Atomの公式ホーム画像

 

VSコード以外のよく使われるHTMLとCSSのエディタの1つ目がAtomです。

AtomはGitHubによって開発・提供されているエディタです。

 

WEBデザイナーさんやその他WEB制作者の方が好んで使います。

パソコンのスペックによっては少々重くなってしまうので注意です。

 

NetBeans

Netbeansのホーム画像

 

VSコード以外のよく使われるHTMLとCSSのエディタの2つ目がNetBeansです。

Netbeansはは無償のオープンソースソフトウェアです。

 

エンジニアの方などが使っていますね。

比較的シンプルです。個人的にはあまり好きではないですね。

 

【VSコード以外のHTMLとCSSのエディタ】

 

HTMLとCSSのエディタを使いこなして効率よく開発しよう

 

今回はHTMLとCSSを使った制作・開発にオススメのエディタを紹介しました。

 

エディタは人によって好みが別れます。

あなたが好きなエディタを使うようにしましょう。

 

ただし効率のあがるエディタを使うことは大事です。

もしもあなたが編集するために効率が上がらないエディタを使っている場合はすぐに見直しましょう。

 

HTMLとCSSの学習教材はコチラ

>>HTMLとCSSのオススメ教材を紹介【失敗しない】

HTMLとCSSの学習の始め方はコチラ

>>HTMLとCSSの入門方法【現役エンジニアの僕が解説】

初心者の方がやるべきことはコチラ

>>HTMLとCSSの初心者は何をすべき?【経験をもとに解説】

独学を頑張りたい方はコチラ

>>HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】

 

 

その他HTML/CSSに関する記事

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  step0 学習の見通しを持つための記事を読んでおこう!   step1 教材を用意しよう! step2 HTMLとCSSの意味を理解しよう! step3 HTMLとCSSを使って開発できる環境を ...

続きを見る

【最新】HTML/CSSを習得できるプログラミングスクールランキングと書かれた画像
HTML/CSSを習得できるプログラミングスクールランキング

 

続きを見る

2021年最新プログラミングスクール おすすめランキング 【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

 

続きを見る

テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】と書かれた画像
テックアカデミーでHTMLとCSSを無料で学ぶ技【初心者必見】

  あなた簡単に無料教材を手に入れることができました!でも少し質問があるのですがいいですか?   この章ではテックアカデミーの無料教材についてよくある質問に対して答えていきます。 ...

続きを見る

HTMLとCSSの意味をエンジニアの僕が解説【1から学べる】と書かれた画像
HTMLとCSSの意味をエンジニアの僕が解説【1から学べる】

  あなたHTMLの意味とCSSの意味はわかりました。2つを使うと何ができるんでしょうか?   HTMLとCSSの意味を理解して2つを使えるようになると以下のことができます。 ・W ...

続きを見る

HTMLとCSSのオススメ教材を紹介【無料あり】と書かれた画像
HTMLとCSSのオススメ教材を紹介【無料あり】

  てんし君 大手プログラミングスクールのテックアカデミーが自社アピールのために提供しています。 大手の会社の教材なので情報も正確で信頼できます。   無料教材を手に入れる方法はコ ...

続きを見る

HTMLとCSSの入門方法【現役エンジニアの僕が解説】と書かれた画像
HTMLとCSSの入門方法【現役エンジニアの僕が解説】

  あなた本当に0円なの?急に有料になったりしない?   このように思う方もいると思いますが安心してください。 まったく料金はかかりませんし、無料教材を手にいれたからと言って本コー ...

続きを見る

HTMLとCSSの初心者は何をすべき?【経験をもとに解説】と書かれた画像
HTMLとCSSの初心者は何をすべき?【経験をもとに解説】

 

続きを見る

HTMLとCSSが難しいと感じた時に僕がとった行動と書かれた画像
HTMLとCSSが難しいと感じた時に僕がとった行動

 

続きを見る

HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】と書かれた画像
HTMLとCSSを独学で1カ月勉強してみた結果【超成長した】

  てんし君   この記事を読んでわかること ①HTML・CSSの独学勉強方法 ②HTML・CSSの独学のきつい点 ③HTML・CSSを勉強した後にエンジニアになった僕の話 &nb ...

続きを見る

HTMLとCSSの初心者は模写をしよう【僕もやりました】と書かれた画像
HTMLとCSSの初心者は模写をしよう【僕もやりました】

 

続きを見る

HTMLとCSSの資格はあるの?必要?【現場の声を伝えます】と書かれた画像
HTMLとCSSの資格はあるの?必要?【現場の声を伝えます】

  てんし君実践的なテスト内容が特徴ですね。 実務経験者が腕試しで受けるのはいいかもしれませんが、初心者の方は特にこの試験のために頑張る必要はないかなと思います。 この資格を持ってる方も見た ...

続きを見る

僕がHTMLとCSSのアウトプットに使った方法を紹介【必見】と書かれた画像
僕がHTMLとCSSのアウトプットに使った方法を紹介【必見】

  あなたアウトプットの方法はわかりました。でもインプットのタイミングはどうすればいいのでしょうか?   ここまではHTMLとCSSのアウトプットの方法をメインに解説してきました。 ...

続きを見る

-HTML/CSS

Copyright© エンジニアてんし君ブログ , 2021 All Rights Reserved.