メインコンテンツへスキップ

テキストとは


1.かんたんな説明

テキストは、
「もじ(文字)」でできた
ことば や ぶんしょう のことです。

テキスト は、「もじ(文字)」でできた ことば や ぶんしょう のことです。 わたしたちがよく見る「にっき」や「メール」、そして「ホームページに書いてある文」も、テキストでできています。

でも、コンピューターテキストを「もじのならび」ではなく、「もじをあらわす番号(ばんごう)」としておぼえています。 たとえば、「あ」というもじは、コンピューターの中では「3042」という ばんごうで記録されています。

また、テキストは「え(絵)」とはちがって、ひとつひとつの文字として うごかしたり、けしたり、さがしたり できます。 だから、パソコンで文字をうったり、けしたり、コピペ(コピー&ペースト)できるのです。

この文書では、「テキストってなに?」「コンピューターはどうやって文字を見てるの?」ということを、すこしずつ わかりやすく説明していきます。 むずかしそうに思えるかもしれませんが、いっしょに見ていけば だいじょうぶです。


2.テキストとは

テキストは、
文字のデータ(文字列)のことです。

テキスト (TEXT)とは、 文字 ( もじ ) を使って書かれた 言葉 ( ことば ) 文章 ( ぶんしょう ) をまとめて呼ぶ言葉です。ふつうの会話でも、「教科書」や「文章」を「テキスト」と呼ぶことがあります。

コンピュータの世界でも「テキスト」という言葉はよく使われますが、ここでは少し違った意味で使われます。コンピュータでいう「テキスト」は、「文字データ文字列)」のことです。例えば、文章を書くときに使うメモ帳エディタで入力した文字が、それにあたります。

このような「文字データ」は、見た目や色などの情報はもたず、「なにの文字が、どんな順番で並んでいるか」だけを持っています。こうした、飾りのない文字データプレーンテキスト(plain text)とよびます。 そして、このテキストファイルとして保存したものがテキストファイルです。たとえば、.txtという名前のファイルがそれにあたります。

HTMLも、このようなテキストの一種です。ただし、HTMLは文字だけでなく、「これは見出しです」「ここはリンクです」など、文章の意味や構造をあらわすタグという特別な文字も含んでいます。

この文書では、まず「テキストとはなにか」を確認してから、HTMLのように「テキストにきまりごと(ルール)をのせたもの」が、どういうしくみで動いているのかを見ていきます。


3.文字データとは

文字データは、
文字が
コンピュータで
扱えるように
数値化された
情報のことです。

文字データ とは、「 文字 ( もじ ) 」がコンピュータで扱えるように数値化された情報のことです。

私達が「文字」として見ているものは、コンピュータの中では「形」ではなく「意味をもつ記号」として扱われます。そしてその記号には、それぞれ番号(コードポイント)が振られていて、「どの文字なのか」が区別できるようになっています。 この番号を文字コードと呼びます。

たとえば、「A」という文字には65U+0041)という番号(コードポイント)があり、「1」には49U+0031)という番号があり、「」には12354U+3042)という番号がついています。この番号によって、コンピュータは「どの文字か」を理解します。

文字は「記号」なので、数字も記号のひとつです。「1」「2」「3」なども、数値そのものではなく、数値を表す文字です。 また、空白(スペース)や改行も文字の一種です。たとえば、文章の区切りに入れる空白も、改行も、れっきとしたデータです。 「文字の間に空白を入れる」「行を分ける」というのは、見た目の装飾ではなく、空白や改行という文字データを追加していることになります。

なお、文字の「見た目」を決めているのはフォント(書体)です。フォントは、同じ「文字コード」をもとに、「どんな形で表示するか」を決めるものです。つまり、「文字そのもの」はコードで決まり、「どのように見えるか」はフォントによって変わります。

このように、「文字データ」はただの絵ではなく、「意味をもつ番号で表された記号のならび」である、ということをおさえておくことが大切です。

これは、画像データです。
描かれているのは文字ですが、ビットマップ画像(png形式)です。
<img>要素を用いて、画像ファイルを埋め込んで例示しています。

これは、文字です。
フォント等によって見え方が変わりますが、見た目ではなくてデータの形式の区別です。
画像との対比を意識して、CSSを用いて装飾もしています。

これは、プレーンテキストです。
<embed>要素を用いてテキストファイルを埋め込んでいます。
(「伝」の1文字だけのテキストファイルを用意して、例示しています。)

画像データを使う利点は、デザインの自由度が高いという点です。欠点は、データ量が多いという点と、情報の共通化が面倒という点だと思います。

例では、手書きで文字を書いていますが、ツールの機能で文字を書いたり、いろいろ加工も可能です。それ故に、何が出来るかという知識とかセンスが現れるので、難しいかもしれません。


4.電子データとは

電子データは、
コンピューターなどの
電子的な装置の中で扱われる
データ(記録された情報)のことです。

電子データ とは、コンピュータなどの電子的な装置の中で扱われるデータ(記録された情報)のことです。

