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

1

基本設定画面を開く

Macの場合
  1. Sublime Textを開きます
  2. 上部メニューの「Sublime Text」をクリック
  3. 「Preferences」を選択
  4. 「Settings」をクリック
Windowsの場合
  1. Sublime Textを開く
  2. 「Preferences(基本設定)」を開く
  3. 「Setting(基本設定)」をクリック

 

2

設定画面が開く

2分割されたエディタが開きます。

左側はSublime Textのデフォルトの設定内容となっていて、右側に新たに設定内容を書くことで設定を上書きしていきます。

3
{
  //フォントの種類をmenloに指定
  "font_face": "menlo",
  
  //フォントサイズを14pxに指定
  "font_size": 14,

  //無効化するパッケージの指定
  "ignored_packages":
  ["Vintage"],

  //折り返しを無効化して横スクロールにする
  "word_wrap": false,

  //選択している行のハイライトする
  "highlight_line": true,

  //編集していて未保存のファイルのタブを強調
  "highlight_modified_tabs": true,
}

もしかしたら右側になにか入力されているかもしれませんが「全て削除」して左のコードをコピーして貼り付けてください。

貼り付けができたら保存しましょう。これで基本設定は完了です。

コードを貼り付ける

これらの基本設定をもっと詳しくみたい方はこちらを参考にしてください。「SublimeText 3の基本設定:Qiita

Sublime Textのデザインを変更する

Sublime Textはインストール時の黒い背景のデザインから自由に変更することができます。

colorschemeとtheme

  • サイドバーとタブの領域である「Theme(テーマ)
  • コードを書く領域である「color scheme(カラースキーマ)

の見た目をそれぞれ変更する方法を紹介します。

1

Themeを開く

まずはテーマ(サイドバー)から変更していきましょう。

Macの場合
  1. 上部メニューの「Sublime Text」をクリック
  2. 「Preferences」を選択
  3. 「Theme」をクリック
Windowsの場合
  1. 「Preferences」をクリック
  2. 「Theme(テーマ)」をクリック
2

Themeを選択

サイドバーの色が変わった

選択できるテーマ一覧のパネルが表示されるので、いずれかを選択します。

今回は「A.daptive.sublime – theme」を選択。

選択するとサイドバーのデザインがダークテーマに変更されました。

3

color-schemeを開く

続いてカラースキーマ(コードを書く領域)のデザインを変更していきます。

Macの場合
  1. 上部メニューの「Sublime Text」をクリック
  2. 「Preferences」を選択
  3. 「Color Scheme」をクリック
    Windowsの場合
    1. 「Preferences」をクリック
    2. 「Color Scheme(カラースキーマ)」をクリック
4

colorschemeを選択

選択できるカラースキーマ一覧のパネルが表示されるのでいずれかを選択します。

今回は「Mariana」を選択します。

5

コードを各領域が変わった

コードを書く領域のデザインがガラッと変わりましたね。このように「Preferences」から簡単にデザインを変更することができます。

自分好みのデザインを追加する

実はデフォルトで選択できるカラースキーマやテーマの他に色々なデザインのテーマを追加することができます。

 theme-ayu
 theme-boxy

例えばこんな感じでおしゃれでみやすいデザインのテーマを追加することができます。今回は私が最もおすすめしたい「Flatland」というテーマを追加してみます。

1

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

「Package Control」を開きます。

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

上部の入力欄に

Package Control: Install Package

を貼り付け、候補の「Package Control: Install Package」をクリックします。

3

flatlandをインストール

パネルが切り替わったら「flatland」と入力します。「Theme – Flatland」という候補がでてくるのでクリックしてインストール完了です。

インストールが完了したら「Preferences」から先ほどのカラースキーマとテーマを変更する手順にしたがって「Flatland」のテーマを選択してみましょう。

  • Color Scheme:「Flatland Monokai」を選択
  • Theme:「Flatland Dark.sublime-theme」を選択
 flatlandに変更

オシャレで見やすいデザインに変更できましたね。他のテーマを試してみたいという方はこちらの記事を参考にしてみてください。
Sublime Text3の作業が捗る!オススメの人気テーマ18個まとめ 2016年版

Sublime Textの便利機能を紹介

ここまででインストールと各種設定は完了しているので、あとは自由にコード書く練習をしてもらえばOKですが、せっかくSublime Textを使っているならぜひマスターしてほしい便利な機能とテクニックも紹介します。

