1.かんたんな説明
テキストは、
「もじ(文字)」でできた
ことば や ぶんしょう のことです。
テキスト は、「もじ(文字)」でできた ことば や ぶんしょう のことです。 わたしたちがよく見る「にっき」や「メール」、そして「ホームページに書いてある文」も、テキストでできています。
でも、コンピューターは テキストを「もじのならび」ではなく、「もじをあらわす番号(ばんごう)」としておぼえています。 たとえば、「あ」というもじは、コンピューターの中では「3042」という ばんごうで記録されています。
また、テキストは「え(絵)」とはちがって、ひとつひとつの文字として うごかしたり、けしたり、さがしたり できます。 だから、パソコンで文字をうったり、けしたり、コピペ(コピー&ペースト)できるのです。
この文書では、「テキストってなに?」「コンピューターはどうやって文字を見てるの?」ということを、すこしずつ わかりやすく説明していきます。 むずかしそうに思えるかもしれませんが、いっしょに見ていけば だいじょうぶです。
2.テキストとは
テキストは、
文字のデータ(文字列)のことです。
テキスト (TEXT)とは、 文字 を使って書かれた 言葉 や 文章 をまとめて呼ぶ言葉です。ふつうの会話でも、「教科書」や「文章」を「テキスト」と呼ぶことがあります。
コンピュータの世界でも「テキスト」という言葉はよく使われますが、ここでは少し違った意味で使われます。コンピュータでいう「テキスト」は、「文字のデータ(文字列)」のことです。例えば、文章を書くときに使うメモ帳やエディタで入力した文字が、それにあたります。
このような「文字のデータ」は、見た目や色などの情報はもたず、「なにの文字が、どんな順番で並んでいるか」だけを持っています。こうした、飾りのない文字.txt
という名前のファイルがそれにあたります。
HTMLも、このようなテキストの一種です。ただし、HTMLは文字だけでなく、「これは見出しです」「ここはリンクです」など、文章の意味や構造をあらわすタグという特別な文字も含んでいます。
この文書では、まず「テキストとはなにか」を確認してから、HTMLのように「テキストにきまりごと(ルール)をのせたもの」が、どういうしくみで動いているのかを見ていきます。
3.文字データとは
文字データは、
文字が
コンピュータで
扱えるように
数値化された
情報のことです。
文字
私達が「文字」として見ているものは、コンピュータの中では「形」ではなく「意味をもつ記号」として扱われます。そしてその記号には、それぞれ番号(コード
たとえば、「A
」という文字には65
(U+0041
)という番号(コード1
」には49
(U+0031
)という番号があり、「あ
」には12354
(U+3042
)という番号がついています。この番号によって、コンピュータは「どの文字か」を理解します。
文字は「記号」なので、数字も記号のひとつです。「1」「2」「3」なども、数値そのものではなく、数値を表す文字です。
また、空白(スペース)や改行も文字の一種です。たとえば、文章の区切りに入れる空白も、改行も、れっきとしたデータです。
「文字の間に空白を入れる」「行を分ける」というのは、見た目の装飾ではなく、空白や改行という文字
なお、文字の「見た目」を決めているのはフォント(書体)です。フォントは、同じ「文字
このように、「文字

これは、画像データです。
描かれているのは文字ですが、ビット
<img>
これは、文字です。
フォント等によって見え方が変わりますが、見た目ではなくてデータの形式の区別です。
画像との対比を意識して、CSSを用いて装飾もしています。
これは、プレーン
<embed>
(「伝」の1文字だけのテキスト
画像データを使う利点は、デザインの自由度が高いという点です。
例では、手書きで文字を書いていますが、ツールの機能で文字を書いたり、いろいろ加工も可能です。

4.電子データとは
電子データは、
コンピューターなどの
電子的な装置の中で扱われる
データ(記録された情報)のことです。
電子
コンピュータは、電気のオン・オフを高速に切りかえて処理を行う「電子回路」でできた機械です。パソコンやスマートフォンも、基本的にはこのしくみで動いており、全ての情報は電気信号として記録・処理されています。
このような情報(データ)には大きく分けて2つの種類があります。
- アナログ
データ :連続的に変化する情報(たとえば音の波や光の明るさなど) - デジタル
データ :段階的に区切って表す情報(たとえば 0 と 1 のように)
コンピュータで使われるのは、主にデジタル
この「0」と「1」の最小単位をビット(bit)と呼びます。 そして、8ビットで1バイト(Byte)という単位になります。 たとえば、「A」という文字は、1バイト(8ビット)で 01000001 といった形で表されます。
人間がこのままの形で読むのは大変なので、通常は16進数(0〜F)で表します。 例えば、01000001(2進数)= 41(16進数)です。
文字や数値など、全てのデータはこのような「0と1の並び(バイト列)」として記録されています。HTML
こうした数値の変換や扱いには「符号化(エンコーディング)」の知識が必要になります。HTMLやテキストファイルを扱うとき、「この文字はどのように記録されているのか?」という意識を持つことはとても大切です。
5.文字コードとは
文字コードは、
文字を
コンピュータで
扱うために、
それぞれの文字に
番号(コード)を
割り振ったものです。
文字
コンピュータの中では、「文字」はそのままの形では記録できません。
すべての文字は、「この文字は何番」といったように、番号(コード
例えば、アルファベットの「A」は 65、ひらがなの「あ」は 12354(U+3042)など、それぞれの文字に決まった番号が付いています。
こうして「意味をもつ記号=文字」を数値として扱えるようにすることで、文字もデジタル
いろいろな文字コードの種類
文字
- ASCII(アスキー)コード:英語の基本的な文字(128文字)を扱う最も基本的な方式。
- Shift_JIS(シフトJIS):日本語を扱うための方式。Windows環境などで長く使われてきました。
- Unicode(ユニコード):世界中の文字を統一して扱うことを目指した方式。現在の主流。
- UTF-8(ユーティーエフ・エイト):Unicodeをコンパクトに保存するための符号化方式(エンコーディング)のひとつ。
同じ「文字」でも、どの文字
文字化けとは?
文字
これは、「どの番号が、どの文字なのか」というルール(文字
HTMLでは、文字<meta charset="UTF-8">
ただし、実際のファイルがUTF-8で保存されていなければ意味がありません。 たとえば、見た目では上のように書いてあっても、保存形式がShift_JISのままだと、文字化けが発生します。
ファイルへの保存をする時の文字
「shift-jis サンプル」という、<meta charset=
と書きながら shift-jis
で保存しているサンプル
<span id=
"JSP13511"> </span> <script>
document
.getElementById( "JSP13511") .textContent = "¥u{4F1D}"; </script>
「伝」という文字を例にしますが、シフト9360
で、4F1D
で、E4BC9D
です。(共に16進表記)4F1D
(16進表記)を2進数にしてみると、0100 1111 0001 1101
となり、E4BC9D
(16進表記)を2進数にしてみると、1110 0100 1011 1100 1001 1101
となります。
2進数表記を、オン・オフの図で CSSを用いてイメージしてみました。
「伝」のUTF8 での文字コード 'E4BC9D
' を、8ビット(1byte)毎に並べてみました。
1
Ā
伝
UTF8 での、1バイト文字, 2バイト文字, 3バイト文字を例示してみました。
文字 | 10進数 | 16進数 | 2進数 |
---|---|---|---|
|
|||
|
|||
|
|||
|
6.テキストサンプル
HTMLを用いないで、
テキストでWebページを
作成してみたらという
サンプルを用意しました。
「テキスト
HTMLの要素を極力用いないでテキストとしての見た目を例示する事を目的としたページです。
ほとんど<pre>
本当のテキスト
比較の為の HTMLサンプルページもあります。
「戻る」など閲覧側の機能で移動して頂く必要がありますが、「テキストを
「テキスト
「戻る」など閲覧側の機能で移動して頂く必要がありますが、
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' は英字フォントの為、半角の英数字のみ反映しています。
上記の 'Nico Moji plus', 'Dancing Script' は、サーバー側で用意しているので、一応どのブラウザでも同じに見えると思うのですが、 他のフォントは閲覧側の環境次第で見え方が異なります。 特に下の5つは、サーバー側で用意していないので、一部の方にしか意図した表記にならないと思います。