ikidishiki
WEB制作

【簡単】Sublime Textのダウンロード方法【Mac・Windows対応】

2019年12月27日

Sublime Textのダウンロードを知りたいな。手順通りに教えて欲しい。

サイト制作をする際に便利なテキストエディタ「Sublime Text」のダウンロード方法と基本的な使い方を解説していきます。

画像付きで説明していきますので、手順に沿って進めていきましょう。

ちなみにこの記事のSublime Textのバージョンは「Sublime Text3」です。

Sublime Textのダウンロード方法

まずは、Sublime Textの公式サイトを開いてください

すると下記のような画面が出ると思います。

Sublime Textダウンロード

ここからは、2パターンあるので下記をご覧ください。

赤枠のボタンがある方は下記の手順
  • 赤枠と同じようなものが出ている方はそのままクリック
  • するとダウンロードが開始されます
  • ダウンロードできたら、「Macの方はこちら」・「Windowsの方はこちら」の手順を参考にしてください。
赤枠のボタンが無い方

無い方はこのまま手順を解説していきますので、読み進めてください。

ダウンロードの手順

SublimeTextの公式サイトを開いてください。

Sublime TextをDownload

公式サイトを開いたら、右上のDownloadを押してください。

Sublime Textのダウンロードの種類

するとこの画面になるので、ダウンロードしましょう。

どれをダウンロードすればいいかわからない方へ

下記の選び方を見るをご覧ください。


  • OS X:Macの専用
  • Windows:32bitのWindows専用
  • Windows 64 bit:64bitのWindows専用
  • Linux repos:気にしなくていいです

Windowsが2つに分かれてますね。ここでは32bitや64bitと分けてますが、使っているパソコンでその内容が違ってきます。

自分のパソコンが何bitなのか知る方法は下記の記事が参考になるので、確認しておきましょう。確認は30秒で終わります。

ここからは「Mac」の手順

Sublime Textのドラッグアンドドロップ

[Sublime Text]を[Applicationsフォルダ]へドラッグアンドドロップします。

MacのFinder

Sublime Textを開きましょう。commandNを押すとFinderが開きます。左側にある「アプリケーション」をクリック。

MacのFinder2

アプリケーションの中から[Sublime Text]を開きましょう。

SublimeTextの画面

この画面が開いたら完了です。

ここからは「Windows」の手順

Sublime Text-Windows

この画面では、「ファルダの場所」を設定できます。特に指定がない方はこのままでOKです。

Sublime Text-Windows2

[Add to explorer context menu]にチェックを入れてNEXTをクリック。

Sublime Text-Windows3

「これでいい?」と聞いてくるので、Installをクリック。

Sublime Text-Windows4

これで終わりです。Finishをクリックしましょう。

WindowsでSublime Textを開く

下のバーのスタートボタンを開き、検索フォームに「Sublime」と入力すると出てきますのでクリック。

SublimeTextの画面

クリックしてこの画面がでてきたら完了です。

Sublime Textを日本語化する

Sublime Textを日本語化する

おそらく現在のSublime Textはデフォルトで英語になっていると思います。

ちなみに私は英語のままですが、正直不便と感じだことはありません。

ですが、やっぱり日本語の方がいい…という方もいるでしょう。

そんな方のために日本語対応をできる方法がありますので、詳しく知りたい方は下記の記事を参考にしてください。

Sublime TextでWEB制作するための準備をする

Sublime TextでWEB制作するための準備をする

ここからは何か制作をしたい方向けです。

例として、WEB制作をしたい方向けに手順を解説していきます。

フォルダの階層

ちなみにこの形を作っていきます。なんのこっちゃという方でも手順を追って解説していますので、チャレンジしてみてください。

htmlファイルを用意する手順

フォルダの階層-html

ここからは「html」の設定を行なっていきます。

まず、フォルダを用意しましょう。

Sublime Textの新規フォルダ

新規フォルダを選択し、新しいフォルダを作りましょう。

Sublime Textにドラッグ&ドロップ

フォルダ名を[sample-page]にしました。このフォルダをSublime Textにドラッグ&ドロップで持っていきます。

Sublime Textにフォルダが入った

すると赤枠のところに[sample-page]が入っているはずです。

Sublime Textの上で右クリック

[sample-page]の上で右クリックをし、New Fileをクリック。

Sublime Textのuntitled

すると[untitled]が出てきたはず。次にこれを保存します。

  • Mac:commandSで保存
  • Windows:CtrlSで保存

Sublime Textのindex.html

保存をしようとすると、「フォルダの名前とフォルダの置く場所はどうする?」と聞いてくるので画像の通りにしましょう。
変更は名前を下記に変えるだけOK。

  • Save As:index.html

これでhtmlファイルは完了です。次は「css・images」の手順を解説していきます。

css・imagesを用意する手順

フォルダの階層-css

ここからは「CSS」と「images」について解説していきます。

基本的にhtmlファイルを用意する手順と変わらないのですが、1つだけ違うので解説していきます。

Sublime TextのFloder

[sample-page]の上で右クリック。先ほどは[New File]を開きましたが、今回は[New Folder]を選択します。

Sublime Textの下

すると[ファイル]とは違い、下の方に「フォルダの名前を入力して」と出てきます。名前は決まりはないのでなんでもいいのですが、わかりやすいように下記を参考にしてください。

  • cssのフォルダ名:「css」
  • 画像を入れるフォルダ名:「img・image・images」

Sublime Textのcssとimages

同じ要領でcssimagesというフォルダを作りました。

Sublime Textのcss

ここからは先ほど[index.html]を設定した時と手順は一緒です。
[css]の上で右クリック→[New File]を選択し、名前を[style.css]にします。
同じ要領で下記の2つを[cssフォルダ]に用意しましょう。

  • style.css
  • reset.css

Sublime Text完了

画像の通りにファイル・ファルダともに表示されてたら終了です。

Sublime Textが反映されている

先ほど作ったフォルダを見てみると反映されていますか?
もしされていなかったら、「フォルダが違う」or「ちゃんと保存できていない」かもしれませんので、もう一度試してみましょう。

反映されていたら準備完了です。お疲れ様でした。


次の記事

よく読まれている記事
RELATED