Webデザイナーやプログラマーに便利なエディタ「Sublime Text 3」

カテゴリ:Web制作,パソコンタグ:

今回は、Web制作に欠かせないエディタの紹介です。
いろんなエディタがありますが、今回はSublime Text 3を紹介してみたいと思います。

この記事の内容

  1. インストールしよう!
  2. Package Controlを追加しよう!
  3. おすすめのパッケージ
  4. 終わりに

インストールしよう!

sublime-text-3_01
Sublime Text 3のダウンロードページからファイルをダウンロードします。
※上部メニューのDownloadボタンや、トップページのDownloadボタンはバージョン2のものなので注意して下さい。

sublime-text-3_02
ファイルのダウンロードが終わったら、ダブルクリックをしてインストーラーを起動します。

sublime-text-3_03
場合によってはこのようなウィンドウが表示されますが、「実行」ボタンをクリックすればOKです。

sublime-text-3_04
インストーラが起動します。「Next」ボタンをクリックします。

sublime-text-3_05
インストール先を指定する画面になります。変更する場合は、「Browse」ボタンをクリックして変更しましょう。
選択が完了したら「Next」ボタンをクリックします。

sublime-text-3_06
次の画面では、右クリックで表示されるコンテキストメニューにSublime Text関連のメニューを追加する場合はチェックを入れます。
選択が完了したら「Next」ボタンをクリックします。

sublime-text-3_07
インストールの最終確認画面です。問題なければ「Install」ボタンをクリックしましょう。

sublime-text-3_08
インストールが完了するとこのような画面になるので、「Finish」ボタンをクリックしましょう。

Package Controlを追加しよう!

後述するおすすめのパッケージ等をインストールする場合もまずは、「Package Control」を導入しないと始まりません。
sublime-text-3_09
Installation – Package Controlにアクセスすると、上記のようなページが表示されます。
画像の枠で囲っている部分の文字列を選択してコピーしましょう。

