【保存版】サクラエディタのインストール方法やおすすめ設定を紹介

あなたはプログラミングを始めるにあたって、「テキストエディタをインストールしたいけど、どれがいいのか分からない!」と悩んでいませんか。

そんな時には、まずはサクラエディタを使ってみてはいかがでしょうか。

サクラエディタは、利用しやすく、高性能な、無料のテキストエディタです。メニュー表示は、全て日本語対応しているので初心者の方も利用しやすいでしょう。

HTMLやCSSなど、サクラエディタを利用することにより、一気に作業効率が上がります。実際に、筆者の作業効率も倍以上になりました。

今回は、サクラエディタのインストールからおすすめの基本設定や使い方をご紹介します。

 

インストール方法

Windows

※この記事のインストール環境は、Windows10になります。

・ダウンロード

オフィシャルサイトから、インストーラーパッケージをダウンロードします。

V2(Unicode版)下図の赤い枠の部分「最新版ダウンロード」をクリックすると、ダウンロードページが開き自動的にダウンロードが始まります。

※ファイル名は最新のバージョン名となるので、この画面のファイル名とは異なる場合があります。

 

・インストール

① ダウンロードしたら、exeファイルをクリックします。

以下のようにメッセージが表示されるので、「はい」を選択します。

※この画面の前に、警告文が表示される場合があります。その場合は、すべて「はい」を選択してください。

 

② セットアップの画面が表示されます。「次へ」を選択します。

 

③インストール先のフォルダを指定し、「次へ」を選択します。保存先が『C:¥Program Files(x86)¥sakura』で良い場合は、そのまま「次へ」を選択してください。

 

④設定保存方法の選択画面が表示されます。この画面では何も変更せず、「次へ」を選択してください。

 

⑤この画面でも何も変更せず「次へ」を選択してください。

 

⑥追加タスクの選択を行います。

はじめは、『デスクトップにアイコンを作成(D)にチェックがないので、アクセスしやすいようにチェックを付けることをおすすめします。

デスクトップにアイコンが作成され、起動が簡単に行えます。

 

⑦最後に、インストール準備完了画面が表示されます。変更がなければ「インストール」を選択します。

 

⑧インストールが終了したら、この画面が表示されます。「完了」を選択してインストールは終了です。

お疲れ様でした!

 

デスクトップに次のようなアイコンが表示されますので、ダブルクリックして起動してみましょう。

 

Mac

EasyWineをリンクより”EasyWine-20160804_wine-1.9.15.dmg“を選択し、保存します。

 

②ダウンロードしたファイルをクリックし、インストール終了後、以下のような画面が表示されます。
アイコンをクリックしてください。

 

③以下のような、警告文が表示されますが「開く」を選択します。

 

④初回起動時のみ 、『Mono』 と『 Gecko』 プラグインのインストールに関する案内が表示されることがありますのでインストールをしてください。

ファイルとしてダウンロードするだけですので、Windows アプリケーションの起動確率を上げるためにインストールすることをおすすめします。

 

⑤インストール終了後、以下のようなウィンドウが表示されます。これでEasyWineのインストールは終了です。

 

⑥次に、サクラエディタオフィシャルサイトから、インストーラーパッケージをダウンロードしてください。

V2(Unicode版)下図の赤い枠の部分「最新版ダウンロード」をクリックすると、ダウンロードページが開き自動的にダウンロードが始まります。

※ファイル名は最新のバージョン名となるので、この画面のファイル名とは異なる場合があります。

 

⑦ EasyWineを起動して、立ち上がったエクスプローラ上から、⑥でダウンロードしたサクラエディタのexeを起動してインストールします。インストールの手順はWindows同様です。

 

⑦インストールが終了したら、『C:\Program Files\sakura』の中にある『sakura.exe』をダブルクリックすると、起動できます。以上でインストールは終了です。お疲れ様でした!

 

最初にやっておくと便利な設定

オススメ設定:自動保存を有効にする

サクラエディタは安定したソフトですが、動作停止を起こしてしまう可能性はゼロではありません。そんなときのために、自動保存を有効にしましょう。

①メニューバーから「共通設定を選択します。

 

②「ファイル」タブをクリックし、『自動的に保存する』にチェックを入れ、「OK」を選択します。

 

これで、作業中に動作停止してしまっても、すべてデータが消えてしまうことはありません。

また、保存間隔は分単位で選択できるので、ご自身の作業ペースに合わせて設定してみましょう。

 

オススメ設定:タブを有効にする

複数のファイルを一度に編集したいときにオススメの設定です。

①メニューバーから、「共通設定」を選択します。

②「タブバー」を選択し、『タブバーを表示する』にチェックを入れ、「OK」を選択します。

これで、複数のファイルを効率良く編集できるようになりました。

 

ここからは、Web制作で扱うファイルの種類ごとの設定をしましょう。HTML・CSS・Javascriptの設定を行います。

HTML

① メニューバーから「タイプ別設定一覧をクリックします。

 

② 編集したい言語(ここではHTML)を選択し、「設定変更」をクリックします。ここまでの手順はCSS、JavaScriptの設定を行う際も同様です。

 

③ 「ウインドウ」をクリックし、『文字コード』をUTF-8に変更して「OK」を選択します。Webサイトの多くはUTF-8で記述されているので、文字コードの設定を変更してから使用しましょう。

 

CSS

CSSは初期状態では設定が定義されていないので、手動で追加します。

① 先ほどのHTML①の手順で「タイプ別設定一覧」を選択します。

② 「追加」を選択し、「設定変更」を選択します。

 

③ 「スクリーン」の『設定の名前』と『ファイル拡張子』に、” css ”と入力します。

 

④ HTMLの③同様に、『文字コード』をUTF-8に変更し、「OK」を選択します。

 

