【 HTML CSS 入門 】Atom エディタ のインストール手順


開発エディタ Atom エディタ のインストール・設定手順
 

ここでは、HTMLやCSSを編集するのに便利なツール「 Atom エディタ」の紹介とインストール手順などを説明していきます。
 

HTML入門 基本構造 ソース
 
 

もくじ

  1. 1. Atomとは
  2. 2. Atomのインストール
  3. 3. まとめ

 

1. Atomとは

Atom エディタ とは、htmlやcssファイルの中身を閲覧したり、編集したりするためのソフトです。
 

HTML入門 基本構造 ソース
 

基本的にメモ帳などと同じテキストを開くためのツールなのですが、メモ帳にはない予測変換機能や誤字チェック機能など、多くの機能が盛り込まれています。
 

このようなツールを開発エディタと呼んだりします。Atomの他にも、Sublimetext、Bracket、などいくつかの種類があります。
 

今回は、Githubが提供している「Atomエディタ」を設定していきます。
 
 

2. Atomのインストールと設定

 

2-1. 設定手順(Mac)

下記のサイトにアクセスします。
Atom
 

以下、MACの場合の手順です。Windows版はページ下部の方にベット記述しています。

下記ページよりAtomをダウンロードします。
開発エディタ Atom トップページ
 

ダウンロードしたzipファイルを解凍します。 Atom
開発エディタ Atom zipファイル

Atom.appを起動します。 Atom
開発エディタ Atom 起動
 

Atomエディタを開きます。
開発エディタ Atom 開く
 

(余裕がある人向け)補足

Atomには便利な追加パッケージがたくさんあります。ここでは、HTMLの文法をチェックする便利なツールを紹介します。
 

環境設定(Preferences)を開きます。
開発エディタ Atom 環境設定
 

インストールを選択します。
開発エディタ Atom 環境設定>インストール
 

「linter」と入力して、「packages」を押下します。表示されたツール「linter」をインストールします。
開発エディタ Atom linter
 

次に、「linter-htmlhint」と入力して、「packages」を押下します。表示されたツール「linter-htmlhint」をインストールします。
開発エディタ Atom linterhtml
 

以上でAtomのインストールは完了です。
 
 

 

2-1. 設定手順(Windows)

下記のサイトにアクセスします。
Atom
 

以下、Windowsの場合の手順です。OSバージョンなどにより若干表記が異なりますので、適選読み替えてすすめていってください。
 

下記ページよりAtomをダウンロードします。
開発エディタ Atom トップページ Windows版
 

ダウンロードしたsetup.exeファイルを実行してインストールします。
開発エディタ Atom Setup.exe

Atomを起動します。

 

Atomエディタを開きます。
開発エディタ Atom エディター
 
 

(余裕がある人向け)補足

Atomには便利な追加パッケージがたくさんあります。ここでは、HTMLの文法をチェックする便利なツールを紹介します。
 

環境設定(settings)を開きます。
開発エディタ Atom 環境設定 
 

インストールを選択します。
開発エディタ Atom 環境設定  インストール 
 

「linter」と入力して、「packages」を押下します。表示されたツール「linter」をインストールします。
開発エディタ Atom linter インストール 
 

追加で下記のようなダイアログが表示されたら、Yesでインストールするとよいでしょう。
開発エディタ Atom linter
 

次に、「linter-htmlhint」と入力して、「packages」を押下します。表示されたツール「linter-htmlhint」をインストールします。
開発エディタ Atom linter-htmlhint インストール 
 

以上でAtomのインストールは完了です。
 
 

3. まとめ

今回は、HTMLやCSSを扱う上で便利なツール「Atom(アトム)」について紹介しました。
 

Atomを使うことで、メモ帳にはない予測変換機能や誤字チェック機能などの便利な機能を使うことができます。
 

高機能なぶん、慣れていないうちは少し画面に戸惑うかもしれませんが、操作方法は限られているので、少しずつ触っていくと良いと思います。
 

今回は、以上になります。最後までご覧いただきありがとうございました。

こちらの記事もおすすめです


mail無料メルマガ

メルマガを受け取る女性

読者限定の情報やイベント情報を先行配信

読者限定のお得なモニター価格情報やHP作成・運用や独立・副業を考えている人向けにイベントの先行配信しています!登録・解除は自由です!ぜひご登録ください!