編集系の機能

コピーや貼り付け、テキストの移動など編集関連の便利な機能です。

テキストをドラッグ&ドロップで移動

テキストをドラッグ&ドロップで移動

選択 + ドラッグ&ドロップ

選択した箇所をドラッグ&ドロップすることで任意の場所に移動することができます。

行をコピー

行をコピーする

Mac:行を選択 → Command + C

Win:行を選択 → Ctrl + C

任意の行にカーソルを合わせた状態でコピーをすることで行をまるっとコピーできます。

行を移動する

行を移動させる

Mac: Command + Ctrl + C↑or↓

Win: Ctrl + Shift + C↑or↓

選択した行を上下の自由な位置に移動させることができます。

行を複製する

選択した行を複製

Mac:行を選択 → Command + Shift + D

Win:行を選択 → Ctrl + Shift + D

選択した行を複製できるので、繰り返し処理がある時に便利です。

行の結合

行を結合する

Mac:行を選択 → Command + Shift + D

Win:行を選択 → Ctrl + Shift + D

選択した行+下の行を結合します。CSSの記述を一行にまとめる時などに便利。

選択系の機能

特定の箇所を選択したい時に使える機能の紹介です。

複数選択

複数カーソルで選択

Mac:Commandを押しながら選択

Win:Ctrlを押しながら選択

Commad(Ctrl)を押しながらクリックすることで複数箇所を選択することができます。

ドラッグ範囲を選択

ドラッグした箇所を選択する

Mac: ドラッグ + Option

Win: ドラッグ  + Shift

Option(Shift)を押した状態でドラッグするとドラッグした範囲を選択できます。

検索系の機能

文字列の検索やファイルの検索など検索関連の機能の紹介です。

同じテキストを選択

同じ文字列を選択する

Mac:文字を選択 → Command  + D

Win:文字を選択 → Ctrl  + D

コマンドを押すごとに選択した文字列と同じ文字列を選択していきます。

文字列検索

ファイル内の文字列を検索する

Mac: Command + F

Win: Ctrl  + F

コマンドを押すと検索窓が下部に開くのでそこに特定の文字を入れて右側の「Find」でファイル内の同じ文字列を検索することができます。

「Find All」をクリックすることで該当する文字列を全選択できます。

ファイル検索

ファイルを検索して開く

Mac: Command + P

Win: Ctrl  + P

コマンドを押すとファイルの候補が一覧で出てきます。ファイル名を入力して絞り込むことですぐにファイルを開くことができます。

その他の機能

Sublime Textの特徴的なその他の機能を紹介します。

画面分割

画面分割機能

上部メニューの「表示」→「画面分割」から様々なレイアウトの画面分割を選択することができます。
効率的な使用方法の例をあげれば2列のレイアウトにして左にhtmlファイル、右にそのhtmlファイルに対応するcssファイルを開くなどがあります。

ミニマップ

マップ機能

エディタの右側に現在開いているファイルの全体が縮小されて表示されています。このマップをクリックするとメイン画面も連動して動きます。マップが必要ない場合は「表示」→「ミニマップ」で非表示にできます。

今回紹介したもの以外にもショートカットは数多くあります。さらに詳しく知りたい方は「SublimeText ショートカットキー:Qiita」を参考にしてください。

Sublime Text まとめ

今回の記事では

  1. インストール
  2. 基本設定
  3. テーマ変更
  4. 便利な使い方

を紹介しました。ボリュームが多くなってしまったので今回はここまでで一旦終了します。

こちらの記事でぜひ入れておきたいな便利な拡張(パッケージ)のインストール方法や使い方を紹介しているので合わせて読んでみてください。

※Sublime Textは無料ソフトではありません。(すべての機能が無料で使えるので実質無料ですが…)1万円以内で購入できるので気にいったらぜひ買って開発に貢献してあげてください。

この記事を書いた人

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

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

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

  • 【最新版】機能と速さで選ぶならコレ!おすすめブラウザ11選を比較

  • 【HTMLのテクニック】インデントを覚えてコードを綺麗に見せよう

  • すぐわかる!htmlでスペースや空白を入れる正しい方法

  • マークアップの意味とマークアップ言語の種類について

  • 【CSS Peeper】webデザイナーは持ってて当たり前!?なハイパーツール

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

  • 【日本語ガイド】Asanaの使い方のすべて。登録〜タスク管理まで解説

記事をもっと見る +

目次を開く