Macのテキストエディタ「CotEditor」の使い方【初心者向け】
MacのPCで使えるテキストエディタ「CotEditor」の使い方について初心者向けに解説した記事です。インストールの手順から、HTML/CSSのファイルを表示させる方法まで、基礎的な知識はこの記事で身につけられます。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
プログラミングに使えるテキストエディタは複数ありますが、今回はMac専用のテキストエディタ「CotEditor」の使い方を初心者向けに紹介します。
インストールの手順から、簡単な使い方まで基礎をおさえることができます。
なお本記事は、オンラインのプログラミングスクールTechAcademyの内容をもとに紹介しています。
目次
この記事は、下記の流れで紹介していきます。
CotEditorとは
無料で使えるMac専用のテキストエディタで、日本で開発されたので日本語で使うことができます。 HTMLやプログラムのコードを書くのに便利な機能があり、高度な文書の作成に向いています。
なお、他のMac専用のテキストエディタとしてはmiが有名です。
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週間でエンジニアになれるオンラインブートキャンプを開催しています。特別な開発環境の構築なしでプログラミングを学ぶことができます。
