あそびラボ

お問い合わせ

MENU

あそびラボ

お気軽にご相談ください

  • 03-6905-8103
  • 受付時間:平日10:00-18:00

ご相談・お問い合わせ

講座8 テキストエディターについて(番外編)

WEB講座

ふくろう先生
ふくろう先生

今回は番外編ということで、
テキストエディターについてちょこっと触れておくぞよ。

パンちゃん
パンちゃん

テキストエディターってメモ帳じゃダメなんですか?

ふくろう先生
ふくろう先生

よい質問じゃ!

もちろんダメという事は無いが、
HTMLやCSSを書くのならメモ帳よりも使いやすい、
コーディングに特化した物があるのじゃ。

パンちゃん
パンちゃん

なるほど!

でも、そんな便利な物があるなら、
なんでもっと早く教えてくれなかったんですか?

ふくろう先生
ふくろう先生

それでは、見ていこう!

コーディングに特化したエディターを使うメリット

確かにメモ帳でもHTMLを書くことはできるのですが、記述量が膨大になってくるとタグを打つのが面倒だったり、
管理するのが手間になったりと、イマイチ効率が良くありません。
そんな問題をほぼ全て解決すると言っても過言ではないのが、コーディングに特化したエディターです。

■HTMLタグの自動補完
<h1>~</h1>、<p>~</p>、<div>~</div>などよく使うタグを、
いちいち手打ちしなくても一発で補完入力してくれます。

■コードヒント
HTMLのタグやCSSプロパティの頭文字だけ入力すると、
それに付随する選択肢(コードヒント)がズラッと出てきます。

■ライブプレビュー
初めての方は聞きなれない単語かもしれませんが、
読んで字の如く現在打っているHTML・CSSの姿形をリアルタイムで表示・確認できる機能です。

■単純に見やすい・使いやすい
前述したとおり記述量が膨大になってくると、タグやプロパティが見づらく管理が大変になります。
コーディングに特化したエディターでは、タグやプロパティが色分けされていたり
少しでも管理しやすくなるよう作られているので、
それだけでも見落としやケアレスミスをぐっと減らすことができます。

無料で使えるテキストエディター

ふくろう先生による独断と偏見ですのでご了承ください。
(順不同ですので特に優劣を助長するものではありません。)

■Brackets(ブラケッツ)
言わずと知れたAdobe社から提供されているテキストエディターです。
基本的な機能は備わっており標準的で使いやすく初心者の方にもオススメです。
拡張プラグインと呼ばれる物を各々で追加していき、自由にカスタマイズすることが可能です。

■Atom(アトム)
Github社(ギットハブ)から提供されているテキストエディターです。
こちらも無料で使える上、使い方を解説しているサイトが沢山あるので初心者にオススメです。
基本的な機能もばっちりと備わっており、とても使いやすく快適にコーディングすることが可能です。

■Visual Studio Code(ヴィジュアルスタジオコード)
あのMicrosoft社(マイクロソフト)から提供されているテキストエディターです。
JavaScriptを始めとする様々な言語に対応していて、初心者から上級者まで幅広い層にオススメです。
特にタグ打ちの自動補完機能は素晴らしく、一度は体験する価値があるかもしれません。

この他にもまだまだ沢山のテキストエディターがあるので、
色々なサイトを参考にして自分にあった物を見つけてください。
それではまた次回(^_^)/~

パンちゃん
パンちゃん

すごい!

テキストエディターってこんなに便利なんですね。

ふくろう先生
ふくろう先生

一度味わってしまうと、もうメモ帳には戻れんじゃろ?

これでさらにHTMLとCSSの勉強を頑張るのじゃぞ。

パンちゃん
パンちゃん

はい!頑張ります。

ところで、さっきも聞いたんですけど
なんで今まで教えてくれなかったんですか?

ふくろう先生
ふくろう先生

何事も初めが肝心なのじゃ。

最初のうちは面倒でも、一つ一つパンちゃんの手で
練習して欲しいと思ったからじゃ。

パンちゃん
パンちゃん

先生…!

ふくろう先生
ふくろう先生

…うむ(危なかったのじゃ…。)

へっぽこ Web講座一覧へ

池袋・練馬近郊でホームページ制作の
ご相談をされたい方はこちら ▶