ホーム > ホームページ担当初心者講座 > ホームページの構成

ホームページの構成
~ホームページを構成しているファイルを知ろう~

概要

ホームページはさまざまなファイル・データによって構成されています。
何も「htmlを覚えてホームページを作れるようになりましょう」と言うつもりはありません。
ホームページ担当者であればホームページとはどんなファイルで成り立っているのか知っておきましょう。これを知っておくことで、業者との会話で、何を直すのか、何が原因なのかなど、正確に理解することができます。


html(エイチティーエムエル)

htmlとはホームページを作成するもっとも基本的なファイルです。ホームページを見る際このhtmlファイルを開いています。最低限これがないとホームページになりません。


どんなものかは見たほうが早いでしょう。右クリックから「ソースの表示」またはCtrl+Uを押してみましょう。

アルファベットの羅列が出てきたかと思います。これが「htmlソース」です。もう閉じてもらって結構です。


htmlは「メモ帳」でも作ることができますが、多くの場合専用ソフトを利用して効率的に作成しています。


htmlファイルだけでもホームページを作ることは可能です。

しかし、htmlファイルだけでは文字しかない、つまらないサイトになってしまうため、以下に紹介する様々なファイルを読み込んでいます。


CSS(シーエスエス)

CSSとはデザインを担っているファイルです。これがないとホームページはただの文字の羅列になってしまいます。


以下のようにCSSがあるかないかでこんなに違います。

CSSがある場合css_on.jpg CSSがない場合css_off.jpg


スマートフォン対応の場合、CSSを切り替えることで幅や、高さなど変更しています。


Javascript(ジャバスクリプト)

Javascriptとはホームページに仕掛けをするプログラミング言語です。


ホームページは通常、一度表示させると動かない・変化しないものですが、Javascriptを使うことでホームページを動かしたり、変化させることができます。


このサイトでいうと、トップページのスライドショー、右下の「上部へ」戻るボタン、上部の「小中大」ボタンなどがJavascriptを使った仕掛けとなっています。


Javascriptはユーザビリティ、使いやすさを考慮した仕掛けを設置する際に使うことが多いです。


PHP(ピーエイチピー)やPerl(パール)

PHPやPerlはホームページに仕掛けをするプログラミング言語です。拡張子としては.phpや.cgiとなっています。

多くの場合、Javascriptは単純な仕掛けのときに使いますが、PHPやPerlは複雑な仕掛けのときに使います。

身近なものだと主にメールフォームの処理などに使われています。


その他ホームページで使われるファイル

画像ファイル

画像ファイルとはjpg、gif、pngといった画像や写真のファイルのことです。「百聞は一見にしかず」という言葉通り、説明がわかりやすくなります。


PDFファイル

PDFファイルとは多くのブラウザ、パソコンで見る事ができる電子化されたファイルです。パソコン上で印刷されたファイルともいえます。

ExcelやWordのデータはそのソフトを持っていない人は見ることができませんが、そのデータをPDFファイルにすることで、誰でも見ることができるようになります。


ExcelやWordといったその他のデータ

ExcelやWordといったその他のデータもホームページ上からダウンロードさせることができます。

ただし、こういったデータはそのファイルを開くことができるソフトを持っていないと開くことができません。


ファイルに直接入力して送るなど、ExcelやWordデータでなければならない理由がある場合以外は避けましょう。

掲載するときは、PDFデータと一緒に掲載すると、ソフトを持っていないかたでも、印刷して手書きで送ることもできます。



構成イメージ

上記で説明したファイルはそれぞれが結びついてホームページとなっています。

以下の図は構成イメージ例です。

構成イメージ


上部へ