[ 通常表示 ]  [ 簡易表示 ]  [ シンプル表示 ]

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典イメージぴよ画像「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

HTMLエディタ

pointこの用語のポイント

pointソフトだよ

pointHTMLファイルを編集するときに使うよ

pointHTMLファイル編集用の機能が付いたテキストエディタだよ

スポンサーリンク

簡単に書くよ

HTMLエディタとは

HTMLファイルの編集に特化した機能が付いているテキストエディタのこと。
もう少ざっくり書くと

HTMLファイル(ホームページのファイル)を編集するときに使うソフトのこと
です。

image piyo

詳しく書くよ

HTML(ファイル)」+「エディタ」で「HTMLエディタ」です。

HTMLエディタ

まずは予備知識から行きましょう。

HTMLは「ホームページを作るときに使う言語」ね。
ホームページのファイルの書き方ルールです。

このHTMLのルールに従って書かれたファイルを「HTMLファイル」と言います。
よく分からない人は、ホームページのファイルがHTMLファイルだと思ってください。

HTMLエディタ2

HTMLファイルは、HTMLのルールに沿って書かれた「テキストファイル(中身が文字だけのファイル)」です。

ここが大事なポイントです。
覚えておいてください。

HTMLファイルは

・中身がHTMLのルールに沿って書かれた
・テキストファイル


です。
テキストファイルなので、その気になれば、Windows付属の「メモ帳」でも、中を見て編集することができます。

HTMLエディタ3

ここまでがHTMLファイルの説明です。
次に「エディタ」について説明します。

エディタは「何かを編集するときに使うソフト」です。

HTMLエディタ4

例えば、テキストファイル(中身が文字だけのファイル)を編集するときに使うソフトは「テキストエディタ」と言います。

HTMLエディタ5

「○○エディタ」という表現が出てきたら「○○を編集するときに使うソフト」と読み替えてください。
それで意味は掴めるはずです

以上が予備知識です。

ここまでを踏まえて「ホームページのファイルを編集するときに使うソフト」が「HTMLエディタ」です。

HTMLエディタ6

先ほど、HTMLファイルはテキストファイルだと説明しました。
つまり

HTMLエディタはテキストエディタの仲間である

と言えます。
言い換えると

HTMLファイル編集用のテキストエディタがHTMLエディタ

です。

それでは、HTMLエディタと普通のテキストエディタでは何が違うのでしょう?

答えは簡単です。
HTMLエディタには、HTMLファイルの編集がやりやすくなる機能が付いているのです。

例えば、以下の内容が書かれているHTMLファイルがあったとしましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>テスト<title>
</head>
<body>

<span style="font-weight: bold;">名簿</span><br>
<table border="1">
    <tr><th>No.</th><th>名前</th></tr>
    <tr><td>1</td><td>ピヨ太</td></tr>
    <tr><td>2</td><td>ピヨ子</td></tr>
</table>

</body>
</html>


「<!DOCTYPE html>」のように「<」と「>」で囲まれている部分は目印です。
専門用語で「HTMLタグ」と言います。

このファイルをWebブラウザ(ホームページを見るときに使うソフト)で開くと、以下のように表示されます。

名簿

No.名前
1ピヨ太
2ピヨ子


見た目が表組っぽくなって表示されているはずです。
これは、Webブラウザさんの努力の賜物です。
HTMLタグ(目印)を解析して、それっぽく表示してくれました。

同じファイルをテキストエディタで開くと、以下のように表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>テスト<title>
</head>
<body>

<span style="font-weight: bold;">名簿</span><br>
<table border="1">
    <tr><th>No.</th><th>名前</th></tr>
    <tr><td>1</td><td>ピヨ太</td></tr>
    <tr><td>2</td><td>ピヨ子</td></tr>
</table>

</body>
</html>


今度は中身がそのまま表示されました。

さぁ、次はいよいよHTMLエディタの出番です。
HTMLエディタで開くと、例えば以下のように表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>テスト<title>
</head>
<body>

<span style="font-weight: bold;">名簿</span><br>
<table border="1">
    <tr><th>No.</th><th>名前</th></tr>
    <tr><td>1</td><td>ピヨ太</td></tr>
    <tr><td>2</td><td>ピヨ子</td></tr>
</table>

</body>
</html>


基本的には、中身がそのまま表示されています。
テキストエディタと同じです。
ただし、HTMLタグ(目印)と普通の文字が色分けされていますね。

普通のテキストエディタで開いたときの

<!DOCTYPE html>
<html lang="ja">
<head>
<title>テスト<title>
</head>
<body>

<span style="font-weight: bold;">名簿</span><br>
<table border="1">
    <tr><th>No.</th><th>名前</th></tr>
    <tr><td>1</td><td>ピヨ太</td></tr>
    <tr><td>2</td><td>ピヨ子</td></tr>
</table>

</body>
</html>


と、HTMLエディタで開いたときの

<!DOCTYPE html>
<html lang="ja">
<head>
<title>テスト<title>
</head>
<body>

<span style="font-weight: bold;">名簿</span><br>
<table border="1">
    <tr><th>No.</th><th>名前</th></tr>
    <tr><td>1</td><td>ピヨ太</td></tr>
    <tr><td>2</td><td>ピヨ子</td></tr>
</table>

</body>
</html>


を見比べてください。

HTMLエディタで開いたときの方が見やすくないですか?

見やすければ、それだけ編集するのも楽なはずです。
間違いも減るでしょう。

HTMLタグ(目印)に注目して表示内容を色分けしてくれるのは、HTMLエディタの持っている機能の一例です。
他にも、HTMLファイルを編集する上で役に立つあれやこれやの機能が、いろいろくっついています。

この「HTMLファイルを編集する上で役に立つあれやこれやの機能」がくっついたテキストエディタが、HTMLエディタです。

image piyo2

一言でまとめるよ

まぁ「HTMLエディタ」って単語が出てきたら「HTMLファイル編集用のソフトなんだな~」と、お考えください。

一番上に戻るよ
スポンサーリンク