【完全ガイド版】Sublime Textの使い方と設定方法 – MacとWindowsどちらも対応

数あるテキストエディタの中でも特に使いやすい拡張性が高い「Sublime Text」のインストールから日本語化設定、基本設定の方法を丁寧に解説しています。テーマの変更方法や便利な機能の使い方も合わせて習得することができます。

WindowsとMacそれぞれの環境に沿って解説しているのでつまずきません!

それでは「恋に落ちるエディタ」であるSublime Textを使いこなしましょう!

Sublime Textとは?

 sublime textの見た目

Sublime Text(サブライムテキスト)はhtmlやcss、プログラミング言語をコーディングする際に使用するテキストエディタの1つで多くの日本でもwebデザイナーやプログラマが利用しています。過去に「Sublime Text」「Sublime Text2」とバージョンがあり、最新バージョンは「Sublime Text3」となっています。

The text editor you’ll fall in love with(恋に落ちるテキストエディタ)

という公式のキャッチコピーにある通り、一度使用するとその使いやすさから他のテキストエディタに乗り換えようと思わなくなります。

料金 無料(有料版あり)
対応OS Mac / Windows / Linux

Sublime Textを使うメリット

Sublime Textにはたくさんのメリットがあります。

  • インストールした段階では無駄な機能がないので動作が軽い
  • パッケージ(拡張機能)が豊富なので自分なりの使いやすさを追求できる
  • 100%に近い機能を無料で使用できる
  • 豊富なショートカットで作業スピードをアップできる

特に良い点をまとめたのでまだまだ語りつくせないほど「恋に落ちるポイント」はあります。

自身のパソコンに合わせてインストールを

本記事ではMacとWindowsどちらのパソコン環境でもつまずかずにインストールできるように、インストール手順をMacとWindowsで分けて解説しています。見出しに【Mac】や【Windows】と書いてあるのでそれを目印にインストールを進めてください。

インストール手順【Mac】

それでは早速Sublime Textのインストール手順を解説していきます。Sublime Textのインストールはとっても簡単です。パソコンが苦手な方向けになるべく写真を使って解説していくので安心してください。

1

sublimetextのダウンロードページ

Sublime Text3のDownloadページを開きます。

2

ダウンロードのバージョン

続いて赤枠内のOS一覧から自身のパソコンに該当するものを選んでクリックします。

  • macの場合は「OS X」
  • windowsの場合は「Windows」または 「Windows 64bit」

自動的にダウンロードが開始さます。

3

ダウンロードしたdmgを開く

「Downloads(ダウンロードフォルダ)」に「Sublime Text Build.dmg」というファイルがあるのでダブルクリックで開きます。

※もしくは「右クリック」→「開く」を選択

4

アプリケーションへドラッグ&ドロップ

開いた「Sublime Text.app」を「Applications(アプリケーション)」へドラッグ&ドロップします。

ここまででインストールは完了です。

5

Dockに追加

これからよく使うという方はアプリ一覧からドラッグ&ドロップで「Dockに追加」しショートカットを作成しておきましょう。

インストール手順【Windows】

こちらはWindowsでのインストール方法の紹介になります。

1

sublimetextのダウンロードページ

Sublime Text3のDownloadページを開きます。

2

ダウンロードのバージョン

続いて赤枠内のOS一覧から自身のパソコンに該当するものを選んでクリックします。

windowsの場合は「Windows」または 「Windows 64bit」を選択します。

自動的にダウンロードが開始さます。

3

windowsのインストール画面01

ダウンロードしたインストーラーファイルを開きます。左のような画面が開くので「Next」で進みます。

4

windowsのインストール画面02

windowsのインストール画面03

Sublime Text関連のファイルをどこに保存するかの選択ができますが、基本的に「Next」でOKです。

※デフォルトでは「Program Files」に入ります。

次の画面で「Add to exploer menu」にチェックをつけて「Next」を押します。

チェックを打つことで「右クリックのメニュー」にSublime Textを追加できます。

5

windowsのインストール画面04

windowsのインストール画面05

「Install」を押すとインストールが開始されます。

完了したら「Finish」でインストール完了です。

Package Controlのインストール