sublime-text-3_10
次にSublime Textを起動して、「Ctrlキー+`」もしくはメニューの「View」から「Show Console」をクリックしてコンソールを表示します。

sublime-text-3_11
コンソールが表示されたら、先ほどコピーした文字列を貼り付けて「Enterキー」を押します。
これでPackage Controlの導入は完了です。

おすすめのパッケージ

パッケージのインストール方法は全て共通です。
※一部追加で作業を行う必要があるものもありますが説明に書いておきます。特に記述がないものはインストールするだけで動作します。

sublime-text-3_12
上部メニューの「Preferences」から「Package Control」を選択するか「Ctrlキー+Shiftキー+Pキー」を押して、コマンドパレットを開きます。

sublime-text-3_13
一覧の中から、「Package Control: Install Package」を選択します。
もしくは、「install」と入力すればPackage Control: Install Packageだけが残るので、その状態で「Enterキー」を押しても良いです。

sublime-text-3_14
少しすると、パッケージの一覧が表示されます。パッケージ名などで絞り込み可能なので利用しましょう。
パッケージ名をクリックするとインストールされます。

<Japanize>
Sublime Text 3を日本語化します。インストール後表示される手順に従ってファイルのコピーを行う必要があります。
1.「C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanize」にインストールされている*.jpファイルを、「C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Default」にコピーします。※Defaultフォルダがない場合は作成してください。
2.コピーしたファイルをオリジナルのファイル(.jpが付かないファイル)と置き換えます。(念のため、オリジナルのファイルが有る場合は.orgなどを付けて保管しておきましょう。)
Defaultフォルダを作成して何もファイルがない場合単純にファイル名から「.jp」を削ります。
3.「C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\Japanize\Main.sublime-menu(.jpが付かない方)」を、「C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Packages\User」にコピーします。すると、他のプラグインで上書きされてしまっているトップメニューも日本語化されます。

<ConvertToUTF8>
文字コードが「EUC-JP」や「Shift-JIS」等のファイルを開いた時に文字化けしないようにUTF-8にコンバートしてくれます。

<HTML5>
HTML5を自動補完してくれるようになります。

<CSS Snippets>
CSSを自動補完してくれるようになります。

<jQuery>
jQueryを自動補完してくれるようになります。

<Emmet>
Emmet(旧Zen-Coding)を追加します。
NetBeans用に書きましたが、記述方法は変わらないのでHTMLやCSSが格段にコーディングしやすくなるEmmet(旧Zen-Coding)をNetbeansで使用するを参考にしていただければと思います。

<Bracket Highlighter>
対応する括弧(開始タグと終了タグ等)をハイライトしてくれるようになります。

<AutoFileName>
タグでファイル名を入力する時自動補完してくれるようになります。

<SublimeLinter>
HTML、CSS、Javascriptをリアルタイムで構文エラー解析してくれるようになります。

<SublimeCodeIntel>
補完表示を自動で表示するようにします。

<Tag>
HTMLタグの閉じタグを「</」まで打つと自動補完してくれるようになります。

<ColorPicker>
カラーピッカーを追加します。

<AdvancedNewFile>
「Ctrlキー+Altキー+Nキー」でパスを指定して新規ファイルを作成する事が出来るようになります。

終わりに

インストールからおすすめのパッケージまで紹介してきましたが、いかがでしたでしょうか。
エディタを探していた方や、気分転換に変えてみようかなーなんて方は是非試してみて下さいね。
そんなSublime Text 3の紹介でした!

Sublime Text 3

あとでよむ / みんなにシェアする

このエントリーをはてなブックマークに追加
LINEで送る

コメントをする / みる

コメントを残す

コメントはまだありません。

検索する

カテゴリ一覧

タグ一覧

お知らせ アクセス解析 アプリケーション ゲーム サーバー スニペット プラグイン 動画 日記 Laravelパッケージ Laravel3 Laravel4 Tips Webサービス Webデザイン WordPress

最近投稿された記事

つぶやき

【GIGAZINE読者限定早い者勝ち】無料でDropbox・Googleドライブなどのクラウドを自由自在に同期・一括管理できる「まとめてクラウド」が先着5万人48時間だけゲット可能 - GIGAZINE gigazine.net/news/20151010-…

約2年前

離れていてもコミュニケーションが取りやすい便利なサービス「Remotty」 #remotty remotty.net

約2年前

RT @localdisk: メジャーどころがたくさん / 【セキュリティ ニュース】「WPTouch」など多数のWordPressプラグインに脆弱性(1ページ目 / 全1ページ):Security NEXT security-next.com/057930

約2年前

Javascript フレームワーク「Aurelia」aurelia.io

約2年前

dockerで起動済みのコンテナに対して何かしたい時は、docker exec -it コンテナ名 /bin/bashで入って実行したり、docker exec -it コンテナ名 supervisorctl restart nginxみたいな事も出来て便利。

約2年前

サーバー移転完了に伴いサイトの閲覧も可能な状態になりました。移転作業中にご訪問いただいた方には大変ご迷惑をおかけいたしました。今後このようなことがないよう気をつけて参ります。

約2年前

現在当サイトが閲覧出来ない状態となっております。こちらはサーバーの移転作業に遅れが生じているためとなっております。ご利用いただいている方にはご迷惑をおかけいたします。

約2年前

WordPress4.1.1(日本語版)が利用出来るようになりました wp.me/p4RkJY-Dj

約3年前

RT @keito_jp: Twitterをサマーウォーズ的に表示させるやつを製作中。遊んでみてね。 open.moo.jp http://t.co/gIgp5Gh6qW

約3年前

任天堂、YouTubeの広告収入を動画制作者とシェアする「Creators Program」サービス開始 | Game*Spark - 国内・海外ゲーム情報サイト s.gamespark.jp/article/2015/0…

約3年前

↑上へ戻る