ＨＰの作り方・はじめの一歩
ファイル形式？？？
さてさて、前の項目「メモ帳で出来ること」で作ってみたHTML形式で書かれた
文章。保存をして、ブラウザ上に実際に表示してみたいんですが、
HPの作り方を学ぶ上でここがまず第一の難関（？）なんです。
メモ帳で文章を作成したので、そのまんま保存してしまうと、
「メモ帳用の文章」になってしまうんです。
インターネットサイトとしてブラウザに認識してもらうためには、
「ファイル形式」を変更する必要があります。
初心者がほぼ必ずつまずくポイントがこの「ファイル形式」。
ほとんど普段気にしたことないと思いますが、すべてのPC上の保存ファイルには
「拡張子」と呼ばれる印がついているんです。（マイドキュメントでも何でも開いて、暇な人は見てみてください。）
すべて「ファイル名
.
拡張子名」という名前のつくりになっているはずです。
拡張子にはいろいろな種類があって、それぞれに役割があります。が、まあ細かい話は後に置いといて、
この拡張子
自分で勝手に変更できる
って、知ってました？
ちなみに管理人はまるで知りませんでした。
まずは先ほどつくったサンプルデータを、メモ帳で開いた状態にして、「ファイル」を選択。
「名前をつけて保存」を選んで、名前をつけて保存するわけなんですが、
そのまま単にファイル名を入れてしまうと
「ファイル名.txt」という拡張子がついてしまい、メモ帳でしか開けないファイルが完成してしまいます。
ただメモを取りたいときにはいいかもしれませんが、今はHPの作り方を学んでいるところなので、
コレでは何の意味もありません。
そこで！
この時、名前を「index.html」（インデックス・ドット・エイチティーエムエル）と入力してみてください。
ここで重要なのは、.html（ドット・エイチティーエムエル）の部分。indexの方はただのファイル名なので、
半角の英数字であれば別に何でも構いません。
左の図で
*txtとなっていたファイル名を index.htmlに打ち変えています。
（注＊半角の英数字じゃないとPC上では表示できても、インターネットサイト上でまともに動かないなんて事が起こります。まだまだ日本人向けじゃあないって感じなのね。）
この、.txt→.htmlと変更した部分がファイルの拡張子ってやつ。
意味を解説すると、ただのテキスト文書でしかなかったメモ帳専用の文字列を
HTML文書としてインターネットブラウザ上で表示できるよう性質を変えた・・・ということ。
うまくいっていれば、PCのフォルダ上の表示で、ファイルを表すアイコンが小文字の「e」をあらわす
インターネットエクスプローラーのロゴマークと同じ形に変化しているはず。これでファイルの完成です。
そのアイコン、クリックしてみてください。
ね？インターネットエクスプローラーのブラウザ画面が開いて、HPみたいに画面が開いたでしょ？
コレにいろいろと肉付けを行っていくのが、つまりHP作成ってわけなんです。
（macユーザーの方、申し訳ない。管理人はwin以外使ったことがないのです。ご容赦を・・・）
後におきっぱなしになっていた拡張子の性質について・・・
こんな感じです。（書き換えで性質を替えられるものも中にはありますが、基本的にはその拡張子に対応したルールに即して中身を替えなければいけないため、ま、参考程度に見て置いてください。）
ちなみに管理人もあまりに多すぎてよく分かっていません。とりあえず、専門の画像関係、それとこのサイトで触れているドキュメント関連の拡張子を乗っけておきますね。
次へ＞＞＞
拡張子リスト
| 名前 | 語源 | 種類 | 環境 |
|---|---|---|---|
| 解説 | |||
| 1 | 1 | ドキュメント | UNIX |
| manコマンドで読むマニュアルファイル。数字はセクション番号だろうか?8くらいまである。 | |||
| 1st | 1st(first) | ドキュメント | UNIX |
| 最初に読むべきファイルにこのような拡張子がついている。ほとんどの場合README.1stという名前のテキストファイルだ。 | |||
| css | Cascading Style Sheet | ドキュメント | all |
| HTMLファイルで外見を制御したい場合に使用するカスケーディングスタイルシート定義ファイル。 | |||
| doc | Document | ドキュメント | all |
| 普通のASCII形式のテキストファイル。この拡張子を使うワープロもあるので注意(Microsoft Word、OASYS等)。 | |||
| dochtml | Document HTML | ドキュメント | Windows |
| Microsoft Word HTML文書。わざわざ新しい拡張子をつけなくてもいいのではとも思えるが。 | |||
| dot | Document Template | ドキュメント | Windows |
| Microsoft Wordのドキュメントテンプレート | |||
| dothtml | Document Template HTML | ドキュメント | Windows |
| Microsoft Word HTMLテンプレート。おそらくdochtmlの原型だと思うが、この調子だとアプリケーションごとに数個の拡張子が増えてしまうだろう。 | |||
| dsssl | Document Style Semantics and Specification Language | ドキュメント | all |
| sが多すぎるように見えるが、3個で正しい。SGMLなどで使用するSchemeみたいな書式のスタイルシートファイル。XMLではこれの簡略版が使われる。 | |||
| dtd | d? tag? data? | ドキュメント | all |
| SGML、XMLのタグの関係を定義したDTDファイル。HTMLも無関係ではないが、HTMLでDTDファイルを使うことは普通ない。 | |||
| dvi | device view? | ドキュメント | all(特にUNIX) |
| TeXファイルからtexコマンドで（LaTeXならlatexコマンドで）作る。xdvi等でこのファイルを指定することでtexの印刷結果を画面に表示することが出来る。 | |||
| eml | ドキュメント | Windows | |
| 電子メールをファイル化したもの。Microsoft製のメーラーなどで使われている。 | |||
| en | English | ドキュメント | all |
| 中身が英語で書かれていることを示す拡張子。日本語版、英語版など、言語ごとにドキュメントが分かれているときに使われることがある(英語のドキュメントしかないときは普通使わない)。もちろんASCIIのテキストファイル。 | |||
| euc | euc | ドキュメント | all(特にUNIX) |
| テキストファイルを特に文字コードで区別したいときにはこのような拡張子が使われることもある。この場合はEUCコード。 | |||
| fdf | Adobe Acrobat Forms Document | ドキュメント | all |
| Adobe Acrobat関連のファイル。 | |||
| fdf | Adobe Acrobat Forms Document | ドキュメント | all |
| Adobe Acrobatのドキュメントファイル。 | |||
| htm | Hyper Text Markup Language | ドキュメント | all |
| html参照。 | |||
| html | Hyper Text Markup Language | ドキュメント | all |
| インターネットでWebページを書くときに使われる。SGMLを真似て作られたフォーマット。タグがある点を除けば普通のテキストファイル。SSI(サーバーサイドインクルード。サーバーがHTMLファイルを送る際にHTMLに埋め込まれたコマンドを実行してその出力結果で置き換える)を使用する場合は拡張子をshtmlにしなければならないこともある(サーバー次第)。 | |||
| htt | Hyper Text Markup Language Template | ドキュメント | Windows |
| HTMLのテンプレート。何かのアプリケーションからHTMLを生成する時に使う(ユーザーが選択する)テンプレートだと思う。 | |||
| info | info | ドキュメント | UNIX |
| infoコマンドで読むドキュメントファイル。info-1、info-2の様に連番がついていることもある。 | |||
| ja | Japanese | ドキュメント | all |
| 日本語でかかれたテキストファイル等にこういう拡張子がついていることがある。その場合は拡張子だけが違うファイル(英語など、他の言語で書かれているもの)も一緒に入っていると思う(enも参照)。 | |||
| jis | JIS | ドキュメント | all |
| テキストファイルを特に文字コードで区別したいときにはこのような拡張子が使われることもある。この場合はJISコード。 | |||
| man | Manual | ドキュメント | all |
| 各種マニュアルファイル。拡張子だけでは特定できない。UNIXならmanコマンドで見られるファイルかな? | |||
| nws | News | ドキュメント | Windows |
| Microsoft Outlook Expressなどで使われるネットニュースのメッセージファイル。 | |||
| Portable Document Format | ドキュメント | all | |
| Adobe Acrobatで作成された文書ファイル。読むだけならAcrobatReaderがAdobeのサイトからダウンロードできます。Webブラウザのプラグインとして使用することもできるようです。 | |||
| README | Read Me | ドキュメント | UNIX |
| いわゆるReadme.doc、Readme.txtだが、たまに「なんとか.README」というのもある。テキストファイル。 | |||
| rtf | Rich Text Format | ドキュメント | Windows |
| 書式付きテキストファイル。ヘルプ作成にも使う。 | |||
| sgml | Standard Generalize Markup Language | ドキュメント | all |
| HTMLの元になったフォーマット。HTMLよりはるかに厳格である。主に公式な文書の作成に使われている。 | |||
| shtml | SSI? Hyper Text Markup Language | ドキュメント | all |
| html参照。 | |||
| sj | Shift JIS | ドキュメント | all |
| シフトJISで書かれたテキストファイル。jis参照。 | |||
| sjis | Shift JIS | ドキュメント | all |
| シフトJISで書かれたテキストファイル。jis参照。 | |||
| tex | TEX | ドキュメント | all(特にUNIX) |
| TEX（テフと読む）と呼ばれるUNIXでは標準的（ある意味では唯一の）な組版フォーマット。このファイルから、dviファイル、psファイルを作成し印刷する。 他にLaTeX、AMS-TeXなど、簡略化されたものや拡張されたものもある。作者はKnuth氏。正しく表記する場合は、上記のようにEを下げるか、TeXとEを小文字で書く。 |
|||
| text | Text | ドキュメント | all |
| ごく一般的なテキストファイル。ASCII形式で、日本語の場合はJIS、EUC、SJISの3種類いずれかのコードで書かれているのが普通である。中にはunicodeもあるかもしれない。 これらが一つのファイル内で混じっていると文字化けは避けられない。 |
|||
| txt | Text | ドキュメント | all |
| text参照。 | |||
| wbk | Word Backup | ドキュメント | Windows |
| Microsoft Wordのバックアップファイル | |||
| wiz | Wizard? | ドキュメント | Windows |
| Microsoft Word ウィザード。 | |||
| wri | Write | ドキュメント | Windows |
| Windowsのwrite等で使われる形式。文字の修飾が可能。 | |||
| xml | Extensible Markup Language | ドキュメント | all |
| SGMLから生まれたHTMLより厳格なフォーマット。タグを自分で定義することができる。将来はHTMLからこちらに移行するという。Mozzlila5.0(Netscape Comunicator5.0)やInternetExplorer5.0ではXMLのエンジンが搭載されたらしい。 | |||
| xsl | Extensible Style Language | ドキュメント | all |
| XMLで使用するスタイルシートファイル。このファイル自体XMLのようにも見えるが、実際XMLの構文でスタイルが記述されている。 | |||
| 名前 | 語源 | 種類 | 環境 |
|---|---|---|---|
| 解説 | |||
| bmp | Microsoft Windows Device Independent Bitmap | 画像 | Windows |
| Windows標準画像フォーマット、1、4、8、24ビット対応。大抵圧縮されていない。ランレングスで圧縮したものもあるが、まず見かけない。また、何故か正式なランレングスとは別にVisualC++特有の圧縮ビットマップフォーマットもある。BMPはUNIXでも見かけるが、別物だろう(中身はXBMかも)。 | |||
| dib | Microsoft Windows Device Independent Bitmap | 画像 | Windows |
| bmp参照。 | |||
| fif | Fractal Image File? | 画像 | all |
| フラクタル圧縮された画像ファイル。元絵や圧縮率次第ではJPEGよりも圧縮率が高い(らしい)。ただし、圧縮には相当時間がかかることを覚悟しなければいけない。伸張はそれほど遅くないが、それでもJPEGより遅い。 | |||
| gif | Graphics Interchange Format | 画像 | all |
| ネットサーファーにはおなじみのGIF。最大256色をLZW圧縮している。複数のイメージを持たせてアニメーションさせたり、透過色を設定したりもできる。 注：当然ブラウザなりローダなりビューアなりが対応している必要がある。対応していないと、アニメーションの一コマ目しか表示されなかったりする。 絵が徐々に表示されていくインターレスGIFというものもある。多少画質が落ちる気もするが。実はこのフォーマットはUnisys社がライセンスを持つアルゴリズムを使用しているため、このフォーマットに対応したソフトを配布する場合はUnisys社にいくらか払わなければいけないらしい。そのため、ネットワークでのフリーなフォーマットとして、新たにPNGという画像ファイルがW3Cによって作られた。 |
|||
| img | image | 画像 | AtariST |
| GEMビットイメージ。GEMアプリケーションの画像ファイル。 | |||
| jfif | Joint Photographic Experts Group | 画像 | all |
| jpeg参照。 | |||
| jpe | Joint Photographic Experts Group | 画像 | all |
| jpeg参照。 | |||
| jpeg | Joint Photographic Experts Group | 画像 | all |
| Joint Photographic Experts
GroupとはISOとCCITTの合併グループ。Webページ上でもよく使われ、フルカラー画像ファイルでは最も普及したファイルだろう。基本的には非可逆圧縮で、人間の目に認識がしづらい情報をカットすることでより圧縮効率を高めている。絵が徐々に細かく表示されるプログレッシブJPEGというものもある。 ほとんどのものは離散コサイン変換（ＤＣＴ）、量子化、ハフマンエンコーディングの手順で圧縮されている。 |
|||
| jpg | Joint Photographic Experts Group | 画像 | all |
| jpeg参照。 | |||
| pbm | portable bitmap | 画像 | UNIX、DOS |
| 2値画像ファイル。他にもpgm、ppmなどがある。バイナリとテキストの2種類あり、ヘッダに大きさと1ピクセル当たりのバイト数。そして画像データが続いているだけの単純なもの。テキストの方はテキストエディタでも編集可能。ただしかさばる。pbmplusに各種フォーマットとの変換プログラムがある。ppmはDirectXでも使われるようだが、フォーマットを確かめたわけではないので、同じものかどうかは知らない(ちょっとみたところでは同じみたいだったが)。 | |||
| pcd | Photo CD | 画像 | all(CD-ROM) |
| PhotoCDの画像ファイルの拡張子。 | |||
| psd | Photoshop d? | 画像 | Macintosh、Windows |
| PhotoShopの標準的な画像ファイル。 | |||
メインメニュー
おすすめ情報
初心者向けのＨＴＭＬ本といえばコレ！元祖「できるシリーズ」の「できる ホームページＨＴＭＬ入門」ここでは紹介しきれない有用な情報が簡単便利にフルカラー写真つきで紹介されています。
管理人もひたすらコレにかじりついて戦ったものです