Sublime Textには豊富な拡張機能(パッケージ)が用意されていると説明しましたが、それらをSublime Textに取り込むためには「Package Control(パッケージコントロール)」というプログラムをインストールする必要があります。

各パッケージはこのパッケージコントロールを通してインストールしたり、アンインストールしたりします。

MacとWindowsどちらも同じ手順ですので、こちらを読んで進めましょう。

1

PackageControlのインストール

Package Controlのインストールページを開き、「SUBLIME TEXT3」のタブのコードを全てコピーします。

 

2

コンソールを開く

白いボックスが現れる

Sublime Textを起動したら

  1. 上部メニューの「View」を開く
  2. 「Show Console」をクリックする

するとエディタの下に白い入力ボックスが現れます。

画像のように白いボックスと文字が現れないときは「Sublime Text」を再起動して再び「Show Console」をしましょう。
3

コードを貼り付ける

白いボックスの下部の入力欄に先ほどコピーしたコードを貼り付けます。

貼り付けたら「Enterキー」を押しましょう。Package   Controlのインストールが開始されます。

4

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

インストールが成功しているかを確認します。

Macでの確認方法

  1. 上部メニューの「Sublime Text」を開く(Windowsの場合「Preferences」)
  2. 「Preferences」を開く
  3. 「Package Control」があればOK

ここまででインストールは無事完了です。拡張機能(パッケージ)のインストール方法は後述します。

メニューを日本語化する【Mac】

Sublime Textのメニュー項目はインストール時点ではすべて英語ですが、簡単な英単語ばかりですし調べれば意味は推測できるのでそこまで不便ではありません。とはいえ、中には「本当に英語が苦手」という人もいるので、そういう方はこのステップでメニューを日本語化をしておきましょう。

Windowsを使っている方
ここからスキップしてください

1

パッケージコントロールを開く

先ほどインストールした「Package Control」を開きます。パッケージコントロールを開くショートカットを使って開いてみましょう。

  • Windows:Ctrl + Shif + P
  • Mac:Command + Shif + P

成功すると左の画像のようになります。

2

パッケージインストール パッケージ一覧の画面に切り替わる

上部の入力欄に

Package Control: Install Package

をコピーして貼り付けると候補に「Package Control: Install Package」がでてくるのでクリックします。

少し時間を置いてパネルがパッケージ一覧に切り替わります。

3

japanize

japanizeの手順

切り替わったパネルの入力欄に

Japanize

と入力し、候補にでてきた「Japanize」をクリックします。

クリックすると自動でインストールされ、左の画像のように「日本語化の手順」が表示されます。

後はこの手順に沿っていくだけですが、こちらで続けて解説していきます。

4

finderを開いてフォルダへ移動を選択

  1. Finderを開きます。
  2. 上部メニューの「移動」を選択
  3. 「フォルダへ移動」をクリック
5

家のアイコンの文字がユーザー名

packageに移動する

開いた入力欄に以下を貼り付けます。

/Users/ユーザー名/Library/Application Support/Sublime Text 3/Packages/

「ユーザー名」はパソコンごとに違うので書き換えて貼り付けましょう。

Finder家のアイコンの文字がユーザー名です。左の画像では「webliker」がユーザー名になります。

貼り付けたら「移動」をクリックすると、「Packagesフォルダ」へ移動します。

6

新規フォルダの作成

名前はDefaultに

  1. 「Packages」の中で右クリック
  2. 「新規フォルダ」をクリック
  3. フォルダ名は「Default」にします
7

拡張子が.jpのファイルを複数選択

次に「Japanize」の中にある「〇〇.jp」となっているファイルをcommand+選択で複数選択してコピーします。

8

「Default」の中にコピーした「〇〇.jp」のファイルをすべて貼り付けたら

  1. すべてのファイルを選択して「右クリック」
  2. 「〇〇項目の名前の変更」をクリック

※Defaultフォルダの中でcommand+Aでファイルを全選択できます

9

ファイルの文字を置換する

ファイル名の.jpがなくなる

パネルが開くので

  1. 「テキストを置き換える」を選択
  2. 「検索文字列」に「.jp」を入力
  3. 「置換文字列」を「空白」にする
  4. 「名前を変更」をクリック

成功すると全てのファイル名から「.jp」がなくなった状態になります。

