WEBサイトってどんな仕組みで出来ているの？

WEBサイトは会社概要のページや商品・作品などを紹介するページ、お問い合わせのページ、そしてチセのサイトのようにブログ記事のページといった様々なWEBページが寄り集まった集合体のことを言います。

各WEBページとリンクすることができる為、見てくれるユーザーにそのサイトが紹介する会社やサービスの魅力についてより深く知ってもらうことができます。
また、雑誌やテレビでは一度出版したり放送したものを変更することができないものの、WEBサイトを構成するファイルを編集・更新することでよりユーザーが使いやすく、見やすいようにどんどんアップデートしていくことが可能です。

WEBページはHTMLファイル・CSSファイルといった複数のファイルで構成されており、それをサーバーにアップロードすることで私たちの目にこのように表示されているのですが——。
この記事ではどんなファイルでWEBページが構成されているのか、そしてファイルの種類と拡張子についてご紹介させていただきます。

【WEBコースコラム】HTMLとCSSとは？

HTMLファイル

HTMLファイルはWEBページそのものを表すファイルであり、GooglechromeやMicrosoftedgeといったWEBブラウザーがそれを読み込むことで表示してくれます。この記事の文章や画像はHTMLでコードを書いているからブラウザーに表示されているのです。

拡張子は「.html」もしくは「.htm」でどちらを使用しても構いませんが、リンク切れなどの問題が起きることもありますので同じWebサイト内で併用せずどちらかに統一しましょう。「.html」が今では一般的です。

※HTMLのみで記述されたサンプルサイト

CSSファイル

上記のHTMLファイルがWEBページを表すファイルなら、このCSSはWebページのスタイルを指定するためのファイルです。

HTMLだけではただの文章の羅列にすぎず非常に味気ないのですが、このCSSでレイアウトや文字の大きさに色などを指定することで、見た目を整えていくことができます。拡張子は「.css」です。CSSはスタイルシート言語というものの一種で、HTMLはマークアップ言語というのですが……。

どちらもコンピューターに「こういう風に表示してね」と指示を理解してもらう為に書いた文章(テキスト)のデータになります。

その為、メモ帳などのソフトでもHTMLやCSSを記述していけるのですが、より使いやすく高機能なテキストエディターと呼ばれるソフトを使うのが一般的です。

※先ほどのサンプルサイトにCSSをリンクしてレイアウトを整えたモノ

ファイルの拡張子について

ファイルにも様々な種類がありそれぞれ拡張子というものが与えられています。

拡張子とはファイルの末尾についている「.html」のような文字列のことを指し、拡張子があるからコンピューターはどのような種類のファイルなのか識別できています。

「〇〇(ファイル名).△△(拡張子)」という形であなたのPCにあるファイルも表示されているはずです。

テキストファイルの拡張子ならばメモ帳やテキストエディターを、画像ファイルの拡張子なら「フォト」を、動画ファイルなら「Windows Media Player」をといった具合に、拡張子によってファイルを開くのに使用するソフトを使い分けています。

この拡張子について理解することで、これまでイメージを掴めなかったwebやPC操作についてちょっとわかりやすくなってくるかと思いますので、よく使われるものに焦点を絞ってご紹介させていただきます。

テキストファイルを意味する拡張子

ただ文章が書かれただけのテキストデータが記述されただけのテキストファイルは「.txt」という拡張子がついています。メモ長で文章を書いて特に何も設定せずそのまま保存すればこの拡張子がついてテキストファイルとして保存されます。
HTMLやCSSを書いた場合はファイルを保存する際に「〇〇(ファイル名).html」や「〇〇(ファイル名).css」ときちんと拡張子をつけてあげて、HTMLやCSSのファイルであることをPCがわかるようにしてあげましょう。

画像データの種類と拡張子

画像データには主に「JPEG」「GIF」「PING」の3種類があります。それぞれ特徴についてご紹介させていただきます。

約1677万色の色を使用できるJPEG

JPEGファイルは写真やグラデーションなど細かい色調をもった画像に使用されます。

データをあまり劣化させずに圧縮することができる為、ファイルサイズを小さくできるので重宝されます。
ただし画質の劣化はデバイスに保存する度に生じてしまう為、色の少ないべた塗りの画像や劣化させたくない画像には「GIF」や「PNG」を使用します。JPEGの拡張子は「.jpeg」及び「.jpg」です。

アニメーションも作れるGIF

256色しか使えないものの色として"透明"を使用できる他、アニメーションGIFという動きのある画像データを作成できるのがGIFファイルの特徴です。
ただし、256色しか使えないため写真には向いておらず単色のアイコンやベタ塗りの画像に使用するとよいでしょう。拡張子は「.gif」になります。

画質の劣化が起きないPNG

これら二つのいいところどりの画像ファイルがPNGです。

約1677万色を使える上に"透明"を使用できる為、綺麗に写真を保存できる上に背景を透過することもできます。また、画質の劣化が起きないのも大きなメリットです。

しかし、ファイルサイズがJPEGよりも大きくなってしまうことが唯一のデメリットです。

WEBページを制作する上ではサーバーの容量や読み込みの速度なども考慮していかなければならない為、全ての画像をPNGにすればよいというわけではありません。拡張子は「.png」となります。

音声・動画データの種類と拡張子

音楽や声を録音した音声ファイルは主に「.mp3」を使用します。MP3ファイルは音楽鑑賞用にも広く使用されており、CDなどの音源もこれで収録されています。

動画のファイル形式にも幅広い種類があり再生できるソフトも形式によって限られてくるのですが、Webサイトに掲載する場合はWindowsとMacの両方で再生できるMP4を採用するのが主流です。拡張子は「.mp4」です。

まとめ

以上がWEBサイトを構成するファイルと、ファイルの種類と拡張子についてのお話となります。

もしPCやスマートフォンで見れない画像やファイルがあったとしたら、それは対応するソフト(アプリ)がないからかもしれませんのでお気を付けください。

今回の内容を簡潔にまとめさせていただきますと——

• WEBサイトは複数のWEBページの集合体。
• WEBページはHTMLファイル・CSSファイルを始めとした様々なファイルで構成されている。
• ファイルにも種類がありそれぞれ拡張子という目印がある。
• 画像にはJPEG・GIF・PNGの三種類が主に使用されておりそれぞれメリット・デメリットがある。
• 背景を透明化したい場合はPNGかGIFを使用。

これは失敗談なのですが、何も知らない頃に動画を編集して6時間かけてエンコードしてデータを動画ファイルへ変換し、YouTubeへ投稿しようとしたもののサポートされておらず投稿できなかったことが私にもあります。
またファイル形式を変えて何時間もかけてエンコードをやり直すことになってしまいました。



このように、YouTubeを始めとする動画投稿が可能なサイトでも形式によってはサポートされていないものもありますので、Web上にデータを投稿する際はファイル形式にお気を付けください。

もしWEB制作にご興味をお持ちの方はミライクチセの無料体験会を行っておりますので、ぜひこちらにお問い合わせください！