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週間でエンジニアになれるオンラインブートキャンプを開催しています。特別な開発環境の構築なしでプログラミングを学ぶことができます。