TechAcademy（テックアカデミー） プログラミング今日から使える！Sublime Textの使い方【初心者向け】
プログラミング

今日から使える！Sublime Textの使い方【初心者向け】

テキストエディタの【Sublime Text（サブライムテキスト）】の使い方を初心者向けに解説した記事です。インストール方法から、プラグインのインストール方法、ショートカットキーの設定方法までこの記事だけで基礎がわかります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

プログラミングに使えるテキストエディタはいくつかありますが、その中でも今回はSublime Text（サブライムテキスト）の使い方を初心者向けにご紹介します。Sublime TextはWindowsでもMacでも使うことが可能です。

Sublime Textのインストール方法からプラグインのインストールまであるので、基礎を覚えて使ってみてください。

 

また、日本語化に対応する場合は、パッケージを導入する必要があります。ただし、利用方法など英語メニューのまま解説されていることも多いので、英語メニューのまま使うことをおすすめします。

 

なお本記事は、オンラインのプログラミングスクールTechAcademyの内容をもとに紹介しています。

 

目次

本記事は下記の流れでご紹介します。

 

 

Sublime Textの特徴

まずは、Sublime Textの特徴を知っておきましょう。

基本とのなる特徴として3つ紹介します。

  • Mac版、Win版があり、ライセンス購入は1つでOK。さらに設定ファイルをDropboxなどで同期すれば一から環境設定をする必要がない
  • プラグインが豊富
  • 動作が軽い割にエディタとしてはほぼ完璧に近い機能を持つ

プラグインを使える拡張性があるのは嬉しいですね。

 

さらに、細かな特徴としてはこんなものもあります。

  • 入力補完が優秀
  • Chrome風のタブで表示されている
  • デフォルトのショートカットが便利
  • 拡張はpythonで記述
  • Vim、Emacsキーバインドがある

このあたりも開発していく際に役立ちそうです。

特徴が理解できたところで、早速インストールしていきましょう。

 

 

[PR] プログラミングで挫折しない学習方法を動画で公開中

Sublime Textのインストール

今回はMacを使ってインストール方法をご紹介します。

（基本的な手順はWindowsも同じです）

 

1.dmgファイルをダウンロード

Sublime Text 3

まずは、Sublime Textのサイトにアクセスします。今回はSublime Text 3のOS Xを選びます。OSによって選ぶものが異なりますのでご注意ください。

クリックするとdmgファイルのダウンロードが始まります。

 

2.dmgファイルを展開

dmgファイルを展開

ダウンロードしたdmgファイルをダブルクリックして展開しましょう。

 

3.ファイルからSublime Text.appをアプリケーションフォルダにコピー

Sublime Text.app

Macの使い方に慣れている方ならわかると思いますが、 Sublime Text.appをアプリケーションフォルダにコピーします。

 

4. Sublime Textを実行する

Sublime Textを実行

コピーが完了したら、アプリケーションのフォルダからクリックして実行します。

 

その際、このようなウィンドウが出てくることがありますが、「開く」をクリックでOKです。

開く

 

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

インストール完了

 

 

Sublime Textの基本的な使い方

使い方といっても、テキストエディタですので、コードを打ち込むだけですぐに使えます。

Sublime Text使い方

 

また、デフォルトのショートカットキーも豊富ですので、少しずつ覚えると便利です。

下記のリンクのページを開くと、元素記号表のようにショートカットキーが紹介されています。Mac版とWindows版をクリック1つで切り替えられますし、ショートカットキーをクリックすると、詳細の説明が表示されます。

Periodic table of the Keyboard Shortcuts

Sublime Text | Periodic table of the Keyboard Shortcuts.

 

 

PackageControllをインストール

ここでPackageControllをインストールしましょう。

これを入れると、HTMLのコードをハイライトしてくれるパッケージや入力補助をしてくれるパッケージなどを簡単にSublime Textに機能を追加することができます。

 

Sublime Text 3 PackageControll

https://sublime.wbond.net/installation

Sublime Text 3 PackageControll

 

まずは上のサイトからスクリプトをコピーします。

次に、「Ctrl(Command)＋Shift＋｀(JISキーボードなら＠キーの位置)」でConsoleを開きましょう。

Console画面に先程コピーしてきたスクリプトをペーストし、Enterキーをタイプしましょう。

Console画面

 

このような画面が表示されればOKです。ここでSublimeTextを再起動してインストールを完了させましょう。

スクリプト完了

 

日本語環境の設定

Sublime Textは海外のツールであるためメニューバーなどがすべて英語になっています。

まずは、エディタ上で「Japanize」というプラグインをインストールしていきます。

エディタを開いたら「Ctrl（Command）+ Shift + p」でPackage Controlを呼び出します。

そして、「install」と入力し、「Package Control: Install Package」が選択された状態でEnterキーを押します。

