HTMLファイル作成にも役立つ！サクラエディタの使い方【初心者向け】現役エンジニアが解説
Windowsで使えるテキストエディタ「サクラエディタ」の使い方を初心者向けに解説した記事です。シンプルなエディタですので、すぐに使い始めることができます。インストール方法から、HTML/CSSファイルの表示方法まで紹介。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
プログラミングに使えるテキストエディタはいくつかありますが、今回はそのうちのサクラエディタの使い方を初心者向けに解説します。
サクラエディタはとても高機能な、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をクリックしてください
次へをクリックしてください
内容に同意できる場合次へをクリックしてください
インストール先が聞かれるため、標準設定のまま次へをクリックしてください。
コンポーネントの選択も、標準状態で良いので次へをクリックしてください。
設定保存方法の選択も、標準状態で良いので次へをクリックしてください。
プログラムグループの設定も、標準状態で良いので次へをクリックしてください。
追加タスクの選択は、ディスクトップ上にアイコンを作成するをクリックしてください。
インストール準備画面ではインストールをクリックしてください。
インストールが完了されますので完了をクリックしてください。
インストールが完了するとディスクトップ上にサクラエディタのアイコンが表示されます。
使用したい場合は、このアイコンをダブルクリックしてみてください。
サクラエディタの使い方
起動ができたら、まずは基本的な使い方を覚えていきましょう。
今回は必ず使用する、ファイルの新規作成、ファイルの保存、上書き保存の方法を紹介します。
ファイルの新規作成
ファイルを新規作成する場合は、［ファイル］メニュー →［新規作成］を選択します。
ファイルの保存
ファイルを保存する場合は、［ファイル］メニュー →［名前を付けて保存］を選択し、［ファイルの種類］を選択し、ファイル名を入力します。
上書き保存
ファイルを上書き保存する場合は、［ファイル］メニュー →［上書き保存］を選択（または、［上書き保存］ボタンをクリック）します。
以下のような画面になるので、保存先のフォルダやファイル名を指定して保存します。
基本的な使い方はこれだけです。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
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アプリケーション開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
