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

MacのPCで使えるテキストエディタ「CotEditor」の使い方について初心者向けに解説した記事です。インストールの手順から、HTML/CSSのファイルを表示させる方法まで、基礎的な知識はこの記事で身につけられます。

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

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

インストールの手順から、簡単な使い方まで基礎をおさえることができます。

 

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

 

目次

この記事は、下記の流れで紹介していきます。

 

CotEditorとは

無料で使えるMac専用のテキストエディタで、日本で開発されたので日本語で使うことができます。 HTMLやプログラムのコードを書くのに便利な機能があり、高度な文書の作成に向いています。

なお、他のMac専用のテキストエディタとしてはmiが有名です。

 

 

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

CotEditorのインストール

まずはCotEditorをインストールしましょう。

 

ダウンロードサイトにアクセスしたら、下記画像の赤枠で囲ってあるダウンロードをクリックしてください。

なお、最新バージョンは1.5.4、OS X Lion以降に対応しています。

ss01

 

ダウンロードができたら、「CotEditor_1.5.4.dmg」のファイルをクリックします。

ss02

 

dmgファイルをクリックすると、下記画像のような新しいウインドウが開きます。

ss03

 

CotEditorのアイコンをアプリケーションフォルダへドラッグしてください。

ss04

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

 

インストールが完了したら起動してみましょう。

アプリケーションフォルダの中からCotEditorのアイコンをダブルクリック(ショートカットキーの場合は⌘+O)して起動してください。

 

起動するとこのような画面が開きます。

ss06

 

 

CotEditorの使い方

起動ができたら実際にCotEditorを使ってみましょう。

 

文字コード・シンタックスの設定

文字コードはデフォルトでは、UTF-8に設定されています。もし変更する場合は「Unicode(UTF-8)」と表示されている箇所をクリックして変更してください。

また、文字コードの隣のボタンから、シンタックスを設定することができます。今回は例としてHTMLに設定しました。

このように設定すると、HTMLを書いた時にタグなどに色が付き、コーディングの際に楽になります。

ss08

編集内容をWebブラウザで確認する

HTMLを入力した際などWebブラウザから確認することができます。

まずドキュメントを保存します(今回はHTMLファイルを例にします)。保存はメニューバーの「ファイル」から「保存」を選ぶだけです。

ファイルが保存できたら、下記の画像のようにWebブラウザにファイルをドラッグしてください。

ss10

すると、ブラウザで編集した結果が表示されます。

コードの色を指定する

HTMLやCSSなどのタグを書いた際の色を簡単に設定することができます。

CotEditorでは、カラーコードパネルを使って直感的に設定することが可能です。

 

 

まずは、メニューバーの「ウインドウ」>「パネル」>「カラーコードパネル」でパネルを表示させましょう。

ss09

カラーコードパネルが開いたら、カラーサークルで好きな色をクリックして選び、挿入ボタンをクリックするだけです。

簡単に指定ができるので、自分の好みに合わせてみましょう。

 

今回の記事は以上です。

Macで使えるテキストエディタを他にも試してみたい場合は、miの使い方も合わせてご覧ください。

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