続いて表示される入力画面で「Japanize」と入力し、Enterキーを押すとプラグインのインストールが始まります。

インストールが完了すると、日本語化適用の手順が表示されます。

 

以下が日本語化にする設定方法です。

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

 

プラグインのインストール方法

特徴のところでも紹介したプラグインをインストールしていきます。

プラグインは、SublimeTextをWeb開発に使うのか、プログラム開発に使うのかなどの用途によって導入するものが変わってきます。

 

そんな中でも、おすすめのプラグインは下記の通りです。

  • SublimeLineter：エラーチェッカー
  • HTML5：HTML5のスニペット集、自動補完とハイライト
  • BracketHighlighter：開始/終了タグの強調
  • SublimeLinter-html-tidy：HTML5の構文チェッカー
  • SublimeLinter-jshint：JavaScriptの構文チェッカー
  • SublimeLinter-json：JSONの構文チェッカー
  • SublimeLinter-phplint：PHPの構文チェッカー
  • SublimeCodeIntel：関数・変数が定義されているところにジャンプする
  • abacus：イコールやコロンなどを綺麗に揃える
  • Phoenix Theme：Sublime Textの見た目をおしゃれにするテーマ。配色やデザインを自分でカスタマイズできます。

 

今回は例としてHTML5のプラグインをインストールをしていきましょう。

 

1.Preferences -> Package Control を開く

「Ctrl（Command）+ Shift + p」でもPackage Controlを開くことができるので、覚えておくと便利でしょう。

Package Control

 

2.表示された検索窓に”Install Package”と入力

Install Package

 

3.少しロード時間を待った後に表示される検索窓に”HTML5″と入力

HTML5

この時、全てを入力しなくても補完されます。さらにHTML5と入力された状態でEnterキーを押します。

SublimeTextを再起動すればプラグインのインストールは完了です。

 

 

ショートカットキーの設定方法

最後にショートカットキーを設定します。

SublimeTextははデフォルトでも便利なショートカットキー（キーバインド）が用意されていますが、自分好みのエディタにカスタマイズするとより便利です。

 

やり方は、少し複雑ですが、基本的なルールに則って行けば難易度は高くないはずです。

注意点としては、インストールしたパッケージと設定したショートカットキーが衝突してしまうことです。割り当て時には一度確認しておくことをおすすめします。

 

まずは、Preferencesから「Key Bindings」を開きましょう。

Key Bindings

 

次に、設定をしたいショートカットキーを入力していくだけです。

ショートカットキー入力

ショートカットキー入力2

ショートカットキーはGoogleなどの検索エンジンで検索すればたくさん出てきますので、自分好みのキーバインドを探してみてください。

最後に設定画面を閉じて保存(Save)し、SublimeTextを再起動すれば設定は完了です。

デフォルトで用意されているショートカットキーも便利なものが多いので、覚えておくと良いでしょう。

Mac Windows 動作
command+c ctrl+c コピー
command+r ctrl+r 関数,id,classの検索
command+/ ctrl+/ コメントアウト
command+d ctrl+d 選択した文字列と同じものを検索
command+option+2 ctrl+alt+2 画面を縦に2分割
command+ctrl+↑ ctrl+shift+↑ 行を1行上に移動
command+ctrl+↓ ctrl+shift+↓ 行を1行下に移動

 

今回の記事は以上です。

他の開発環境の構築を使いたい場合は、XAMPPをインストールする方法も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。特別な開発環境の構築なくプログラミングを学ぶことができます。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

【経験談から学ぶ！】より早くプログラミングを身につけるための方法

本稿は、Codementorのブログ記事を、Codementorより了解を得て日本語翻訳し掲載した記事になります。 本稿のテーマは、プログラミング学習にお...
プログラミング

18のプログラミング言語をポケモンのキャラクターに例えてみた！

本稿は、Codementorのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Jazz Rosende 氏によって投稿されました。 「...
プログラミング

【後編】スキル・実績だけでは転職は成功しない？納得したキャリアチェンジをする秘訣とは！

クリエイターのような専門的な職種の転職は、「スキルと実績さえあれば成功する」、そう考えている人が多いのではないだろうか？しかし、現実は大きく違うらしい。 ...
プログラミング

初心者でもできる！Apacheをインストールする方法

Webサーバとは Webサーバーとは、Webブラウザからのリクエスト（要求）に対し、Webページの内容をレスポンス（回答）として表示させる役割があります。 ...
プログラミング

IT・Web系エンジニア向けオンライン学習サービス「type IT Academy」をやってみた！

オンラインでプログラミングを学習できるサービスが国内外問わず増えていることを以前の記事で紹介していますが、よりエンジニア向けに作られたサービスも始まっているよう...
プログラミング

Macのテキストエディタ「CotEditor」の使い方【初心者向け】