コンピュータは、電気のオン・オフを高速に切りかえて処理を行う「電子回路」でできた機械です。パソコンスマートフォンも、基本的にはこのしくみで動いており、全ての情報は電気信号として記録・処理されています。

このような情報(データ)には大きく分けて2つの種類があります。

  • アナログデータ:連続的に変化する情報(たとえば音の波や光の明るさなど)
  • デジタルデータ:段階的に区切って表す情報(たとえば 0 と 1 のように)

コンピュータで使われるのは、主にデジタルデータです。 電気が「流れている=1」「流れていない=0」というように、2つの状態(2進数)で情報を表します。

この「0」と「1」の最小単位をビット(bit)と呼びます。 そして、8ビットで1バイト(Byte)という単位になります。 たとえば、「A」という文字は、1バイト(8ビット)で 01000001 といった形で表されます。

人間がこのままの形で読むのは大変なので、通常は16進数(0〜F)で表します。 例えば、01000001(2進数)= 41(16進数)です。

文字や数値など、全てのデータはこのような「0と1の並び(バイト列)」として記録されています。HTMLファイルも、見た目は文章ですが、実際には文字をコード番号に変換した数値列(バイト列)として保存されています。たとえば、「伝」という文字を保存する時も、そのままの形で保存されるのではなく、「Unicodeの何番の文字か」を示すコードに変換されて、バイト列として保存されます。

こうした数値の変換や扱いには「符号化(エンコーディング)」の知識が必要になります。HTMLやテキストファイルを扱うとき、「この文字はどのように記録されているのか?」という意識を持つことはとても大切です。


5.文字コードとは

文字コードは、
文字を
コンピュータで
扱うために、
それぞれの文字に
番号(コード)を
割り振ったものです。

文字コードとは、 文字 ( もじ ) コンピュータで扱うために、それぞれの文字に番号(コード)を割り振ったものです。

コンピュータの中では、「文字」はそのままの形では記録できません。 すべての文字は、「この文字は何番」といったように、番号(コードポイント)で表されます。 このしくみを定めたものが文字コード(character encoding)です。

例えば、アルファベットの「A」は 65、ひらがなの「あ」は 12354(U+3042)など、それぞれの文字に決まった番号が付いています。 こうして「意味をもつ記号=文字」を数値として扱えるようにすることで、文字もデジタルデータとして保存・通信・処理ができるようになります。

いろいろな文字コードの種類

文字コードには、いくつかの方式(文字の割り当て方・表現方法)があります。代表的なものには以下のようなものがあります。

  • ASCII(アスキー)コード:英語の基本的な文字(128文字)を扱う最も基本的な方式。
  • Shift_JIS(シフトJIS):日本語を扱うための方式。Windows環境などで長く使われてきました。
  • Unicode(ユニコード):世界中の文字を統一して扱うことを目指した方式。現在の主流。
  • UTF-8(ユーティーエフ・エイト):Unicodeをコンパクトに保存するための符号化方式(エンコーディング)のひとつ。

同じ「文字」でも、どの文字コードで保存するかによって、ファイルの中身(バイト列)は異なります。

文字化けとは?

文字コードが正しく使われていないと、「文字化け」が起きることがあります。 たとえば、Shift_JISで保存したファイルをUTF-8として開いてしまうと、本来の文字とはまったく違う文字が表示されたり、記号のようになってしまいます。

これは、「どの番号が、どの文字なのか」というルール文字コード)が、読み手と書き手で一致していないために起こります。 正しく読んでもらうには、「どの文字コードを使っているか」をはっきりさせておく必要があります。

HTMLでは、文字コードの指定を 要素で行います。たとえば、以下のように書くことで「このHTMLはUTF-8で書かれていますよ」と伝えることができます:
<meta charset="UTF-8">

ただし、実際のファイルがUTF-8で保存されていなければ意味がありません。 たとえば、見た目では上のように書いてあっても、保存形式がShift_JISのままだと、文字化けが発生します。

ファイルへの保存をする時の文字コードの選択(指定方法)は、テキストエディタなどのツールの機能に寄ります。

shift-jis サンプル」という、<meta charset="UTF-8"> と書きながら shift-jis で保存しているサンプルページも用意してあります。文字化けを意図的に想定したページなので、タグは認識される様に記述しているつもりです。

  1. <span id="JSP13511"></span>
  2. <script>
  3. document.getElementById("JSP13511").textContent = "¥u{4F1D}";
  4. </script>

「伝」という文字を例にしますが、シフトJISコード での文字コードは 9360 で、UTF16 での文字コードは 4F1D で、UTF8 での文字コードは E4BC9D です。(共に16進表記) 4F1D(16進表記)を2進数にしてみると、0100 1111 0001 1101 となり、 E4BC9D(16進表記)を2進数にしてみると、1110 0100 1011 1100 1001 1101 となります。ビットはこの様にオン・オフで連なったデータが保存されている訳です。

0100
1111
0001
1101
(4F1D)
1110
0100
1011
1100
1001
1101
(E4BC9D)

2進数表記を、オン・オフの図で CSSを用いてイメージしてみました。UTF16, UTF8 で符号化されていますというお約束事で、それぞれ「伝」と解釈して処理される訳です。

