テキストエディタとは?

ITリテラシー学習
ITリテラシー学習

WEBサイト制作に欠かせない、文字を入力するために役立つツールについて説明します。

テキストエディタとは

テキストエディタとは、文字を入力するためのツールです。Windowsには「メモ帳」、Macにはデフォルトで「テキストエディット」というテキストエディタのアプリケーションがインストールされています。メモ帳などのアプリケーションでもWEBサイトを制作することは可能です。しかし、プログラミングに特化したテキストエディタも存在します。このような専用テキストエディタは、Webページを制作する上で役に立つ様々な機能が備えられています。

テキストエディタの特徴

プログラミングに特化したテキストエディタによく備わっている機能を紹介します。

(1)コードの予測変換機能
(2)ショートカットキーや良く使用するコードを自ら登録する機能
(3)文字色やの自動着色(またフォント変更により間違えがちな「1(いち)」と「l(エル)」や「0(ゼロ)」と「o(オー)」を区別する等)

(4)文字列の置換機能(正規表現を用いた高度な変換など)
*正規表現については別講座で紹介
参考記事:https://qiita.com/soarflat/items/2b50c1efe2ea54a762d7

このように、プログラミングに適したテキストエディタは、htmlやその他プログラミング言語をより正確に/より素早く記述することに役立ちます。早速使ってみましょう。

*HTMLを作成~編集する際ためには、HTML編集に対応したテキストエディタをダウンロードする必要があります。
*あるいはブラウザ上で動作するエミュレーター等を用いてご参考ください。
エミュレーターサービス例)

http://www.trancedive.com/contents/tools/html_emulator/index.html

ダウンロード可能な場合はテキストエディタをご自身のPC環境へインストールしてください。

#推奨ツール1. Sublime Text
https://www.sublimetext.com/3

#推奨ツール2. Tera Pad
https://tera-net.com/library/tpad.html

参考記事:https://www.sejuku.net/blog/10128

テキストエディタの種類

テキストエディタには様々な種類があります。
・Atom
・TeraPad
・Sublime Text
・秀丸エディタ
・サクラエディタ
・Vim
・EmEditor
・Adobe Brackets
etc

テキストエディタの選び方

各テキストエディタはそれぞれ機能や使いやすさ、対応OSや費用(有料・無料)などが異なります。
どのテキストエディタも重要な基本的機能は大きく変わらないため、いくつか試した上で自分に合ったテキストエディタを使用しましょう。

参考記事:https://www.sejuku.net/blog/10128

*HTMLを作成~編集する際にはHTML作成に対応したメモ帳をダウンロードする必要があります。
以下サービスなど参考いただき、ご自身のPC環境へインストールしてください。

#推奨ツール1. Sublime Text
https://www.sublimetext.com/3
#推奨ツール2. Tera Pad
https://tera-net.com/library/tpad.html

HTMLファイルの作り方

(1)テキストエディタを開いてください。画像はAtom(Mac)になります。

(2)新規ファイルにて保存してください。ファイル名はtest.htmlとしてください。

(3)下記のコードをコピー&ペーストでテキストエディタに貼り付けてください。

1  <!DOCTYPE HTML>
2  <html lang="ja">
3  
4  <head>
5  <meta charset="utf-8">
6  <title>Hello World</title>
7  </head>
8  
9  <body>
10  <h1>Hello World</h1>
11  </body>
12
13  </html>


(4)ブラウザにtest.htmlファイルをドラッグ&ドロップしてください。

Hello Worldと表示されると成功です。このように、Webサイトはテキストデータをブラウザで読み込んで表示されています。

POINT

Webサイトはテキストデータをブラウザで読み込んで表示されています。

menter_logo

[転職希望者限定]
『MENTER PERSONAL』
3ヶ月間 0円キャンペーン!!

「MENTER PERSONAL (メンターパーソナル)」は、ITスキルを身につけることでこれまで未経験であった職種への転職、副業、独立、スキルアップを支援するサービスです。
転職希望者に限り3ヶ月間サービスを0円でご利用頂けるキャンペーンを実施中!

*教材/リモート面談/転職支援サービスを提供
*キャンペーン適用条件1:WHITE㈱の転職支援サービス利用
*キャンペーン適用条件2:期間内に指定カリキュラムの受講
*適用条件に満たない場合はサービス提供中断させて頂く場合がございます(料金請求することはありませんのでご安心ください)

店舗販売員、飲食業などオフィスワーク未経験から転職も。
サービス詳細や転職成功者のストーリーを‍見る
*お問い合わせ時に「ブログを見た」と備考欄に入力ください。

menter_logo

[法人向け]
文系DX人材育成なら『MENTER』

「うちの会社はITリテラシーが低い...」
「DXを行うには人材育成から始めなくては...」
「自動化やAI理解できる社員が増えたらな...」

デジタルに強い人材育成を行うオンライン学習サービス『MENTER』が、そんなお悩みを解決します!

・マンガで楽しくインターネットについて学習
・ショートカットキーからAIの設計まで
・大手企業の導入事例/成功事例あり
・DX人材育成について相談/事例集請求/無料トライアル/ITリテラシー無料診断可能

MENTER紹介ページを‍見る
お問い合わせは ‍こちら

ITスキルアップ相談室

コメント

タイトルとURLをコピーしました