プログラミングに使えるテキストエディタは複数ありますが、今回はMac専用のテキストエディタ「CotEditor」の使い方を初心者向けに紹介します。 インス...
プログラミング

あわせてよく読まれている記事

HTMLファイル作成にも役立つ！サクラエディタの使い方【初心者向け】

プログラミングに使えるテキストエディタはいくつかありますが、今回はそのうちのサクラエディタの使い方を初心者向けに解説します。 サクラエディタはとても高機能な、Windows上で動作する日本語テキストエディタです。 インストールから簡単な使い方までを紹介しますので、まだ利用したことのない方はぜひお試しください。   なお本記事は、オンラインのプログラミングスクールTechAcademyの内容をもとに紹介しています。   目次 本記事は以下の流れでご紹介します。 サクラエディタの特徴 サクラエディタ のインストール方法 サクラエディタ の使い方 HTML/CSSを入力してブラウザに表示させる方法   サクラエディタの特徴 サクラエディタは高機能でありながら、基本的な機能もわかりやすいので初めての方でも簡単という使いやすさが特徴です。そのため、リリースされてからも長く多くの人に使われ続けています。また、テキスト入力をより早くおこなうために支援する機能や、処理の自動化をおこなう機能を利用することも可能です。   Windows 2000/XP/2003/Vista/7/8での環境で動作し、画面解像度800×600以上が推奨となっています。またWindows標準のテキストエディタにない多くの機能を持っています。その一部がこれらです。   カラー強調表示（特定のキーワードの自動的に色分け）ができます キー操作を覚えて同じ操作を自動実行できます さまざまな文字コードに対応しています アウトライン解析（見出しのツリー表示）が可能     それでは実際に使っていきましょう。     [PR] プログラミングで挫折しない学習方法を動画で公開中サクラエディタのインストール まずはインストール方法について解説します。 ※記事のインストール環境はWindows7です   1.ダウンロードページへアクセス オフィシャルサイトのリンクから、インストーラーパッケージをダウンロードしてください。 V2（Unicode版）の最新版ダウンロード（図の青い枠）を使用すると簡単にインストールできます。ファイル名はこのページにアクセスした時点での最新のバージョン名となりますので、この画面の名称とは異なる場合があります。画面の下記をクリックするとダウンロードページが開き自動的にダウンロードが始まります。   2.インストール ダウンロードしたexeファイルをダブルクリックします。 このようなメッセージが出るので｢実行(R)｣をクリックします。 ここで下記のようなメッセージが出るので｢はい(Y)｣をクリックします。   この後、｢次へ(N)>｣をクリッして進むとこのような画面が表示されますが、ここでも｢次へ(N)>｣をクリックします。   この画面では、｢デスクトップにアイコンを作成（D)｣にチェックが入っていないので、チェックを入れることをおすすめします。アイコンがデスクトップに作成され、最初の起動が楽になります。   下記のようなメッセージが出るので｢インストール(I)>｣をクリックします。   正常に終了するとこの画面になるので｢完了(F)>｣をクリックするとインストールが完了します。 インストールの作業はこれだけです。   インストールが完了すると、デスクトップに次のようなアイコンが表示されますので、ダブルクリックで起動してください。     サクラエディタの使い方 起動ができたら、まずは基本的な使い方を覚えていきましょう。 今回は必ず使用する、ファイルの新規作成、ファイルの保存、上書き保存の方法を紹介します。   ファイルの新規作成 ファイルを新規作成する場合は、［ファイル］メニュー →［新規作成］を選択します。   ファイルの保存 ファイルを保存する場合は、［ファイル］メニュー →［名前を付けて保存］を選択し、［ファイルの種類］を選択し、ファイル名を入力します。   上書き保存 ファイルを上書き保存する場合は、［ファイル］メニュー →［上書き保存］を選択（または、［上書き保存］ボタンをクリック）します。   以下のような画面になるので、保存先のフォルダやファイル名を指定して保存します。 基本的な使い方はこれだけです。     HTML/CSSを入力してブラウザに表示する 最後に、実際にサクラエディタを使って、HTMLファイルとCSSファイルを作成してみましょう。   1．サクラエディタの起動 デスクトップにあるサクラエディタのアイコンをダブルクリックして起動します。   2．HTMLファイルの作成と保存 ［ファイル］メニュー →［名前を付けて保存］を選択して、ファイル名を［index.html］として保存してください。 下記の画像のようにHTMLを記述すると、タグが色分け表示されたことがわかります。   ここで上書き保存をしてください。図では、c:\sampleのフォルダに保存しています。   3．ブラウザで確認 入力した内容をブラウザで確認しましょう。保存したindex.htmlをダブルクリックすると、デフォルトのブラウザで開くことができ、内容を確認することができます。また、保存したファイルをドラッグ＆ドロップでブラウザに持って行くと確認することができます。   4．CSSファイルの作成と保存 CSSファイルもindex.htmlの場合と同じ方法で作成しましょう。 サクラエディタに戻り、［ファイル］メニュー →［新規作成］ を選択します。 ［ファイル］メニュー →［名前を付けて保存］を選択し、ファイル名を［style.css］として保存してください。   ※保存場所は、［index.html］と同じ場所にする必要があります ※CSSのコードを記述し、上書き保存をします。図では、c:\sampleに保存しています。 ※この例では背景を水色にします。   5．HTMLファイルにCSSファイルへのリンクを追記 ［index.html］に戻り、HTMLファイルに下記のように追記し、上書き保存をします。 <link href=”style.css” rel=”stylesheet” type=”text/css”> （※CSSファイル［style.css］へリンクするという内容の記述）   6．再度、ブラウザで確認 先ほど保存した、index.htmlのファイルをダブルクリックしてください。 CSSが適用され、Webページの背景色が『水色』に設定されたことが確認できます。 今回の記事は以上です。 ぜひ実際にインストールして使ってみてください。   他のWindows対応のテキストエディタを使ってみたい場合は、TeraPadの使い方も合わせてご覧ください。 また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。 [お知らせ]TechAcademyではプログラミング初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。テキストエディタなど特別な開発環境なくプログラミングを学ぶことができます。
プログラミング

