ホームページファイルの種類

ホームページで使用するファイルの種類には、HTMLやCSS(スタイルシート)をはじめとして、画像のjpgやpng、あるいはプログラムのcgiやphp、または.htaccessやrobots.txt、sitemap.xmlなど様々な種類があります。

このなかで、最低限、「HTMLファイル」さえあれば機能しますが、通常はCSSや画像ファイルなども使用されています。

主要なホームページファイルの3種類

無料ホームページで作成する場合、以下のファイルがあれば、とりあえずは必要十分といえるでしょう。

  • htmlファイル(.html)  重要度:☆☆☆☆☆
  • cssファイル(.css)    重要度:☆☆☆☆
  • 画像ファイル(.jpg)   重要度:☆☆

まず、HTMLファイルについてですが、HTMLタグを使用しながら、文章などのコンテンツの部分を記述していくファイルになります。拡張子は「.html」です。
このHTMLタグを使うには多少の知識が必要になりますが、使用頻度の高いタグさえ習得してしまえば、最低限のホームページは作れるようになります。

次に重要なのがCSSファイルですが、これはスタイルシートと言われており、サイトのデザインの部分を記述するファイルになります。文字の大きさや色彩、あるいは行間や余白などを指定します。拡張子は「.css」です。

HTMLファイルだけでもデザインの記述はできますので、必ずしもこのCSSファイルは必要ではありませんが、html上にデザインまで指定すると膨大な量の記述となってしまうため、スタイルシートで一括して指定することが推奨されています。

次に画像や素材のイメージファイルですが、拡張子は「.jpg」や「.png」、あるいは「.gif」などがあり、画像の種類によって違いがあります。

おおまかにいって、デジカメなどで写真撮影した画像は.jpg、動きのあるアニメーション画像は.gif、その他のキャプチャー画像などは.pngが使用されているケースが多いです。

これらの画像ファイルをホームページスペースにアップロードして、サイトに添付したり、背景素材としてスタイルシートに設定して使用します。

重要なのはHTMLファイルとCSSファイル

HTMLファイル

これら3つのファイルのうちで一番大切なのはHTMLファイルです。検索エンジンは画像やデザインの良しあしまでは理解できませんので、主にクロールするのは文章が記述されているHTMLファイルがメインになります。

例えば、このページのHTMLファイルはこのようになっています。

このページのHTMLファイル

閲覧しているページのhtmlソースを見るには、ブラウザの「ソースの表示」をクリックすると見ることができます。

(IEやfirefoxなどで「表示」タブの「ソース」を選択、もしくは右クリックで「ページのソースを表示」を選択。)

このなかで、文章を囲んでいる<div>や<p>などがhtmlタグとよばれるもので、このようなタグを使用しながら、HTMLファイルを作成していきます。

CSSファイル

それに対して、cssファイルには文章やコンテンツなどの記述はなく、0pxや#000000;などの数字を使用して、文字の大きさや色彩などが指定されています。

このホームページのCSSファイル

colorなどと書かれているのが色彩の指定、paddingが余白幅、text-alignが中央揃えとか左揃えなどの指定になります。

このCSSファイルを閲覧するには、まず上記の方法でHTMLソースを表示させ、その上部の link rel="stylesheet で指定されているファイルを参照すると見ることができます。

例えば、このページで使用するスタイルシートはこのように指定されているので、

<link rel="stylesheet" href="/entry-new.css" type="text/css" />

こちらのファイルがスタイルシートになります。

http://www.homepage-tukurikata.com/entry-new.css

まずは、トップページのhtmlファイルとcssファイルだけでも作成すれば、とりあえずはサイトが表示されるようになります。