ここでは、HTMLやCSSを編集するのに便利なテキストエディタ「Atom」の紹介とインストール手順などを説明していきます。
ここではインストール方法とオススメの初期設定を紹介していきますね。
もくじ
【メルマガ登録はこちら！！】
HTML・CSS・お役立ち情報をGET
Atomとは
Atomとは、HTMLやCSSおよびWeb系のプログラミング言語全般の中身を閲覧したり編集したりするための開発用テキストエディタです。
プログラム開発のためのサービス「GitHub」で開発され、2015年6月リリースされました。
■Atomで開いたHTMLのソースコード画面サンプル
■AtomによるHTMLコード作成の例。一から記述しなくても予測変換してHTMLコードが作成されます。
Atomの他にも、Sublimetext(サブライムテキスト)やBracket(ブラケット)などいくつかのテキストエディタがあります。
今回は、「Atom」のインストール方法とオススメの初期設定を紹介していきます。
Atomのインストールと設定(Mac版)
インストール手順
下記のサイトにアクセスします。
以下、MACの場合の手順です。Windows版はページ下部の方に記述しています。
下記ページよりAtomをダウンロードします。
ダウンロードしたzipファイルを解凍します。
Atom.appを起動します。
Atomエディタを開きます。
ここで、HTMLやCSSなどのコードを記述していきます。
Atomのインストールは以上で完了です。
Atomのおすすめ初期設定
初期設定はやや使いづらいので、ここでは簡単なオススメ初期設定をご紹介します。
まずAtom起動時に表示される不要な画面が出ないように下記の設定をしておきましょう。
■WelCome Guideのチェックを外す
■telemetry consentで「I Dont Want to Help」を選択する
またAtomには便利な追加パッケージがたくさんあります。ここでは、HTMLの文法をチェックする便利なツールを紹介します。
環境設定(Preferences)を開きます。
インストールを選択します。
「linter」と入力して、「packages」を押下します。表示されたツール「linter」をインストールします。
追加で下記のようなダイアログが表示されたら、Yesでインストールしていくとよいでしょう。
次に、「linter-htmlhint」と入力して、「packages」を押下します。表示されたツール「linter-htmlhint」をインストールします。
インストール後、文法エラーがあると該当箇所赤い●が表示されるようになります。
(あくまで、機械的にわかる範囲でのチェックに限られれます。全てのエラーが●で表示されるわけではないのでご注意ください。)
つぎに全角スペースを表示しれくれるプラグイン「show ideographic space」もインストールしておきましょう。
インストール後に全角スペースが下記のようにわかるようになります。
つぎに、エディターの設定もしておきます。再度、環境設定(Preferences)を開きます。
Editorを選択します。
Show Indent GuideとSoft Wrapにチェックを入れます。
(※)上記設定により、インデントで縦線が表示されて、折り返しが有効になります。
以上でAtomのインストールは完了です。
Atomのインストールと設定(Windows版)
下記のサイトにアクセスします。
インストール手順
以下、Windowsの場合の手順です。OSバージョンなどにより若干表記が異なりますので、適選読み替えてすすめていってください。
下記ページよりAtomをダウンロードします。
ダウンロードしたsetup.exeファイルを実行してインストールします。
Atomを起動します。
Atomエディタを開きます。
Atomのおすすめ初期設定
初期設定はやや使いづらいので、ここでは簡単なオススメ初期設定をご紹介します。
まずAtom起動時に表示される不要な画面が出ないように下記の設定をしておきましょう。
■WelCome Guideのチェックを外す
■telemetry consentで「I Dont Want to Help」を選択する
つぎに環境設定(settings)を開きます。
インストールを選択します。
「linter」と入力して、「packages」を押下します。表示されたツール「linter」をインストールします。
追加で下記のようなダイアログが表示されたら、Yesでインストールしていきましょう。
次に、「linter-htmlhint」と入力して、「packages」を押下します。表示されたツール「linter-htmlhint」をインストールします。
インストール後、文法エラーがあると該当箇所赤い●が表示されるようになります。
(あくまで、機械的にわかる範囲でのチェックに限られれます。全てのエラーが●で表示されるわけではないのでご注意ください。)
最後に全角スペースを表示しれくれるプラグイン「show ideographic space」もインストールしておきましょう。
インストール後に全角スペースが下記のようにわかるようになります。
つぎに、エディターの設定もしておきます。再度、環境設定(Preferences)を開きます。
Editorを選択します。
Show Indent GuideとSoft Wrapにチェックを入れます。
(※)上記設定により、インデントで縦線が表示されて、折り返しが有効になります。
以上でAtomのインストールは完了です。
まとめ
今回は、HTMLやCSSを扱う上で便利なツール「Atom(アトム)」について紹介しました。
Atomを使うことで、メモ帳にはない予測変換機能や誤字チェック機能などの便利な機能を使うことができます。
高機能なぶん、慣れていないうちは少し画面に戸惑うかもしれませんが、操作方法は限られているので、少しずつ触っていくと良いと思います。
WordPressやホームページ作成、SEO対策・ウェブ集客に関するウェブストエイトの独自ノウハウを読者限定で配信しています。まずはお気軽にご登録ください。
今回は、以上になります。最後までご覧いただきありがとうございました。
【メルマガ登録はこちら！！】
自分でホームページ制作・Web集客したい個人事業主様向けWebスクール・教室
コメントを残す