Macのテキストエディタ「CotEditor」の使い方【初心者向け】

プログラミングに使えるテキストエディタは複数ありますが、今回はMac専用のテキストエディタ「CotEditor」の使い方を初心者向けに紹介します。 インストールの手順から、簡単な使い方まで基礎をおさえることができます。   なお本記事は、オンラインのプログラミングスクールTechAcademyの内容をもとに紹介しています。   目次 この記事は、下記の流れで紹介していきます。 CotEditorとは CotEditorのインストール CotEditorの使い方   CotEditorとは 無料で使えるMac専用のテキストエディタで、日本で開発されたので日本語で使うことができます。 HTMLやプログラムのコードを書くのに便利な機能があり、高度な文書の作成に向いています。 なお、他のMac専用のテキストエディタとしてはmiが有名です。     [PR] プログラミングで挫折しない学習方法を動画で公開中CotEditorのインストール まずはCotEditorをインストールしましょう。   ダウンロードサイトにアクセスしたら、下記画像の赤枠で囲ってあるダウンロードをクリックしてください。 なお、最新バージョンは1.5.4、OS X Lion以降に対応しています。   ダウンロードができたら、「CotEditor_1.5.4.dmg」のファイルをクリックします。   dmgファイルをクリックすると、下記画像のような新しいウインドウが開きます。   CotEditorのアイコンをアプリケーションフォルダへドラッグしてください。 これだけでインストールは完了です。   インストールが完了したら起動してみましょう。 アプリケーションフォルダの中からCotEditorのアイコンをダブルクリック（ショートカットキーの場合は⌘+O）して起動してください。   起動するとこのような画面が開きます。     CotEditorの使い方 起動ができたら実際にCotEditorを使ってみましょう。   文字コード・シンタックスの設定 文字コードはデフォルトでは、UTF-8に設定されています。もし変更する場合は「Unicode（UTF-8）」と表示されている箇所をクリックして変更してください。 また、文字コードの隣のボタンから、シンタックスを設定することができます。今回は例としてHTMLに設定しました。 このように設定すると、HTMLを書いた時にタグなどに色が付き、コーディングの際に楽になります。 編集内容をWebブラウザで確認する HTMLを入力した際などWebブラウザから確認することができます。 まずドキュメントを保存します（今回はHTMLファイルを例にします）。保存はメニューバーの「ファイル」から「保存」を選ぶだけです。 ファイルが保存できたら、下記の画像のようにWebブラウザにファイルをドラッグしてください。 すると、ブラウザで編集した結果が表示されます。 コードの色を指定する HTMLやCSSなどのタグを書いた際の色を簡単に設定することができます。 CotEditorでは、カラーコードパネルを使って直感的に設定することが可能です。     まずは、メニューバーの「ウインドウ」>「パネル」>「カラーコードパネル」でパネルを表示させましょう。 カラーコードパネルが開いたら、カラーサークルで好きな色をクリックして選び、挿入ボタンをクリックするだけです。 簡単に指定ができるので、自分の好みに合わせてみましょう。   今回の記事は以上です。 Macで使えるテキストエディタを他にも試してみたい場合は、miの使い方も合わせてご覧ください。 [お知らせ]TechAcademyではプログラミング初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。特別な開発環境の構築なしでプログラミングを学ぶことができます。
プログラミング

テキストエディタ「Notepad++」の使い⽅ 【初⼼者向け】

