『htmlファイル』はテキストファイルであることを知ろう

htmlファイルは、Windowsにあらかじめ入っているアプリ『メモ帳』で作ることができます。
メモ帳で作ることができるファイルを『テキストファイル』と言います。

メモ帳アプリでテキストファイルを作る

メモ帳はこのようなアイコンのファイルです。

見つからない場合は、検索エリアに『メモ帳(メモと書いただけでも出ます)』または『notepad』と入力することでも探せます。

※画像はWindows8の場合ですが、Windowsのどのバージョンでも、アプリ(ソフト)を探す検索窓はあります。

MACをお使いの方は『テキストエディット』等を使用してください。

メモ帳のアプリを開くと、このように真っ白の画面がまず出ます。

『こんにちわ』と入力してみてください。

そして、『ファイル』→ 『名前をつけて保存』

今回は保存先をデスクトップにしますので、デスクトップを選択、上のアドレスバーもデスクトップになっているか確認します。

ファイル名を、『hello.txt』にして(.txtの  の部分を書きかえます)
『文字コード』をUTF-8にして『保存』ボタンを押します。

文字コードとは
日本語は、もともとコンピューターの世界にない文字でした。その日本語を扱うために『Shift-JIS』や『EUC-JP』のように様々な形式がつくられ、使われてきました。ホームページ(ウェブサイト)の世界では、最近は『UTF-8』という、日本語だけでなく、世界中の文字(中国語・韓国語・タイ語・アラビア語・ロシア語等々・・)を表せる文字コードが主流になっています。皆さんがホームページを作る際、特に指定がない限りUTF-8にしておいてください。

保存したらいったん、メモ帳の画面は閉じてください。

デスクトップに『hello.txt』というファイルができています。
(出来ていない場合は、デスクトップ以外に保存してしまった可能性があります)

ノートのような、メモ帳のようなアイコンですよね?
(他のエディタを使用している場合は別のアイコンの場合があります)

これを一度ダブルクリックしてみてください。

さっきと同じように、メモ帳で開かれます。

このように、メモ帳で開いて文字が読めるファイルのことを『テキストファイル』と呼ぶことを覚えておいてください。テキストファイルの基本的な『拡張子』は『.txt』です。

拡張子とは

ファイルの名前のあとに『.txt』などのように『ピリオド&数文字の英数字』で表される、ファイルの種類を示すものです。
この拡張子で、ダブルクリックした時に開かれるファイルが決まっています。

拡張子が表示されない場合

WindowsやMACは初期状態だと拡張子が表示されません。
アイコンの絵で区別がつくから、ということですが、絵だけでは紛らわしいので拡張子は表示することをおすすめします。

拡張子の表示方法

エクスプローラーを開きます。(Windows8の場合)

通常はタスクバー(画面下)にアイコンがあります。

上側のタブから『表示』を選んで、『ファイル名拡張子』にチェックを入れると表示されるようになります。

Windows7の場合

コントロールパネル
→ デスクトップのカスタマイズ
→フォルダーオプション(エクスプローラーのオプション)

MACの場合

Finder → 環境設定 → 詳細

拡張子を『.txt』から『.html』に変更してみる

メモ帳の画面が開いていたら閉じて、hello.txtのアイコンを1回マウスでクリックします。
(ダブルクリックすると開いてしまうので、1回ですよ)

アイコンが選択された状態になります。

そうしたら、こんどはファイル名の部分(hello.txtと書いてある部分)を、また1回クリックします。

このように『hello』の部分だけが選択されると思います。

今回、修正したいのは、『hello』の部分ではなく『.txt』の部分なので、

マウスまたはキーボード操作などで、txtの部分を選択または消して。。

『hello.html』として、Enterキーを押してください。

すると

『拡張子を変更すると、ファイルが使えなくなる可能性があります。変更しますか?』と出ますが、今回は大丈夫なので『はい』を押します。

すると、アイコンが変身します。

ふだん、インターネットを見るアプリ(ソフト)である『e』のマークの『IE(インターネットエクスプローラー)』や『Edge(エッジ)』になるかと思います。
もしも、Google Chromeなどがすでに入っている方は、Chromeのアイコンかもしれません。

ブラウザとは:
インターネットを見るアプリ(ソフト)のことを『ブラウザ』と言います。
ブラウザとは、英語のブラウジング、閲覧するという意味のことばから来たものです。

このアイコンをクリックしてみてください。

いつもインターネットを見ている『ブラウザ』が立ち上がって、さきほどメモ帳に入力した「こんにちわ」という文字が見えるはずです。

HTMLファイルをメモ帳で開いてみる

拡張子を『.html』に変えてしまうと、ダブルクリックではブラウザが立ち上がってしまい、メモ帳で開くことが出来ません。
『.html』のファイルをメモ帳で開くためには・・

ファイル『hello.html』にカーソルを持っていき、、

右クリックして『プログラムから開く』→『メモ帳』を選択します。
(画像は他のアプリが入っているので、みなさんの画面とは若干違うかもしれません)

ドラッグ&ドロップで開く方法

『プログラムから開く』に表示されないときなど、別の方法でも開くことができます。

『メモ帳』アプリを新規に開いて、空白の状態にしておきます。

そこに『hello.html』のファイルをドラッグ&ドロップしても開きます。
すると、無事に「こんにちわ」とかいた画面が開きます。

このように、メモ帳で開いて読み書きできるファイルを『テキストファイル』といい、
ホームページを構成する『html』ファイルは、テキストファイルでできていることを知っておいてください。

ちなみに、テキストファイルじゃないものをメモ帳で開くと・・

テキストファイルではないファイルを、『バイナリファイル』と言います。
バイナリファイルは、画像や動画、ワードやエクセルなど、メモ帳ではひらくことができない、特定のプログラムが制御するファイルです。

バイナリファイルを無理やりメモ帳で開くこともできますが、人間が理解することができない意味不明の文字列になります。

※バイナリファイルをメモ帳で開くと、ファイルが壊れてしまう可能性がありますので、慣れていない方はやらないようにしましょう。

htmlファイルを作ってみようのまとめ

ホームページを作る『htmlファイル』は、メモ帳で見ることができる文字でできた『テキストファイル』です。

メモ帳でファイルを作ると、通常『.txt』と言う拡張子で保存されますが、拡張子を『.html』に変えることで『.html』ファイルとなり、ダブルクリックすると、インターネットを見るためのブラウザが立ち上がるようになります。

『html』ファイルになっても、ファイルはメモ帳で開くことができます。

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