サクラエディタとは
サクラエディタは日本製のWindows用テキストエディタで、フリーウェアとして配布されています。
フリーウェア（無料）なのに機能性が高く、htmlやcssはもちろんのこと、プログラミングにも使える優れモノ。
Webデザイナー志望者向けスクールとかでも高機能テキストエディタのひとつとしておすすめされているのではないでしょうか。
Adobe DreamWeaverのようないわゆるWebオーサリングツールのように、デザイン自体を視覚的に確認する機能はありませんが、htmlやcssの「基本の『キ』」を理解するという観点からもウェブデザイナーを目指す方は機能性の高いテキストエディタを使える環境を整えておくのが良いでしょう。
実際に私が使ってみておすすめできるテキストエディタはいくつかありますが、本記事ではサクラエディタについて説明しますね。
ダウンロード手順
オフィシャルサイトにアクセスして、ダウンロードしましょう。
サクラエディタ オフィシャルサイトからも最新版をダウンロードできますし、機能紹介やヘルプも掲載されているので、いろいろと参考になると思います。
今回はダウンロード手順の説明なので、ダウンロードサイト（GitHub）のサクラエディタ インストーラ、パッケージダウンロードの直リンクを貼っておきますね。
ダウンロードサイトを開いて、「sakura-tag-v2.4.1-build2849-ee8234f-Win32-Release-Installer.zip」をダウンロードしましょう。
下図赤枠の部分をクリックするだけで、ダウンロードできます。
ちなみに、パソコンはWindows 11 / 64 ビット オペレーティング システムですが、上図のWin32-Release-Installerで問題なくインストールでき、正常に動作しています。
インストール手順
では、インストール手順をステップ バイ ステップで説明しましょう。
ダウンロードしたzipファイルを「すべて展開」
ダウンロードした.zipファイルを右クリックして「すべて展開」を選択すると、下図の画面になります。
ご自分の状況に応じて、展開先のフォルダを[参照]から指定しましょう。
特に指定する必要が無ければ、ダイアログ最下部の[展開]をクリックします。
インストーラの.exeファイルを実行
.zipを展開すると、下図の画面が表示されます。
.exeファイル（下図赤枠）をダブルクリックしましょう。
「この不明な発行元からのアプリがデバイスに変更を加えることを許可しますか？」と表示するダイアログが表示されますが、[はい]を選択します。
セットアップに使用する言語
セットアップに使用する言語の選択は、日本語かEnglishのどちらかを選択できます。
言語を選択したら、[OK]をクリックします。
サクラエディタ セットアップ ウィザードの開始
サクラエディタ セットアップ ウィザードの開始ダイアログが表示されます。
表示内容を確認して、[次へ＞]。
「情報 続行する前に以下の重要な情報をお読みください」と表示されるので、内容を確認して、[次へ＞]を押しましょう。
インストール先の指定
次に、インストール先を指定します。
下図は、前の手順で[次へ＞]を押した後に表示されるダイアログです。
Cドライブのプログラムファイル内に「sakura」というディレクトリを作成してインストールする設定になっていますね。
インストール先を変更する場合は、[参照]をクリックしてからインストール場所を指定しましょう。
コンポーネントの選択
コンポーネントの選択ダイアログでは、プルダウン部分が「すべて」になっていることを確認して、[次へ＞]をクリックしましょう。
設定保存方法の選択
「設定をユーザ毎に個別に管理する」にチェックが入ったまま、[次へ＞]。
プログラムグループの指定
ここも、特に変更せずに [次へ＞]。
追加タスクの選択
追加タスクの選択ウィンドウでは、「デスクトップにショートカットを作成する」にクリックして、[次へ＞]。
インストール準備完了
ひと通り目を通して、[インストール]。
サクラエディタ セットアップウィザードの完了
これで、サクラエディタのインストールがかんりょうしました。
[完了]をクリックしてダイアログを閉じましょう。
デスクトップにサクラエディタのショートカットが表示されていることを確認してください。
基本の使い方
デスクトップのサクラエディタ ショートカットをダブルクリックして、ファイルを開いてみましょう。
淡い黄色の背景に[EOF]という文字と青いアンダーラインが表示された状態で、新規ファイル（無題１）が表示されます。
こんな感じ。
ちなみに、[EOF] は End Of File （文書の終わり）の略語で、これ以降にデータはありませんという意味です。
青いアンダーラインは、カーソルの現在位置（カーソルがある行）を示しています。
新規作成・保存など
画面上部の[ファイル]を展開すると、新規作成、保存などの操作ができます。
保存していないファイルを閉じようとすると、「保存しますか？」ダイアログが表示されるので、必要なファイルは場所を指定して保存しましょう。
ちなみに、「閉じて（無題）（R）」は、現在開いているファイルを閉じて、新たに無題ファイルを開くという動作です。
「閉じて（無題）（R）」を選択した際に閉じようとしているファイルが保存されていなければ、「保存しますか？」ダイアログが表示されます。
背景色や文字色を変更したいなら
背景色や文字色などの表示設定を変更するには、[設定] を展開して [タイプ別設定] を選択しましょう。
次に表示されるダイアログで、表示色の細かな設定ができます。
カラータブを開きましょう。
色指定欄で、項目ごとに色とその背景色を設定できます。
左端にチェックが付いている項目は、色指定が設定されているものです。
チェックがついていない項目は色分け/表示設定がされていないものですので、項目を選択してその左側に表示されるチェックボックスにチェックを入れて色分け/表示設定をしましょう。
項目をクリックして選択すると、下方にある「文字色」「背景色」を選択できます。
上図の例では、「テキスト」を選択しています。
赤枠の下の方を見ると、「文字色」として黒が設定されていて「背景色」が淡い黄色になっていますね。
文字色を黒以外の色にしたいなら、文字色欄の黒をクリックして次に表示されるウィンドウで色を選択しましょう。
文字部分の背景色を別の色に変更するなら、同様に色を選択してください。
この手順で背景色を変更すると、選択した項目（上の例では「テキスト」部分）の背景色だけが選択した色に変わります。
選択した項目以外の背景色は変更されませんのでちょっと注意が必要です。
項目を問わず全体の背景色を統一して変更したい場合
- 上で選択されている項目にかかわらず、「背景色」で変更後の色を選択しましょう。
- 背景色の右隣にある「背景色統一」をクリックします。
- 次に表示される「背景色統一」ダイアログで、選択した色が一番上に表示されていることを確認し、[OK] をクリック。
- 「タイプ別設定」のダイアログに戻ったら、[OK] をクリックします。
以上 サクラエディタのダウンロードからインストール、基本の表示色設定の変更方法手順です。
ご参考になれば幸いです♪