プログラミングに使えるテキストエディタは数多くありますが、今回はNotepad++（ノートパッド・プラス・プラス）の使い方を初心者向けに解説します。Notepad++はWindows上で動作する初心者にも使いやすい日本語での利用が可能なテキストエディタです。 インストールから、htmlを記述する簡単な例までを紹介しますので、ぜひ一度試してみてください。   なお本記事は、オンラインのプログラミングスクールTechAcademyの内容をもとに紹介しています。   目次 本記事は以下の流れでご紹介します。 Notepad++の特徴 Notepad++ のインストール方法 Notepad++ の使い方 HTML/CSSを入力してブラウザに表示させる方法     Notepad++の特徴 使い始める前に、Notepad++の特徴を知っておきましょう。 Notepad++はWindowsのメモ帳と同じような操作方法ですので、初心者でも直感的に使うことができます。 その後、使い方に慣れてきて自分なりの使い勝手を求めるようになった場合にも応用力が高く、さまざまなカスタマイズが可能です。また、高機能でありながら動作も軽く、ノートパソコンでも軽快に使用することができます。 Microsoft Windows (95/98/NT/2000/XP/Vista/7), Windows, Windows 95/98/ME, Windows NT/2000, Windows XP)の32bit版で動作するとなっていますが、Windows7の64bit環境でも問題なく動作しました。 他には下記のような特徴があります。 さまざまな文字コードへの対応 ブックマーク 拡張子ごとの強調文字指定（さらに括弧なども強調表示可能） 画面分割（2画面同期スクロールも可能） ズーム 自動アップデート     ではインストールから始めて実際に使用してみましょう。 [PR] プログラミングで挫折しない学習方法を動画で公開中Notepad++のインストール ここからは、インストール方法について解説します。 ※本記事のインストール環境はWindows7です   1.ダウンロードページへアクセス ダウンロードサイトのリンクから、インストーラーパッケージをダウンロードしてください。   画面を下にスクロールすると現れる緑のバーの｢ダウンロードファイル一覧｣をクリックして、全てのファイルを表示させてください。   このなかから、npp.5.9.installer.exeをクリックしてダウンロードしてください。 ファイル名の数字はバージョンアップされると変化します。   2.インストール ダウンロードしたexeファイルをダブルクリックします。 このようなメッセージが出るので｢実行(R)｣をクリックします。   ここで下記のようなメッセージが出るので、日本語表示のメニューになるようにインストールしたい場合はJapaneseになっていることを確認して、｢はい(Y)｣をクリックします。   下記のような画面が出るので｢次へ(N)>｣をクリックします。   ｢次へ(N)>｣と進んでいくとこのような画面が出るので、リストを下にスクロールし｢Create Shortcut on Desktop｣にチェックを入れて｢次へ(N)>｣をクリックします。これでインストールが始まります。インストールが終わるとデスクトップにショートカットが作成されます。   インストールが終わると下記の画面になります。この画面のまま｢完了(F)｣をクリックしてください。初期設定と起動がおこなわれます。   プラグイン(後から追加する機能)のアップデート画面が開きます。インターネットに繋がっている場合は、｢Update Selected｣をクリックしてください。インターネットに繋がっていない場合はアップデートできないので、｢Cancel｣を押してください。   アップデートが終了し、Notepad++の再起動を確認する画面です。｢はい（Y)｣をクリックしてください。Notepad++が自動的に再起動します。   再起動が完了するとNotepad++が自動的に起動します。下記のように簡単な説明が最初に表示されます。 これでインストールは終了です。この画面は一度閉じてください。   また、デスクトップに下記のショートカットが作成されます。次回からは、このアイコンをダブルクリックするとNotepad++を起動することができます。     Notepad++の使い方 Notepad++のインストールができたら、基本的な使い方を覚えていきましょう。 今回は必ず使用する、ファイルの新規作成、ファイルの保存、上書き保存の方法を紹介します。   ファイルの新規作成 ファイルを新規作成する場合は、［ファイル］メニュー →［新規作成］を選択します。   ファイルの保存 ファイルを保存する場合は、［ファイル］メニュー →［名前を付けて保存］を選択し、［ファイルの種類］を選択し、ファイル名を入力します。画面では、c:\sample というフォルダに保存しようとしている例になります。   上書き保存 ファイルを上書き保存する場合は、［ファイル］メニュー →［上書き保存］を選択（または、［上書き保存］ボタンをクリック）します。 まずはこれらの使い方だけおさえておきましょう。     HTML/CSSを入力してブラウザに表示する 少し応用編です。 実際にNotepad++を使って、HTMLファイルとCSSファイルを作成してみましょう。   1．Notepad++の起動 デスクトップにあるNotepad++のアイコンをダブルクリックして起動します。   2．HTMLファイルの作成と保存 ［ファイル］メニュー →［名前を付けて保存］を選択して、ファイル名を［index.html］として保存してください。 下記の画像のようにHTMLを記述すると、タグが色分け表示されたことがわかります。また、htmlのタグで四角の記号が現れるので、どのように区切られているのかわかりやすく表示されます。 ここで上書き保存をしてください。図では、c:\sampleのフォルダに保存しています。 3．ブラウザで確認 入力した内容をブラウザで確認しましょう。保存したindex.htmlをダブルクリックすると、デフォルトのブラウザで開くことができ、内容を確認することができます。また、保存したファイルをドラッグ＆ドロップでブラウザに持っていくと確認することができます。   4．CSSファイルの作成と保存 CSSファイルもindex.htmlの場合と同じ方法で作成しましょう。 Notepad++に戻り、［ファイル］メニュー →［新規作成］ を選択します。 一つの画面内にタブが新しく作られ、何も書かれていない空の画面が開きます。 ［ファイル］メニュー →［名前を付けて保存］を選択し、ファイル名を［style.css］として保存してください。 ※保存場所は、［index.html］と同じ場所にする必要があります。 ※CSSのコードを記述し、上書き保存をします。図では、c:\sampleに保存しています。 ※この例では背景を水色にします。 5．HTMLファイルにCSSファイルへのリンクを追記 ［index.html］に戻り、HTMLファイルに下記のように追記し、上書き保存をします。 （※CSSファイル［style.css］へリンクするという内容の記述） <link href=”style.css” rel=”stylesheet” type=”text/css”> 6．再度、ブラウザで確認 先ほど保存した、index.htmlのファイルをダブルクリックしてください。 CSSが適用され、Webページの背景色が『水色』に設定されたことが確認できます。 今回の記事は以上です。 ぜひ実際にインストールして使ってみてください。   他のWindows対応のテキストエディタを使ってみたい場合は、TeraPadの使い方も合わせてご覧ください。 [お知らせ]TechAcademyではプログラミング初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。特別な開発環境の構築なしでプログラミングを学ぶことができます。
プログラミング