このように一覧に追加されますので、設定完了です。

 

Javascript

① CSSの手順①と②同様に、「設定の変更」を選択します。

 

② 「スクリーン」の『設定の名前』に” JavaScript ”、『ファイル拡張子』に” js ”と入力し、「OK」を選択します。

 

このように一覧に追加されますので、設定完了です。

 

簡単な利用方法

ファイルの保存など、基本的な操作方法をご紹介します。

ファイルの作成、保存

・ファイルの作成
「メニューバー>ファイル」から「新規作成を選択します。もしくは、キーボードの『Ctrl + N』を押します。

・ファイルの保存

「メニューバー>ファイル」から「上書き保存を選択します。もしくは、キーボードの『Ctrl + S』を押します。

 

文字列の検索

① ツールバーにある、目のマークの1番左をクリックします。(マウスを上に置くと、検索と文字が表示されます。)または、キーボードの『Ctrl + F』を押します。

 

検索したい文字を入力し、エンターキーを押すと検索対象の文字が黄色に変わります。

 

文字の一括変換

① ツールバーにある、目のマークの左から4番目をクリックします。(マウスを上に置くと、置換と文字が表示されます。)または、キーボードの『Ctrl + R』を押します。

 

② 置換したい文字を『置換前』に入力し、置換する文字を『置換後』に入力します。入力が完了したら、『すべて置換』を選択します。

 

③ 置換された文字が黄色に色付けされます。また、置換した数が表示されるので『OK』を選択します。

 

HTML/CSSファイルを作ってブラウザに表示しよう

実際に簡単なプログラムを書いて、ブラウザに表示させてみましょう

HTMLファイルの作成

① 以下のコードをサクラエディタ内に記述、もしくはコピー(Ctrl + C)して、貼り付け(Ctrl + V)してください。

ここでは、文法やタグなどの説明はしませんので、このようなものがあるという認識をして頂くだけで構いません。

<html>
    <head>
    <link type="text/css" rel="stylesheet" href="style.css" />
    <title>sample</title>
    </head>
    <body>

<header>
      </header>


<div>

<h1>tech-note&amp</h1>



ようこそtech-noteへ!

      </div>


<footer>
      </footer>

   </body>
</html>	

 

入力した画面がこちらです。

 

② 先ほど紹介しました、『ファイルの保存』の方法を行い、任意の場所に「任意の名前.html」というファイル名で保存してください。

ここでは、デスクトップに「index.html」という名前で保存しました。

 

③ 任意の場所に、先ほど保存したあファイルをダブルクリックすると、ブラウザに以下のように表示されれば成功です。

これでHTMLファイルの作成がおわりました。次にCSSファイルを作成します。

 

CSSファイルの作成

先程のHTMLファイルと同じ手順で作成していきましょう。

 

①「 簡単な利用方法」で紹介した方法で、ファイルを新規作成します。

 

② 以下のコードをサクラエディタ内に記述、もしくはコピー(Ctrl + C)して、貼り付け(Ctrl + V)してください。

ここでは、文法やタグなどの説明はしませんので、このようなものがあるという認識をして頂くだけで構いません。

header,footer{
	background-color:#e0ffef;
	height:60px;
	width:100%;
}
div{
    width: 930px;
    height: 450px;
    margin: 0 auto;
    background-color: #eff7ff;
    text-align: center;
    padding-top: 5px;
}
h1{
	font-size: 50px;
	color: #101d76;
}

 

入力した画面がこちらです。

 

③ 先ほど紹介しました、『ファイルの保存』の方法を行い、任意の場所に「任意の名前.css」というファイル名で保存してください。

ここでは、デスクトップに「style.css」という名前で保存しました。

※先程保存した「index.html」と同じ場所に保存してください。

これでファイルの準備は終了です。ブラウザで確認してみましょう。

 

ブラウザで確認

任意の場所に先ほど保存したhtmlファイルをダブルクリックし、ブラウザに以下のように表示されれば成功です。

 

さいごに

サクラエディタは、とても利用しやすく高性能な日本語のテキストエディタです。

テキストエディタ次第で、プログラミングは一気に作業効率が上がります!高性能なサクラエディタを使って、気軽にプログラミングを始めましょう!

・参考URL

サクラエディタの初期設定について、さらに詳しくはこちら

アイキャッチ画像出典 【くだらないページ】http://www.ku-da.net/tools/sakura-editor-icons.html

 

テキストエディタ関連記事を読みたい方はこちら

【徹底解説】「Atom」のインストール・日本語化 ・便利機能 for Mac

【Atom】開発が10倍捗る!おすすめ設定・パッケージ・ショートカットをご紹介

【初心者向け】高機能テキストエディタ Vim入門【設定など】

 

TECH::CAMPについて

TECH::CAMPは、講義形式で知識だけを学ぶのではなく、実際にサービスを作りながら実践的に学んでいきます。

TECH::CAMPならプログラミングが、なんとなく分かるではなく、一人で出来るようになります。

また、質問し放題のため、分からないところを質問しすぐに解決することで、どんどん新たなスキルをに見つけることができます。

この機会にプログラミングを学びませんか?

rgbtechnote2-01

堀瑞希 堀瑞希が書きました
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

プログラミングをもっと勉強してみませんか?

当メディアを運営しているプログラミングスクールTECH::CAMPの
お試しカリキュラムが、今なら無料でご覧いただけます!



    メールマガジン登録でTECH NOTEの最新情報とカリキュラムを受けることができます

SNSでもご購読できます。

  • カテゴリー
  • このエントリーをはてなブックマークに追加
    記事をシェア→

    満足度98%!無料プログラミング体験会!!×

    卒業生6000人以上のプログラミングスクール TECH::CAMPの説明会に参加!