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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Mac：command＋Sで保存
• Windows：Ctrl＋Sで保存

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

• Save As：index.html

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

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

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

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

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

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

• style.css
• reset.css

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

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

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