Atomテキストエディタ初期設定・操作方法・使い方のまとめ【初心者編】

Atomテキストエディタをインストールしたけど何からはじめたらいいの? ホームページを作成するhtml・cssテキストエディタとしてAtomがいいよって聞いたからインストールしたのにどこから操作したらいいのか使い方がわからない……と困っていませんか?私がそうでした……ということで初心者さんがAtomテキストエディタをダウンロードしてからの流れ(インストール・初期設定・基本的な使い方)をまとめました。これだけやっておけば、とりあえずは大丈夫というものを厳選してしてあります。最初は大変かと思いますが、ブックマークなどをして毎日少しずつやってくださいネ。終わった頃には、必ずAtomテキストエディタをちゃんと使えるようになっていますから。

インストール

まだAtomテキストエディタをインストールしていない人は、こちらからお願いします。同時にAtomを日本語環境で使用するための設定も説明しています。

超初心者におすすめのhtml・cssテキストエディタAtomをインストールする方法
Atomってすごい便利!divタグの閉じ忘れもすぐわかるし、スペルミスしそうなcssプロパティの入力候補を表示してくれるのでホームページ作成がすごく楽♪と紹介した友達のリンゴさんも大絶賛してくれているAtomテキストエディタ。やはり、超初心...

初期の設定4選

Atomをインストールしたままでは、少し使いずらいので初期設定をしましょう。これだけやっておけば大丈夫な4つの設定を厳選しています。

