ホームページとブログの教室、第12回は、『テキストファイルとバイナリファイル』の違いを知り、『HTMLソース』とを確認してみます。
ご質問にお答えするコーナー
ご質問を頂きました。
Q.猫ちゃんの画像を貼ったやつをメモ帳で開いたら、画像が表示されないんですが・・・授業では見れたのに。。
授業で見たときは
このように見えたのに。。
家で『メモ帳』から開いたら
画像がない！
と言うご質問でした。
A. htmlファイルは、ブラウザで見てはじめて画像が表示されますので、それでよいのです。
ワードなどの、ワープロソフトをよく使っている方ほど、戸惑われるかもしれません。
『メモ帳』というアプリ内には、画像は埋め込まれないのです。
『Edge』、『Chrome』や、『Internet Explorer』などのブラウザ（インターネットを見るソフト）で開いて、画像を読み込んで表示しているのです。
＜img src=”・・・・”＞のようなタグは、画像の場所などを設定して、それをブラウザが解釈して表示させているのです。
また、ワードのファイル(docxなど)はワードでしか開けませんが（実は開けますがこのあとで、、）
htmlファイルは、『メモ帳ファイル』でなく、いろいろなアプリで開くことができる『テキストファイル』というもののひとつです。
今後、ホームページ制作を学んでいくと、メモ帳よりもっと便利なアプリをつかって『テキストファイル』を編集していきますのでお楽しみに。
本日のワンポイント：テキストファイルとバイナリファイル
コンピューターの『ファイル』は、実は２種類しかありません。
それは
- テキストファイル
と
- バイナリファイル
です。
詳しい説明は、非常に難しくなりますのでここでは簡単に・・・
メモ帳で開いて「読める」か「読めないか」の違いです。
htmlファイルなどの『テキストファイル』は、メモ帳で開けば、
このように人間の目で見ることができます。
ワードファイルなどの『バイナリファイル』の場合、ワードで見ると、このように見えて、印刷もその通りにできますが・・・
メモ帳で開くと・・・
（htmlファイルと同じ方法で開くことができますが、少しでも失敗するとファイルが壊れますのでご注意くださいね）
このように、意味不明の文字になります。
バイナリファイルは、コンピューターにしかわからない形式になっており、開くための特別なソフト（アプリ）でないと開くことができないファイルです。
たとえば、ワードファイルならワード、エクセルファイルならエクセルといったように。
そのかわり、バイナリファイルであるワードファイルは、画像も文字も埋め込むことができますので、もとの画像を消したり移動しても、画像は埋め込まれていますのできちんと表示されます。
テキストファイルであるhtmlファイルは、ブラウザで画像の場所を読み込んで表示しているだけなので、もとの画像を消したり移動すると、画像は表示されなくなってしまいます。
今、何のソフト（アプリ）で開いているかを常に意識してください
「授業では見れたのに」というのは、授業のときはブラウザで開いていたのです。
ダブルクリックすると自動で立ち上がるアプリは、あらかじめ決まっています。
アイコンをクリックすると、設定してあるアプリが自動で立ち上がります。
「ふだんはIEを使っているけれど、授業ではChromeで開きたい」
「htmlファイルはダブルクリックだとブラウザが立ち上がっちゃうけど、メモ帳で開きたい」
などが、自在にできるようになりましょうね。わからない場合は何度でも聞いてください。
本日のテーマその1『htmlソースを見てみる』
テキストファイルは、パソコンの中でメモ帳でつくったものだけではりません。
ブログもテキストファイルです。
前回までにつくったSeesaaのブログで確認してみます。
ブラウザから見るとこのようになっているブログ、
どこでもいいので、何もない所にマウスを持っていき、右クリック
『ページのソースを表示』を選びます。
※ブラウザによって、文言が異なる場合がありますが『ソース』を表示という意味合いのところを選択します。
するとずらずら～っと、文字がでてきます。
一見難しいですが、バイナリファイルのように意味不明の文字列ではなく、英語のような・・・何かが書かれているだろうなというのはおわかりいただけると思います。
基本は同じ『html』構造
第4回にもお伝えしました、ベースのhtml
第４回『Google Chromeで開く』『ZIPファイルを展開する』の、『HTMLの基本（ベース）』の項をご覧ください。
どんなに長い、難しいように見えるHTMLファイル（ソース）でも、基本はこの構造が必ず守られています。
先ほどのソースをよく見てみます。
＜!DOCTYPE からはじまり、
＜head＞・・
＜title＞記事のタイトル＜/title＞
＜/head＞の終わり。
＜body＞のはじまり
そしてずーーーっと下に行って
＜/body＞の終わりと
＜/html＞の終わり
※このページは、タグのカッコは全角で書いていますが、実際は半角で書きますよ。
html構造の基本
＜head＞＜/head＞の間は設定
＜body＞＜/body＞の間は目に見える部分（ブログの記事など）
です。
まずはこれだけしっかり押さえましょう。
スタイルシート事始め
メモ帳でhtmlファイルを作ってきましたが、htmlファイルでは、文字の色や、枠の幅などのデザインをすることはしません。（できるのですが、やりません）
デザインをつかさどるのは『スタイルシート（拡張子は.css）』です。
本日は少し、スタイルシートというものがどんなものか、ちょっとだけ見てみましょう。
seesaaブログで見てみます。
Seesaaブログの管理画面の『デザイン』というところをクリックします
『デザイン設定(CSS/HTML編集)コンテンツ』というところをクリックします。
自分が今選択しているデザイン（●になっているところ）のタイトル（この場合『シンプルＡホワイト右カラム』）をクリックします。
別のデザインを選択したり、設定を変えると全く違う見栄えになる場合があります。
そこがブログの良い点でもあります。
授業の画面と同じに進みたい方、自分で元に戻せる自信のない方は、もう一ブログをつくってそれで遊んでみてくださいネ。
これがスタイルシートです
枠の中が、デザインを設定しているスタイルシートになります。
また難しいのが出てきましたね？
htmlとはまた別の文法でできています。
こちらも奥が深いのですが、そんなに難しくない基本がわかれば、文字のサイズを変更したり、色を変えたりが自分でできるようになります。
おまけ：無料のOfficeソフト？
一番良く使われているMicrosoft（マイクロソフト）のOffice（オフィス）、以下MS-Officeについて、
WordやExccel（エクセル）などのことですね。
パソコンにもともと入っていることも多いので、たくさんの方が使っておられます。
ですが、MS-Officeは買えば２万円くらいします。
パソコンについてるのも、無料でついてるのではなく、２万円くらい高くなっています。
つまりMS-Officeなしのパソコンを買えば２万円くらい安いです。
もちろん、仕事でワードエクセル、パワポなどを使っている場合、MS-Officeじゃないとダメな部分があります。
また学生さんなんかも、正式なMS-Officeでないとレポートが書けなかったりしますよね。
ですが個人の方が、自分だけのための文章、町内のお知らせを作ったり簡単な見積書を作るくらいなら、無料のOfficeソフトで充分な場合があります。
かくいう私も、仕事でMS-Officeは使っていますが、自宅のメインパソコンにしか入れていません。
なんといっても、家族のパソコンとあわせて現役稼働中のパソコン7台ありますので、、全てに入れるのは大変です。
ですので、メイン以外は無料のオフィスソフトを入れています。
おすすめ無料Office
私が今使っているのは、OpenOfficeです。
また、Libre Officeというものも、使っています。
どちらでもいいです、迷ったらOpenOfficeのほうが普及しているのでそちらが良いのではと思います。
(Libreオフィスのほうがホームページはおしゃれですね？)
どちらも『.doc』拡張子で保存すれば、マイクロソフトのWordでも開けます。
（Excel形式なども同様）
・・・インストール方法、注意点などはまた折をみてお伝えいたします。
まとめ
- テキストファイルとバイナリファイルの違いについて見てみました。
- HTMLのソースの表示方法を知りました。
- ネット上のブログなども、HTML構造の基本が同じと言う事を学びました。
- デザインを設定する部分、CSSをちらっと見てみました。
次回は10月3日
次回は、スタイルシートの基本とブログデザインのカスタマイズについて扱う予定です。