WEBサイトの制作のために必要なテキストエディタをインストールする【HTML超入門2】

HTML/CSS入門

HTMLを書いていくためには、エディタ(文字を書くためのアプリ)が必ず必要となります。

[speech icon="https://www.uesei.net/wp-content/uploads/speech-img/girl.png" type="ln" name="A さん"] エディタだったら「メモ帳」あるよ![/speech]

実は、Windowsなら「メモ帳」、Macなら「テキストエディット」などの標準のアプリでHTMLを書いてしまうことはできてしまうのですが、そもそもが文字を入力するためだけの機能しかないので、HTMLやCSSを書くには、少し機能不足。

[speech icon="https://www.uesei.net/wp-content/uploads/speech-img/girl.png" type="ln" name="A さん"] じゃあ、WEBサイトを作るにあたって必要なことってなに?[/speech]

 

テキストエディタには、HTMLやCSS、その他言語を入力するための機能が豊富であることが必要

テキストエディタ

入力するにあたって、全部のタグをスペルまできっちり覚えていなかったり、そもそも単語自体がながくて入力が面倒だったりしても、入力を補完してくれたり、リアルタイムでチェックしてくれる機能がついていたりするものもあります。

また、見やすいようにキレイに整えてくれたり、開始タグを入力したら同時に終了タグも表示してくれるといった機能もあったりします。

また、たくさんあるファイルの中から特定の文字列を抽出できたり、それを置換したりする機能があったりするのは、非常に便利です。

 

最低、色分けやハイライトをしてくれているだけで、全然違う

色分けされたコード

通常は、AdobeのDreamweaverで作業をしているデザイナーでも、ちょっとコードを修正するだけって時には、サクッとエディターで、とかいう使い分けをしている方もいるようです。

そのような場合は、高機能なものは必要ないですが、やはり色分けだけでもされていないと、間違えたりすることもあります。

[speech icon="https://www.uesei.net/wp-content/uploads/speech-img/girl.png" type="ln" name="A さん"] 色分けされているだけなんだけど、重要なんですね![/speech]

 

うえせいがオススメする、WEBサイトを制作するためのテキストエディタ

サクラエディタ(Windowsのみ)

「サクラエディタ」は、2000年より開発が続けられている老舗の日本語テキストエディターで、商用・非商用を問わず無償で利用可能です。

日本で開発されているエディタだけに、安心して使用できる上に長く開発されているだけあって、ライターからプログラマーまで、幅広いニーズに応える非常に多機能なテキストエディターとなっているようです。

[speech icon="https://www.uesei.net/wp-content/uploads/speech-img/uesei.png" name="うえせい" type="rn"]うえせいは、Macユーザーなので、見た感じしか分からないですが(^_^;)[/speech]

▼「サクラエディタ」は、こちらからダウンロードできます。

 

SublimeText(Win・Mac両対応)

sublimetext

「SublimeText3」は海外製なんですが、最近使っている人がかなり多いようです。

「恋に落ちるテキストエディタ」というキャッチコピーが先行していて、面白いですね。

SublimeText3は、日本語化も可能になっていますし(完全ではありませんが)、プラグインが豊富にあって、自分仕様にどんどんカスタマイズしていけます。

[speech icon="https://www.uesei.net/wp-content/uploads/speech-img/uesei.png" name="うえせい" type="rn"]私も、Dreamweaverユーザーなので、極力同じように動作するようなカスタマイズをしています[/speech]

▼「SublimeText3」は、ここからダウンロードできます。

 
[speech icon="https://www.uesei.net/wp-content/uploads/speech-img/uesei.png" name="うえせい" type="ln"]うえせいは、サクラエディタを使ったことが無いので、「Sublime Text」のことを解説しますね。[/speech]

 

「SublimeText3」のインストールから、日本語化まで

SublimeText3
インストール自体は、前述してあるサイトからWindowsとかMacとかを選択して、ダウンロード。
あとは、展開していくだけで終了という簡単なものなんですが、日本語化と必要なプラグインをインストールするところあたりが、少し初心者の方にはややこしいかもしれませんね。

私うえせいが、詳しく解説しようかと思ったのですが、SAMURAIというサイトの「GIF付解説!恋に落ちるエディタ、SublimeText3の使い方/日本語化/設定方法まとめ」という記事がとても、よくできているので、この記事を参考にして、インストールから日本語化までを行ってください。

 

「SublimeText3」のプラグイン

SublimeTextの良さとして、プラグインが豊富にあって必要な機能をインストールしていくことによって、簡単に自分好みにしていけいることです。

寝ログさんの「WordPress開発がサクサク捗るSublime Textおすすめパッケージ30個まとめ」という記事で、たくさん紹介されていますので、必要なものはインストールしておきましょう

 

【まとめ】他にもテキストエディタはありますので、好みのものを使ってください

うえせいイラスト
私うえせいも、英語がちょっと苦手意識があって、以前はMac用の日本語になっている「Coteditor」というアプリケーションを使っていました。

しかし知人から「SublimeText」を進められて使ってみたら、機能も豊富で使いやすかったというのもあって今は愛用しています。

ただ、みなさん好みで使われているようなので、「SublimeText」が合わなっかたら、別のものを試してみてくださいね。

では、また。最後まで読んでくれてテリマカシ。

【関連記事】検索もしくは上下矢印キーを使って項目を選択してください。 ホームページが表示される仕組みを知る【HTML超入門】

【関連記事】SEO(検索エンジン対策)の問題点は、ブログのソースコード(HTML)を確認すると見えてくる

【関連記事】AddQuicktag 予めよく使うHTML雛形を登録しておくと、記事作成が楽になるWordPressプラグイン