HTMLファイル作成にも役立つ！サクラエディタの使い方【初心者向け】現役エンジニアが解説
Windowsで使えるテキストエディタ「サクラエディタ」の使い方を初心者向けに解説した記事です。シンプルなエディタですので、すぐに使い始めることができます。インストール方法から、HTML/CSSファイルの表示方法まで紹介。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
プログラミングに使えるテキストエディタはいくつかありますが、今回はそのうちのサクラエディタの使い方を初心者向けに解説します。
サクラエディタはとても高機能な、Windows上で動作する日本語テキストエディタです。
インストールから簡単な使い方までを紹介しますので、まだ利用したことのない方はぜひお試しください。
目次
本記事は以下の流れでご紹介します。
なお本記事は、現役エンジニアが教えるオンラインスクール、テックアカデミーが制作しています。
サクラエディタの特徴
サクラエディタは高機能でありながら、基本的な機能もわかりやすいので初めての方でも簡単という使いやすさが特徴です。
そのため、リリースされてからも長く多くの人に使われ続けています。
また、テキスト入力をより早くおこなうために支援する機能や、処理の自動化をおこなう機能を利用することも可能です。
Windows 2000/XP/2003/Vista/7/8/10での環境で動作し、画面解像度800×600以上が推奨となっています。
ただし、Windows 2000/XP/2003/Vista/7/8/8.1で動かすには、バージョン 2.3.2.0 以前のバージョンを使用する必要があります。
またWindows標準のテキストエディタにない多くの機能を持っています。
その一部がこれらです。
- カラー強調表示（特定のキーワードの自動的に色分け）ができます
- キー操作を覚えて同じ操作を自動実行できます
- さまざまな文字コードに対応しています
- アウトライン解析（見出しのツリー表示）が可能
それでは実際に使っていきましょう。
サクラエディタのインストール方法
まずはインストール方法について解説します。
※記事のインストール環境はWindows10です。
1.ダウンロードページへアクセス
オフィシャルサイトのリンクから、インストーラーパッケージをダウンロードしてください。
次の画面の赤い枠で囲まれている、sakura-tag-v2.4.1-build2849-ee8234f-Win32-Release-Installer.zipというところをクリックするとzipファイルに圧縮されたインストラーがダウンロード可能です。
32bit版ですが64bitのwindows10でもご利用可能です。
もし、64bit版をご利用されたい場合はSAKURA Editor / Wiki / 64bit (sourceforge.net)からダウンロード可能です。
赤枠の部分をクリックしていただければzipファイルに圧縮されたファイルがダウンロード可能です。
ただし、動作保証はされていないため、64bit版と機能が同じ32bit版をご利用される方が安全です。
2.インストール
ダウンロードしたzipファイルを右クリックして、全てを展開を選択することで、zipファイルを解凍します。
展開を選択します。
自動的に展開されたフォルダが開かれますので、sakura_install2-4-1-2849-x86.exeのようなexeファイルをダブルクリックしてください。
インストール中に使用する言語は日本語にしてOKをクリックしてください
次へをクリックしてください
内容に同意できる場合次へをクリックしてください
インストール先が聞かれるため、標準設定のまま次へをクリックしてください。
コンポーネントの選択も、標準状態で良いので次へをクリックしてください。
設定保存方法の選択も、標準状態で良いので次へをクリックしてください。
プログラムグループの設定も、標準状態で良いので次へをクリックしてください。
追加タスクの選択は、ディスクトップ上にアイコンを作成するをクリックしてください。
インストール準備画面ではインストールをクリックしてください。
インストールが完了されますので完了をクリックしてください。
インストールが完了するとディスクトップ上にサクラエディタのアイコンが表示されます。
使用したい場合は、このアイコンをダブルクリックしてみてください。
サクラエディタの使い方
起動ができたら、まずは基本的な使い方を覚えていきましょう。
今回は必ず使用する、ファイルの新規作成、ファイルの保存、上書き保存の方法を紹介します。
ファイルの新規作成
ファイルを新規作成する場合は、［ファイル］メニュー →［新規作成］を選択します。
ファイルの保存
ファイルを保存する場合は、［ファイル］メニュー →［名前を付けて保存］を選択し、［ファイルの種類］を選択し、ファイル名を入力します。
上書き保存
ファイルを上書き保存する場合は、［ファイル］メニュー →［上書き保存］を選択（または、［上書き保存］ボタンをクリック）します。
以下のような画面になるので、保存先のフォルダやファイル名を指定して保存します。
基本的な使い方はこれだけです。
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の使い方も合わせてご覧ください。
プログラミングを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、Ruby on Railsを使ったWebアプリケーション開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
