【今すぐ使える】おすすめのテキストエディタとインストール方法 | サイバーブリッジ株式会社
  1. HOME
  2. メディア
  3. Web制作
  4. 【今すぐ使える】おすすめのテキストエディタとインストール方法
Web制作 2019.10.21

【今すぐ使える】おすすめのテキストエディタとインストール方法

  • おすすめ
  • エディタ
  • ツール

こんにちは。サイバーブリッジのリクです。

今回は、web制作の際に必要なテキストエディタの紹介と、インストール方法を画像を交えてご説明します!

テキストエディタは機能や特徴が様々で、無料・有料合わせるとかなりの数があるので、web制作初心者さんだとインストール前から「結局どれがいいのかわからない!」となってしまうと思います。

なので、実際に私がweb制作を始めた頃に使ってみて「使いやすいな」と思ったものをご紹介します♪

Sublime Text (無料)

恋に落ちるテキストエディタ」として有名なSublime Textサブライム テキスト
オーストラリアのJon Skinnerによって開発され、動作の軽さ、拡張性の高さで世界中のweb制作者が愛用。

2013年にリリースされたバージョン3(SublimeText 3)以降は、web制作の現場だけでなく、多くのエンジニアに愛用されるようになり、現在もなお絶大な支持を得ています。

 Sublime Textの特徴 

  • とにかく軽い!
  • プラグインが多く拡張性の高さはピカイチ!
  • 豊富なショートカットで作業スピードをアップできる
  • 無料なのに有料並みの優秀さ
  • MacOS / Windows / Linux に対応
  • 自動保存してくれる
  • 日本語化対応

Sublime Textのインストール方法

SublimeTextは公式サイトからダウンロードすることができます。

対象となるプラットフォームはMacOS、Windows、Linuxですが、今回はMacを使ってのインストール方法をご紹介します。
※基本的な手順はWindowsも同じです!

1.ファイルをダウンロード

こちらの公式サイトにアクセスして、「Download」ボタンをクリックします。

対象のOSを選択し、クリックするとdmgファイルのダウンロードが始まります。
今回はMacを使ってのインストールなので、OS Xを選びます。

2.dmgファイルを展開

ダウンロードしたdmgファイルをダブルクリックして展開しましょう。

3.Sublime Textを実行

ダブルクリックして展開すると⬇︎のような画面が表示されるので、「SublimeText.app」をドラッグアンドドロップで「Applications」にコピーします。

コピーが完了したら、アプリケーションフォルダから「SublimeText.app」クリックして実行します。

その際⬇︎ようなウィンドウが出てくることがありますが、「開く」をクリックでOKです。

英語の文章が出てきますが、閉じてしまって大丈夫です。

これでインストールの完了です。
Sublime TextのアイコンをドラッグアンドドロップでDockに追加するなどしてお使いください。

4.PackageControllをインストール

せっかくなので、HTMLのコードをハイライトしてくれるパッケージや入力補助をしてくれるパッケージなどを簡単にSublime Textに機能を追加することができるPackageControllをついでにインストールしましょう。

まずは、こちらのSublime Text 3 PackageControllにアクセスして、スクリプトをコピーします。

5.Show Consoleに貼り付ける

Sublime Textを起動し、上部メニューの「View」を開き「Show Console」をクリックします。

するとエディタの下に白い入力ボックスが現れます。
※画像のように白いボックス文字が現れないときは「Sublime Text」を再起動して再び「Show Console」をしましょう。

白いボックスの下にある入力欄に、先ほどコピーしたコードを貼り付けます。
貼り付けたら「Enterキー」を押しましょう。Package Controlのインストールが開始されます。

6.インストールが成功しているか確認

上部メニューの「Sublime Text」を開き「Preferences」の中に「Package Control」があればOKです。

これでインストールは無事完了です。
拡張機能(パッケージ)のインストール方法は後日改めてご紹介しますね!

Atom (無料)

Atomアトムはソフトウェア開発のためのウェブサービス「GitHub」で開発され、2015年6月に正式バージョン1.0.0がリリースされたばかりの比較的新しいオープンソースのテキストエディタです。

多くのプログラミング言語にも対応しており、Sublime Texに並び多くのweb制作者やエンジニアに愛用されている人気のエディタです。

 Atomの特徴 

  • デフォルトで様々な言語のシンタックスハイライトに対応
  • GitHubとの連携が可能
  • 拡張性が高くパッケージの数は数千!
  • オープンソースのテキストエディタなので今後の機能拡大が期待できる
  • MacOS / Windows / Linux に対応
  • 日本語対応

Atomのインストール方法

Atomは公式サイトからダウンロードすることができます。

インストールの手順は「Sublime Text」とほとんど変わりませんが、同じように画像付きで紹介します!

1.ファイルのダウンロード

こちらの公式サイトにアクセスして、「Download」ボタンをクリックします。

2.zipファイルを解凍

ダウンロードしたzipファイルをダブルクリックで解凍しましょう。

3.Atomを実行

Atom.app」をドラッグアンドドロップで「アプリケーション」にコピーします。

コピーが完了したら、アプリケーションのフォルダからクリックして実行します。

その際⬇︎ようなウィンドウが出てくることがありますが、「開く」をクリックでOKです。

これでインストールの完了です。
AtomのアイコンをドラッグアンドドロップでDockに追加するなどしてお使いください。

日本語対応方法や拡張機能(パッケージ)のインストール方法は後日改めてご紹介しますね!

この記事を書いた人

Web事業部
久保田 里佳子

1992年生まれ。2児の母。入社後、営業を経て独学でhtml/css・Webデザイン・マーケティングを学び、現在はWeb関連全般に携わっています。趣味はお酒・ゲーム・漫画・アニメとかなりのインドアですが、たまにゴルフもやります。特技は超高速クッキング(見た目より味重視)。全てのお客様が笑顔になる仕事を心がけてます。

この記事をSNSでシェアする