ここでは、HTMLやCSSを編集するのに便利なテキストエディタ「Atom」の紹介とインストール手順などを説明していきます。
HTMLやCSSを勉強するためにAtomというテキストエディタを導入しようと思っています。
ここではインストール方法とオススメの初期設定を紹介していきますね。
もくじ
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を使うことで、メモ帳にはない予測変換機能や誤字チェック機能などの便利な機能を使うことができます。
高機能なぶん、慣れていないうちは少し画面に戸惑うかもしれませんが、操作方法は限られているので、少しずつ触っていくと良いと思います。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
今回は、以上になります。最後までご覧いただきありがとうございました。
『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室
