HTMLファイル作成にも役立つ！サクラエディタの使い方【初心者向け】
Windowsで使えるテキストエディタ「サクラエディタ」の使い方を初心者向けに解説した記事です。シンプルなエディタですので、すぐに使い始めることができます。インストール方法から、HTML/CSSファイルの表示方法まで紹介。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
プログラミングに使えるテキストエディタはいくつかありますが、今回はそのうちのサクラエディタの使い方を初心者向けに解説します。
サクラエディタはとても高機能な、Windows上で動作する日本語テキストエディタです。
インストールから簡単な使い方までを紹介しますので、まだ利用したことのない方はぜひお試しください。
なお本記事は、オンラインのプログラミングスクールTechAcademyの内容をもとに紹介しています。
目次
本記事は以下の流れでご紹介します。
サクラエディタの特徴
サクラエディタは高機能でありながら、基本的な機能もわかりやすいので初めての方でも簡単という使いやすさが特徴です。そのため、リリースされてからも長く多くの人に使われ続けています。また、テキスト入力をより早くおこなうために支援する機能や、処理の自動化をおこなう機能を利用することも可能です。
Windows 2000/XP/2003/Vista/7/8での環境で動作し、画面解像度800×600以上が推奨となっています。またWindows標準のテキストエディタにない多くの機能を持っています。その一部がこれらです。
- カラー強調表示（特定のキーワードの自動的に色分け）ができます
- キー操作を覚えて同じ操作を自動実行できます
- さまざまな文字コードに対応しています
- アウトライン解析（見出しのツリー表示）が可能
それでは実際に使っていきましょう。
サクラエディタのインストール
まずはインストール方法について解説します。
※記事のインストール環境は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週間でエンジニアになれるオンラインブートキャンプを開催しています。テキストエディタなど特別な開発環境なくプログラミングを学ぶことができます。