Mac専用の国産テキストエディタ「mi」の使い方【初心者向け】

Mac向けのテキストエディタはいくつかありますが、今回は国産のテキストエディタ「mi（ミ）」の使い方を初心者向けに紹介します。 インストール方法から簡単な使い方についても紹介するので、記事を読みながら自分でも試してみてください。   なお本記事は、オンラインのプログラミングスクールTechAcademyの内容をもとに紹介しています。   目次 本記事では下記の順番で紹介していきます。 miとは miのインストール miの起動 miの使い方     miとは miは90年代に登場した歴史のある国産テキストエディタで、当時はミミカキエディトの名で親しまれていました。 ソースコードを書くのに便利な多くの機能がありつつ、軽量かつ無料で使えます。 豊富なライブラリが用意され、またユーザ独自のカスタマイズにも対応しており、上級者にとっても使い勝手の良いテキストエディタです。     [PR] プログラミングで挫折しない学習方法を動画で公開中miのインストール miを使うためにインストールしていきましょう。 まずは、miの公式サイトにアクセスしてください。 「最新バージョンのダウンロード」をクリックしてダウンロードしてください。   このようなページが開いたら、ダウンロードするためにクリックします。   ダウンロードが完了したら、dmgファイルを開いてください。   自動的にディスクイメージが生成され、下記画像のような新しいウインドウが開きます。 miのアイコンをアプリケーションフォルダのアイコンへドラッグしてください。 これでインストールは完了です。     miの起動 インストールが完了したらmiを起動させてみましょう。 まずは、miのアイコンを選んでダブルクリック（⌘+OのショートカットキーでもOK）して起動しましょう。   初回の起動時に、下記のようなアラートが表示されることがありますが、気にせず「開く」をクリックしてください。   これでmiが起動しました。 あとはソースコードを書いていくだけです。     miの使い方 最後に、初心者でも知っておきたいmiの使い方をいくつか紹介します。   文字コードの変更 まずはコードを書き始める前に、文字コードを適切に設定しましょう。デフォルトでUTF-8になっていますが、ここがShift_JISなどに設定されていると文字化けの原因にもなりますので、確認しておきましょう。 文字コードは画面上部の「UTF-8」をクリックすると変更できます。   モード設定 HTML、CSSなど自分が書くドキュメントに合わせてモードを設定することができます。設定はドキュメントにある「モード」からおこないます。 新規ドキュメントが開いた時点では標準になっているので、適宜設定します。   今回は例として、HTMLに設定しました。こうすることでタグなどが色づけされ、書きやすく、見やすくなります。 また、プログラム言語を書く際には、モードを適切に設定しておくことで関数や変数の入力補完もしてくれるので便利です。   文字サイズの変更 文字サイズも変更することができます。変更する場合は、ドキュメントの「サイズ」からおこなってください。   ブラウザでの確認方法 HTML/CSSを書く際に、ブラウザから編集結果をすぐに確認することができます。 ツールにある「ブラウズ」から表示させたいブラウザを指定すると、自動的にブラウザが開いて編集結果が確認できます。 また、ショートカットキーの「⌘+R」でブラウザを立ち上げることができるので、覚えておくと便利でしょう。 今回の記事は以上です。 他のテキストエディタを使ってみたい場合は、Macでも使えるSublime Textの使い方も合わせてご覧ください。 [お知らせ]TechAcademyではプログラミング初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。特別な開発環境の構築なしでプログラミングを学ぶことができます。
プログラミング