10

Main.sublime-menuをコピー

Main.sublime-menuを貼り付け

Main.sublime-menu」をコピーして「User」フォルダの中に貼り付けます。

  • コピー:command + C
  • 貼り付け:command + V
11

一部は英語になっている

Sublime Textを再起動するとメニューが日本語に変わっています。これで日本語対応は完了です。

ただ、一部のメニューは英語のままなのでわからない部分は都度調べる必要があります。

メニューを日本語化する【Windows】

windowsでの日本語対応の手順を解説します。

1

パッケージコントロールを開く

先ほどインストールした「Package Control」を開きます。パッケージコントロールを開くショートカットを使って開いてみましょう。

  • Windows:Ctrl + Shif + P

成功すると左の画像のようになります。

2

パッケージインストール

パッケージ一覧の画面に切り替わる

上部の入力欄に

Package Control: Install Package

をコピーして貼り付けると候補に「Package Control: Install Package」がでてくるのでクリックします。

少し時間を置いてパネルがパッケージ一覧に切り替わります。

3

japanize

japanizeの手順

切り替わったパネルの入力欄に

Japanize

と入力し、候補にでてきた「Japanize」をクリックします。クリックすると自動でインストールされ、左の画像のように「日本語化の手順」が表示されます。

後はこの手順に沿っていくだけですが、こちらで続けて解説していきます。

4

Browspackageを開く

Japanizeが保存されているフォルダを開きます。

Sbulime Textを起動したら

  1. 上部メニューの「基本設定」
  2. 「Browse Packages」をクリック
  3. エクスプローラーが開くので「Japanizeフォルダ」を開く

※もしフォルダがなかったら下の「非表示フォルダーの表示設定をする」を確認してください。

4

非表示フォルダーの表示設定をする

設定をして行く前にフォルダーを編集可能な状態にします。

  1. 「設定」を開く
  2. 検索窓に「エクスプローラー」と入力
  3. 「エクスプローラーのオプションを開く」
  4. 「隠しファイルを表示する」をチェック

これで非表示フォルダーが表示されるようになります。

5

拡張子.jpのついたファイルをコピー

Japanizeフォルダの中にある「〇〇.jp」という名前のファイルを全てコピーしましょう。

6

Defaultフォルダの作成

続いて「Packagesフォルダ」の中に

  1. 右クリック→新規フォルダ
  2. 「Default(スペルミスに注意)」作成
7

拡張子.jpを貼り付け

作成した「Defaultフォルダ」の中に先ほどコピーした

「〇〇.jp」のファイルを貼り付けます。

8

このステップで「Windowsでの日本語化」は完了です!

コピーしたファイルの名前を変更します。

  1. 右クリック「名前の変更」
  2. ファイル名の「.jp」を削除

これをコピーしたすべてのファイルで行います。例えば以下のように変更します。

「Main.sublime-menu.jp」→「Main.sublime-menu」

※変更する際に左のようなアラートがでますが「はい(Y)」でOKです。

インストール後の基本設定

ダウンロードとPackage Controlのインストールが済んだら今後の作業をしやすくするための基本的な設定を済ませておきましょう。
続き:インストール設定とデザインの変更方法

この記事を書いた人

web関連の勉強をしているみんなのために「とにかくわかりやすい記事」にこだわってwebスキルの情報を発信しています。フリーランスでデザイン・コーディング・webマーケティング(SEO)とweb全般のお仕事をしています。

この記事を読んだ人におすすめ

  • 入れ子構造をイラストを使ってわかりやすく説明!

  • 【初心者向け】HTMLでリスト作成|ul・ol ・liタグの使い方

  • 【テンプレコード付き】HTMLのheadとは?どんなことを書くのがベスト?

  • HTMLの説明リストタグ【dl・dt・dd】の使い方を徹底解説

  • 【HTML入門】パンくずリストとは?最適な作り方とSEOとの関係性

  • webサイトのフォルダ構造(ディレクトリ)やファイルはどうなっている?

  • HTMLのtableでテーブルを作る方法と応用テクニックを解説

  • HTMLとCSSの文法チェックツール7選!よくある文法エラーも紹介

記事をもっと見る +

目次を開く