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カ月勉強してみた結果【超成長した】

 

 

プログラミングスクールに関する情報

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

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきまし ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。 1位:テックキャンプ  【転職成功率 ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   エンジニアを目指すにあたってまず最初に自社開発企業への転職を希望する方がほとんどです。 ...

続きを見る

プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】と書かれた画像
プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】

  あなたプログラミングスクールに通いたいけどどのスクールも何十万もして通えません。コスパよくエンジニアになれるスクールはありますか?   今回はコスパが良いどころか完全に無料でプ ...

続きを見る

-HTML/CSS

© 2021 エンジニアてんし君ブログ