プログラミングにも使える！TeraPadの使い方【初心者向け】

プログラミングに使えるテキストエディタは複数ありますが、そのうちの1つであるTeraPad（テラパッド）について初心者向けにご紹介します。   インストール方法から簡単な使い方まで紹介しているので、ぜひ使ってみてください。   目次 本記事は下記の流れでご紹介します。 TeraPadの特徴 TeraPadのインストール方法 TeraPadの使い方 HTML/CSSを入力してブラウザに表示させる方法     TeraPadの特徴 TeraPadは、Windows上で動くフリーのテキストエディタで、Microsoft Windows 95/98/Me/NT4/2000/XP/Vista/7/8の動作する環境で使用可能です。 Windows標準搭載の『メモ帳』にはない、多くの機能を備えています。 HTMLファイルのタグが自動的に色分け表示される 行番号が表示される 元に戻すの回数が多い (標準で64回可能。メモ帳は、やり直しが1回しか効かない。) ブラウザでのプレビュー機能がある     [PR] プログラミングで挫折しない学習方法を動画で公開中TeraPadのインストール方法 次に、インストール方法について解説していきます。 ※記事のインストールする環境のOSはWindows7です   1．ダウンロードページにアクセス ダウンロードページにアクセスし、下図を参考に枠内をクリックし、ファイルをダウンロードします。   このようなメッセージが表示されたら、『実行』をクリックします。   ここで『はい』をクリックします。   2．インストール ダウンロードができたらインストールを行います。 ［次へ］をクリックしてください。   さらに、［次へ］をクリックします。   インストール先を確認し、 ［次へ］をクリックします。 (※インストール先を変更する場合は、ここで「参照」をクリックします)   「はい」を選択し、フォルダを作成します。   さらに、［次へ］をクリックしてください。   これでインストール完了です。   「Readme.txt」のファイルが表示され、デスクトップに次のようなTeraPadのアイコンが表示されます。     TeraPadの使い方 ここからは基本的な使い方について紹介します。 今回は基本となる、ファイルの新規作成、ファイルの保存、上書き保存の方法を紹介します。   ファイルの新規作成 ファイルを新規作成する場合は、［ファイル］メニュー →［新規作成］を選択します。   ファイルの保存 ファイルを保存する場合は、［ファイル］メニュー →［名前を付けて保存］を選択し、［ファイルの種類］を選択し、ファイル名を入力します。   上書き保存 ファイルを上書き保存する場合は、［ファイル］メニュー →［上書き保存］を選択（または、［上書き保存］ボタンをクリック）します。   なお、HTMLやJavaScriptなどを入力する際は、「全角スペース」を区別できるように設定することをおすすめします。 表示 > オプション > 表示 にある「全角空白」にチェックを入れると、全角スペースを入力した際に、四角のマークが表示されるようになります。     HTML/CSSを入力してブラウザに表示する 最後に、実際にTeraPadを使って、HTMLファイルとCSSファイルを作成してみましょう。   1．TeraPadの起動 デスクトップにあるTeraPadのアイコンをダブルクリックして起動します。   2．HTMLファイルの作成と保存 ［ファイル］メニュー →［名前を付けて保存］を選択して、ファイル名を［index.html］として保存してください。 上のように記述すると、タグが色分け表示されました。 上書き保存をします。   3．ブラウザで確認 入力した内容をブラウザで確認しましょう。 ツールバーの［InternetExplorer］ボタンをクリックすると、ブラウザが起動します。   ブラウザが開き、きちんと反映されたことがわかりますね。   4．CSSファイルの作成と保存 続いてCSSファイルも作成しましょう。 TeraPadに戻り、［ファイル］メニュー →［新規作成］ を選択します。 ［ファイル］メニュー →［名前を付けて保存］を選択し、ファイル名を［style.css］として保存してください。 （※保存場所は、［index.html］と同じ場所にする必要があります）   CSSのコードを記述し、上書き保存をします。 （※Webページ全体の背景色を『水色』にするという内容の記述）     5．HTMLファイルにCSSファイルへのリンクを追記 ［index.html］に戻り、HTMLファイルに上のように追記し、上書き保存をします。 （※CSSファイル［style.css］へリンクするという内容の記述）   6．再度、ブラウザで確認 再度ツールバーの［InternetExplorer］ボタンをクリックして、ブラウザを起動しましょう。 CSSが適用され、Webページの背景色が『水色』に設定されたことが確認できます。 今回の記事は以上です。   他のテキストエディタを使ってみたい場合は、Sublime Textの使い方も合わせてご覧ください。 [お知らせ]TechAcademyではプログラミング初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。テキストエディタなど特別な開発環境がなくてもプログラミングを学ぶことができます。 また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。
プログラミング