1110
0100
1011
1100
1001
1101

「伝」のUTF8 での文字コード 'E4BC9D' を、8ビット(1byte)毎に並べてみました。このオン・オフを穴が開いているか否かで表しているのがパンチカードです。なので、デジタルデータも紙媒体に記録できます。

1

0011
0001

Ā

1100
0100
1000
0000

1110
0100
1011
1100
1001
1101

UTF8 での、1バイト文字, 2バイト文字, 3バイト文字を例示してみました。

Unicode変換表
文字 10進数 16進数 2進数





6.テキストサンプル

HTMLを用いないで、
テキストでWebページを
作成してみたらという
サンプルを用意しました。

テキストサンプル」のページはこちらです。
HTMLの要素を極力用いないでテキストとしての見た目を例示する事を目的としたページです。
ほとんど<pre>要素(整形済みテキスト要素)を用いて表現しています。
本当のテキストファイルだと、ハイパーテキストでないので、ブラウザ「戻る」などを用いて頂かなければいけなくなるので、制御用に<a>要素(アンカー要素)を用いたくて HTMLでのテキスト表現というまわりくどい形をとりました。

比較の為の HTMLサンプルページもあります。

「戻る」など閲覧側の機能で移動して頂く必要がありますが、「テキストをHTML文書として扱う」, 「HTML文書をテキストとして扱う」もあります。それぞれ文字コードUTF-8 としていますが、エンコーディング宣言がないので文字化けするかもしれません。単なるサンプルデータなので無視してください。

テキストサンプル」のテキスト風のHTMLで作成したページを、ほぼそのままテキストファイルとしたWebページを用意してみました。テキストなので、リンクはありません。<iframe>要素を用いて提示させて頂いています。

「戻る」など閲覧側の機能で移動して頂く必要がありますが、そのファイルへのリンクは 「./sampletext.txt」です。


7.フォント

フォントは、
文字の
「かたち(見た目)」を決める
書体データのことです。

フォント (Font)とは、文字の「かたち(見た目)」を決める書体データのことです。

文字(キャラクタ)は、コンピュータの中では「意味をもつ記号」としてコード(番号)で保存されています。 しかし、その文字が画面にどう見えるか(描画されるか)は、フォント(書体)によって変わります。

例えば、同じ「A」という文字でも、

  • A: 丸みのあるデザイン(手書き風)
  • A: とがったデザイン(明朝体風)
  • A: 幅が均等(等幅フォント)
  • A: 幅が文字ごとに違う(プロポーショナルフォント)

など、見た目の印象がずいぶん変わります。

フォントの分類(ざっくり)

いくつかの代表的な種類があります:

  • serif(セリフ体):文字の端に「飾り(セリフ)」がついている。明朝体など。
  • sans-serif(サンセリフ体):飾りがない。ゴシック体やHelveticaなど。
  • monospace(等幅):すべての文字が同じ幅。コード表示などに向いている。
  • cursive(筆記体):手書き風の曲線を持つフォント。
  • fantasy(装飾フォント):装飾的・遊び心のあるフォント。

フォントの見た目は「閲覧環境」によって変わる

Webページなどで文字を表示する場合、作成者が指定したフォントが、閲覧者の環境に存在しないこともあります。 この場合、コンピューターは代わりに使えるフォント(代替フォント)を使って表示します。

そのため、見た目が意図と違ってしまうことがある、という点には注意が必要です。 どうしても特定のフォントを使ってほしい場合は、Webフォントを読み込んだり、画像で表現したりする必要があります。

同じサイズで、書体デザインの同じ活字の一揃い。現在ではコンピュータ画面に表示したり、紙面に印刷(書籍など)したりするために利用できるようにした書体データを意味している。
フォント - Wikipedia

以下は同じ文字(キャラクタ)データに異なるフォントを指定した例です。

漢字
ひらがな
カタカナ
ab12
ab12

漢字
ひらがな
カタカナ
ab12
ab12

漢字
ひらがな
カタカナ
ab12
ab12

漢字
ひらがな
カタカナ
ab12
ab12

漢字
ひらがな
カタカナ
ab12
ab12


漢字
ひらがな
カタカナ
ab12
ab12

漢字
ひらがな
カタカナ
ab12
ab12


漢字
ひらがな
カタカナ
ab12
ab12

漢字
ひらがな
カタカナ
ab12
ab12

漢字
ひらがな
カタカナ
ab12
ab12

漢字
ひらがな
カタカナ
ab12
ab12

上記の 'Dancing Script' は英字フォントの為、半角の英数字のみ反映しています。半角の英数字以外は cursive と指定しているので、その様に表示されています。この様に、全角と半角は別の文字です。

上記の 'Nico Moji plus', 'Dancing Script' は、サーバー側で用意しているので、一応どのブラウザでも同じに見えると思うのですが、 他のフォントは閲覧側の環境次第で見え方が異なります。 特に下の5つは、サーバー側で用意していないので、一部の方にしか意図した表記にならないと思います。