テキストエディタ『atom』を使ってみる

テキストエディタ『atom』を使ってみる

数年前にちょこ~っとだけHTMLとCSSの勉強をしました。いやぁ、難しいですね。わけわかめです。

その時はまだXHTMLが主流だったのでそっちを勉強していたんですが、今や時代はHTML5…ですか?合ってる?笑

レスポンシブデザインが当たり前になったりでもう全っ然わかりません!というかその時勉強した事すらもう記憶の遥か彼方です(オイ)

WordPressでブログを始めたので、ちょっとその辺りにもまた興味が出てきました。

ので、なんとなく最近人気のテキストエディターをインストールしてみました。

インストールしたのはAtomというテキストエディターです。『テキストエディター人気』とか『テキストエディターオススメ』で検索するとよく名前が挙がっているこちら。

恋に落ちるエディタ「Sublime Text」と迷いましたが、こっちの方が名前的に好きだったのでこちらにしました(爆)

インストール後の設定が若干面倒だったので念のため覚え書き。

1.さっそくAtomサイトからダウンロード。(https://atom.io/)

2.セットアップファイルを開くと自動的にインストールがスタート。

3.この画面のまましばらく待機。

4.インストールが完了し、開いた!と思ったらいきなりフリーズ…?笑
keep waitingで問題なく先へ進めました。作業途中で固まったらこわいなw

5.この「Atom」。いろいろソフト内にインストールしてどんどん使いやすくしていけるようで、まずは英語がぜんぜん分からないのでパッケージをインストールして日本語化してみます。

「File」→「Settings」→「install」

6.パッケージのインストール検索窓でjapanese-menuと入力、パッケージをクリック。
するとメニューが見慣れた日本語に!!なんて安心感。 

7.テーマでは画面の色とかを変えられるみたいですね。なんだかAtom、ワードプレスみたいで楽しい。

8.さてさて、お次はこれ気になる!と思っていたemmetというパッケージのインストール。
これでhtmlのコードを簡単に入力できるようになります。

9.ファイルからhtmlファイルを新規作成し、試しに「!」と打ってキーボードのtabキーを押すと…

10.…凄い!一文字打っただけでここまで勝手に入力してくれるなんて!
lang=が”en”になってたりはしますがちゃんと色分けもされてて見やすい~。感動です。

11.これで一応使える状態になってめでたしめでたし、と思いましたが、
デスクトップにアイコンが無かったのでPC内を「app-1.25.0」で検索。こんなところにいらっしゃる。

12.ショートカットを作成してデスクトップから開けるようにしました!

前にちょこっとhtmlをいじってた時は「gpad」というテキストエディタを使っていて、それも使いやすくて好きだったんですが、Atomの好評を聞いて使ってみたいと思い、今回インストールしてみました。

以上、今回はテキストエディター「Atom」のインストール&簡単な使い方についてでした☆

web制作カテゴリの最新記事