今日からすぐできる！VagrantとVirtualBoxを使ってローカル開発環境を構築する方法【初心者向け】

プログラミング学習を始める際の最初の壁が、開発環境の構築だったということはないでしょうか？ 今回はVagrantとVirtualBoxを用いたローカル開発環境の構築方法をご紹介します。これでPC上に開発環境を比較的簡単に用意することができます。 なお、今回はMacのPCを使って紹介します。   目次 本記事では下記の手順で解説していきます。 実際に開発環境を構築したあとは、Rubyのファイルを例にブラウザで確認するまでの手順を紹介します。 VirtualBoxをインストールする Vagrantをインストールする VagrantでCentOSを立ち上げる ファイル転送ツールを導入する Rubyファイルをブラウザから確認する   VirtualBoxをインストールする VirtualBox（バーチャルボックス）とは、PC仮想化ソフトです。現在はオラクルが開発しており、製品表記は「Oracle VM VirtualBox」になっています。このPC仮想化ソフトを使うと、使用しているPC上に仮想的なPCを作成して、別の OSをインストール・実行することができます。PC仮想化ソフトには、VirtualBox以外にVMware PlayerやParallelsといったものがありますが、無料で手軽に使えて、Windowsや Linuxなど複数のOS をサポートしているVirtualBoxがおすすめです。   VirtualBoxのサイトにアクセスしてインストールしてみましょう。 左にある「Downloads」のボタンをクリックすると、OSごとのパッケージがダウンロードできます今回はMacですので、Mac OS Xを選びました。   ダウンロードしたファイルを開くとこのような画面になりますので、「Double click on this icon」をクリックしてインストールしてください。 これでVirtualBoxのインストールは完了です。   [PR] プログラミングで挫折しない学習方法を動画で公開中Vagrantをインストールする 続いて、Vagrant（ベイグラント）をインストールします。Vagrantとは、一言で言えば環境構築を簡単に立ち上げるためのツールです。Vagrantがなければ仮想マシンを立ち上げや環境構築にさまざまな作業が必要でしたが、Vagrantはそういったワークフローをまとめて行うことができます。 VirtualBoxとVagrantの2つがあることで、開発環境を仮想マシン上に自動作成することができます。   では早速インストールしましょう。Vagrantのサイトにアクセスすると、ダウンロードのボタンがあるのでクリックします。 今回はMacを使用するので「MAC OS X」をクリックしてダウンロードします。   ダウンロードしたファイルを開くとこのような画面になりますので、Vagrant.pkgをクリックしてインストールしましょう。   インストールが完了したらターミナルを開いて下記のコマンドを実行してみてください。 $ vagrant -v   無事にバージョンが返ってくればVagrantのインストールは完了です。 Vagrant 1.7.4   VagrantでCentOSを立ち上げる 続いて、インストールしたVagrantを使って、CentOSを立ち上げてみます。実際の操作はターミナルを使用しましょう。 Vagrantbox.esというサイトから立ち上げるために必要な情報を取得することができます。今回は、CentOS 7.0の64bitを使い、名前は「centos」にしましょう。   まずはターミナルを使って、Vagrantに「centos」という名前のboxを追加します。boxとは仮想マシンを手軽にクローンするためのベースイメージのことです。 $ vagrant box add centos http://developer.nrel.gov/downloads/vagrant-boxes/CentOS-6.4-x86_64-v20130427.box   boxの追加には少し時間がかかりますが、完了したら設定ファイルを作りましょう。 $ vagrant init centos   そして最後にVagrantを起動します。 $ vagrant up これで、VagrantでCentOSの立ち上げが完了しました。   ファイル転送ツールを導入する それでは今度は、ファイル転送ツールを使ってMacからCentOS内のファイルを参照できるようにしましょう。 ファイル転送ツールにはCyberduckやFileZillaなど様々ありますが、今回はFileZillaを使っていくことにします。   先ほどの、「vagrant up」でVagrantを立ち上げる際に出力されるログを見てみましょう。ここにSSH接続に必要な情報はが表示されています。パスワードはvagrantになります。 ~/D/I/centos ❯❯❯ vagrant up Bringing machine ‘default’ up with ‘virtualbox’ provider… ==> default: Resuming suspended VM… ==> default: Booting VM… ==> default: Waiting for machine to boot. This may
プログラミング

WEEKLY RANKING

TechAcademy（テックアカデミー） プログラミング今日から使える！Sublime Textの使い方【初心者向け】