Atomテキストエディタで「行の折り返し」をするには、ソフトラップと右端ガイドの設定が必要
Atomテキストエディタをインストールした初期設定のままだと、「行の折り返し位置」に関連する設定がされていません。適切な「行の折り返し」にするには、以下の3つの項目を設定する必要があります。 ソフトラップ 右端ガイドの位置でソフトラップ...
Atomテキストエディタで行番号を表示する方法
Atomテキストエディタで今まで行番号が表示されていたのに消えてしまった。再び表示するにはどうしたらいいの……と困っている人はいませんか? 本来Atomテキストエディタのインストール直後は、「行番号を表示する」設定になっています。しか...
Atomテキストエディタで TABスペース・半角スペース・改行 を見えるように設定する方法
AtomテキストエディタでTABスペース・半角スペース・改行の編集記号(=制御文字)が入力されているのかわからない、見えるようにする方法はないの?と思いませんか? Atomテキストエディタはインストールした初期状態だと「TAB・ス...
Atomテキストエディタで全角スペース文字の編集記号を表示する設定方法
Atomテキストエディタで全角・半角スペース文字の編集記号を表示したいけど、どうしたらいいの? 実は、半角スペースの編集記号を表示する設定は簡単にできるのですが、全角スペースの編集記号を表示する設定についてはパッケージ(=補助プロ...

必ずインストールしておきたいおすすめパッケージ7選

Atomをより便利に使用するためには「パッケージとよばれる補助プログラム」をインストールする必要があります。そのうち初心者がAtomテキストエディタを快適に使用するためのパッケージを厳選し、「各パッケージのインストールおよび使用方法」を説明しています。一度に全てを覚えるのは大変ですので、ブックマークをしておいて、毎日少しずつやってみてくださいネ。

基本的な操作方法・使い方の5選

Atomでホームページを作成する上で必要になる基本的な操作方法・使い方を5つまとめました。ここに書いてあることができればAtomの操作でとりあえず迷わなくなります。

Atomテキストエディタのプロジェクトフォルダってそもそも何?
Atomテキストエディタのプロジェクトフォルダってそもそも何? 最初にAtomテキストエディタを操作した時にそう思ったのですが、あなたもそう思いませんでしたか? ホームページを作成していく上で、知っておいて損はありませんので今日はそのことに...
Atomテキストエディタでhtml・cssファイルを「新規作成→文字コード設定→改行コード設定→ファイル種類設定→保存する」操作方法のまとめ
今日はAtomテキストエディタでhtml・cssファイルを新規作成してから保存するまでの操作方法の流れを説明しますね。 ちょっと長くなりますが、必ずできるようになりますのでゆっくりやって下さいネ。ということで今日のページの目次はこ...
Atomテキストエディタでhtml・cssファイルを削除する方法
Atomテキストエディタでhtml・cssファイルを削除する方法をお伝えしますね。といっても方法は簡単で、ツリービュー上で削除したいファイルを選択して、「右クリックして表示されるコンテキストメニュー(=ちいさなメニュー)で 削除 を選択する...
Atomテキストエディタでhtml・cssファイルを、コピー→貼り付け→名前を変更するなど、複製する3つの方法
Atomテキストエディタでhtml・cssファイルを、コピー→貼り付け→名前を変更するなど、複製する3つの方法をお伝えしますね。これはたとえば共通のヘッダー・フッター・共通部分などを記述したhtmlファイルなどを複製していくなど、効率的にh...
Atomテキストエディタで上下・左右に画面分割してファイルを並べて表示する方法
Atomテキストエディタで上下・左右に画面分割してファイルを並べて表示するにはどうすればいいの? ホームページを作成する時にhtml・cssファイルを同時に見ながら編集できると作業効率もあがって便利ですよね。以前の記事でご紹介した「html...

まとめ

今日は、Atomテキストエディタの「インストール・初期設定」「ホームページ作成時に便利なパッケージのインストール・使い方」「Atomの基本的な操作方法」についてまとめました。何ごともそうですがやはり最初が一番大変ですよね(わたしもそうでした……)。ブックマークをするなどして毎日少しずつやってみて下さいネ。終わった頃には、必ずAtomテキストエディタをちゃんと使えるようになっていますから。

コメント

  1. shun より:

    お世話になります。 shunと申します。

    かなり初歩的は質問をしたいのですがよろしいでしょうか?

    最近winからmacに変えてatomを使い始めたのですが

    atomでhtmlではなく普通の文章を書いている時
    URLを記載してもリンクに飛べないのですがどうすればいいのでしょうか?

    以前winのテラパッドを使用してました。

    テラパッドで書いたファイルをatomで開くと
    URLの文字色が変わっていて、シフト+コントロール+Oで
    開くことが可能です。

    ですがatomでURLを書くと文字色も変わらず開ません。

    教えて頂けると嬉しいです。

    よろしくお願いいたします。

    • 管理人 より:

      shunさま

      いつもありがとうございます。またコメントありがとうございます。お手伝いさせていただきたいと思いますのでよろしくお願いいたします。

      管理人はWindowsしか持っておらず、macはもっていないので、検証ができず断定できないので申し訳ないのですが……試しにやっていただきたいことがあります。手順は以下のとおりです。

      手順1. atomでURLを記述して、ファイルを保存する。その時ファイル名の拡張子に「.txt」をつける。

      手順2. 「URLの文字色が変わっているか?」「シフト+コントロール+Oで開くことが可能か?」を確認する。

      ちなみに管理人のWindowsでも、ファイル名の拡張子をtxtにして、ファイルを保存してからでないと「シフト+コントロール+O(=link:open)」できません。

      さらにこれは管理人のWindows8.1マシンだけの問題かもしれませが……URLの文字色が変わりません(どこか設定をいじってしまったのかも……)。Windows7は文字色が変わっています。
      2017/4/17追記 メニューバーの[ファイル]→[環境設定]→[Themes]→[シンタックステーマ]で、Atom DarkまたはAtom Lightを選んでいるとリンクの色が変わりません。

      一緒に検証してもらう形になってしまい申し訳ありませんが、よろしくお願いします。

  2. shun より:

    お世話になっております。shunです。

    管理人様のおっしゃる通りに拡張子を.txtに変更して保存したら

    シフト+コントロール+O

    で色も変わりクリックできるようになりました^^
    助かりました。

    ちなみにmacのosはsierraです。

    初歩的な質問にお答えいただいてありがとうございます。

    また何かありましたらよろしくお願いいたします。

    • 管理人 より:

      shunさま

      お世話になっております。管理人です。

      お役に立てて、よかったです(^^♪

      また何かありましたら、遠慮なくコメント下さいね。

タイトルとURLをコピーしました