HTMLやCSSを使い、Webサイトの更新・修正をしていると、「なぜこう書く？」「この書き方で合っている？」と思うことはありませんか。この連載では、書籍『スラスラわかる HTML&CSSのきほん』の著者・狩野 祐東さんがそれらについて解説。ちょっと人には聞きづらい、と思うような「基礎の話」もご紹介します。作業の困った！が解決されますように。
また、記事の最後には書籍プレゼントのお知らせも！ぜひ最後までご覧ください。
UIデザイナー、エンジニア、書籍著者。アメリカ・サンフランシスコでUIデザイン理論を学ぶ。帰国後会社勤務を経てフリーランス。2016年に株式会社Studio947を設立。Webサイトやアプリケーションのインターフェースデザイン、インタラクティブコンテンツの開発を数多く手がける。各種セミナーや研修講師としても活動中。著書に『スラスラわかるHTML&CSSのきほん』『これからのJavaScriptの教科書』(SBクリエイティブ)『WordPressデザインレシピ集』 (技術評論社)など多数。 https://studio947.net
Webサイトの更新を担当することに。なにから始めればいい？
Webサイトの更新をする場合、実際に作業を始める前に、「どこの、なにを編集すればよいのか」をはじめに確認する必要があります。
もし、Webサイトがコンテンツ管理システム（CMS、専用の管理画面からコンテンツを投稿するシステム）で構築されているなら、管理画面にログインし、コンテンツを編集すればよいので、それほど心配することはないでしょう。
しかし、Webサイトが静的に作られている、つまり、HTMLファイルやCSSファイル、画像ファイルで構成されていて、管理画面がない場合、それらのファイルを直接編集しなければなりません。
今回は、静的に作られているWebサイトがどんなファイルで構成されているかを解説します。
- WebサイトとWebページの違い
- 常に拡張子は表示しておこう
■拡張子を表示する方法（Windows 11） - Webサイトを構成するファイルを確認しよう
- ファイルの種類と役割を知っておこう
■HTMLファイル
■CSSファイル
■JavaScriptファイル
■画像ファイル
■その他のファイル
1.WebサイトとWebページの違い
Webサイト、Webページ、ホームページ……。ふだん何気なく使っているかもしれませんが、ここで、これらの用語の意味を確認しておきましょう。
■Webページ
Webページとは、Google ChromeやSafari、Microsoft EdgeなどのWebブラウザーに表示される、まさしく「ページ」のことです。1枚1枚のページをそれぞれ「Webページ」と呼びます。省略して単に「ページ」と呼ぶこともあります。
▲Webページとは、Webブラウザーに表示される1ページ1ページのこと。これはPCのブラウザーで表示した例
▲Webページをスマートフォンで表示した例
1つのWebページには、必ず、固有の「URL」がつきます。URLとはWebブラウザーのアドレスバーに表示される、「https://」（または「http://」）で始まり、ところどころスラッシュ（/）で区切られている文字列（複数の文字の連なり）のことです。このURLは、Webページがインターネット上のどこに保存されているかを示す「アドレス」の役割を果たしています。
▲URLの例。PCのWebブラウザー（Chrome）
■Webサイト
Webサイトとは、会社や組織、または個人が公開する「Webページの集まり」を指します。同じ組織が公開している複数のWebページをまとめて「Webサイト」と呼ぶ、と考えてかまいません。Webサイトのことを「ホームページ」と呼ぶこともあります。
通常、1つのWebサイトは、同じドメインで公開されます。ドメインとは、URLの「//」より後ろで、最初に出てくる「/」の前までの部分のことをいいます。ドメインは、会社や組織などが、自分たちだけが占有して使えるように、ドメイン管理団体に登録しています。
▲URLのうち、「//」より後ろで、最初の「/」までをドメインという。現在のWebブラウザーは、「https://」の部分など、URLの一部を省略して表示するものがある。省略されている場合は、アドレスバーのURLを何度かクリックすると、正式なものを確認できる
先に紹介したURLやドメインについては、この連載でのちほどもう少し詳しく説明する予定です。
2.常に拡張子は表示しておこう
Webサイトの更新をするために、最低限知っておきたい用語を紹介しました。ここからは、実際に更新作業をするためのPCの設定と、Webサイトでよく使われるファイルの種類を説明します。
1つのWebサイトは、たくさんのファイルで構成されています。Webサイトで使用するファイルにはHTMLファイル、CSSファイル、画像ファイルなどがあり、それぞれに役割があるため、「どの種類のファイルか」を把握する必要があります。
ファイルの種類を判別するのに役立つのが、「拡張子」です。ファイルの最後についている、「.txt」のような、ドット（.）で始まる文字列のことをいいます。拡張子は、どんな種類のファイルなのかを示しています。
Webサイトでは、ファイルの種類を調べたり、リンクをしたりするのに、ファイルについている拡張子を知っている必要があります。そこでまずは、作業に使うPCの設定を変更して、ファイルの拡張子が表示されるようにしましょう。
■拡張子を表示する方法（Windows 11）
Windowsの初期設定では、ファイルの拡張子は非表示になっています。
拡張子を表示する場合は、エクスプローラーを開き、ウィンドウのメニューにある［表示］─［表示］─［ファイル名拡張子］の順にクリックします。ファイルの拡張子が表示されるようになります。
▲拡張子を表示する方法
3.Webサイトを構成するファイルを確認しよう
公開されているWebサイトのすべてのデータは、「Webサーバー」と呼ばれるインターネット上のコンピューターにアップロードされています。
Webサイトを更新するときは、Webサーバーにアップロードされているファイルを直接編集せず、アップロードする前のデータを編集するのが一般的です。アップロードされているファイルを直接編集してしまうと、その場でどんどんインターネット上に公開されてしまうからです。
もし、更新したテキストに誤字が残っていたり、編集の仕方を間違えてページのレイアウトが崩れてしまったりすると、その状態で公開されてしまいます。それはちょっとまずいので、きちんと確認してから公開したいですよね。
そこで、更新作業を始める前に、Webサーバーにアップロードする前のデータを、作業用のPCにコピーしておきましょう。ファイルがどこにあるかわからない場合は、知っている人に聞きましょう。
Webサーバーのデータをコピーしたら、ファイルの中身を確認します。たくさんのフォルダーやファイルで構成されているのがわかります。また、「.html」や「.jpg」など、いろいろな拡張子がついているファイルがあることも確認できるでしょう。
▲ある小規模なWebサイトのデータの例。複数のフォルダーとファイルで構成されている。拡張子を見るとさまざまな種類のファイルが使われていることがわかる
4.ファイルの種類と役割を知っておこう
Webサイトを構成するファイルは、ファイルの種類によって、それぞれ役割があります。Webサイトでよく使われるファイルは、大きく分けて次の5種類に分けられます。
■CSSファイル
■JavaScriptファイル
■画像ファイル（動画ファイル、音声ファイルなどを含む）
■その他のファイル
それぞれのファイルの役割を見ていきましょう。
■HTMLファイル
Webページに表示されるテキストや、挿入される画像、動画などのファイルの情報が記されたファイルです。拡張子は「.html」（まれに「.htm」）で、Webサイトの更新作業は、多くの場合、このHTMLファイルを編集することになります。
例外もありますが、原則として、1枚のHTMLファイルが、1ページのWebページとしてWebブラウザーに表示されます。
Webページを作るには、必ず1枚のHTMLファイルを作ります。Webページを構成するファイルの中でも、もっとも重要なファイルといえます。
次のような作業をするときは、HTMLファイルを編集することになります。
- Webページのテキストを書き換えたり、追加・削除をするとき
- Webページにコンテンツ（テキストと画像を組み合わせた、1つのまとまり）を追加するとき
- 画像を別の画像に差し替えるとき
HTMLファイルのソースコード（プログラムなどの中身のこと）は次のようになっています。「 <div>」など、「<>」で囲まれる「タグ」が多数含まれていることが確認できます。
▲HTMLのソースコード。多数の「タグ」が含まれているのが特徴
■CSSファイル
HTMLファイルに書かれたコンテンツをレイアウトするための、「スタイルシート」と呼ばれるレイアウト情報が記されているのが「CSSファイル」です。
拡張子は「.css」ファイルです。 HTMLにはWebページに表示するテキストやコンテンツなどを書き表す機能はありますが、そうしたコンテンツをどこに表示するか、テキスト色や背景色を何色にするか、など、ページの見た目を調整する機能は持っていません。見た目を調整するにはCSSファイルを用意する必要があります。
次のような作業をするときは、CSSファイルを編集することになります。
- テキスト色を変える、フォントサイズを大きくする／小さくするなど、テキストの表示の仕方を変えるとき
- 背景色や背景画像を変えるとき
- コンテンツの表示サイズを変更したり、コンテンツ間に空いているスペースを調整するなど、レイアウトを変更するとき
▲CSSのソースコード。テキスト色やフォントサイズを調整するときはCSSファイルを編集する
■JavaScriptファイル
JavaScriptファイルは、HTMLやCSSだけでは実現できない機能を、Webページに組み込むために使用します。拡張子は「.js」で、「JavaScript」と呼ばれるプログラムコードが書かれています。JavaScriptプログラムを書き換えるにはプログラミングの専門的な知識が必要で、通常のWebサイトの更新作業で編集することはないでしょう。
■画像ファイル
Webページに掲載できる画像や動画、音声ファイルにはいくつかの種類があり、多数の拡張子があります。ここでは代表的なものを紹介します。
・JPEGファイル
拡張子は「.jpg」もしくは「.jpeg」です。「ジェイペグ」と発音します。 おもに写真など色の階調が多い画像に適しています。
・PNGファイル
拡張子は「.png」です。「ピーエヌジー」または「ピング」と発音します。 図やコンピューター画面のスクリーンショットなど、色の階調が少ない画像に適しています。Webサイトでは、このPNGか、1つ前に紹介したJPEGがもっとも多く使われています。PNGはアニメーションも作れますが、まだ広く普及しているとはいえず、見かけることは多くないでしょう。
・GIFファイル
拡張子は「.gif」で、「ジフ」または「ギフ」と発音します。古い形式の画像ファイルですが、パラパラマンガのようなアニメーションができるのが特徴です。
・WebPファイル
拡張子は「.webp」で、「ウェッピー」と発音します。 JPEGやPNGよりもファイルサイズが小さいのが特徴です。写真でも図でも、画質を維持したままファイルサイズを小さくできるのが特徴です。アニメーションもできます。
・SVGファイル
拡張子が「.svg」のファイルです。これまでに紹介した形式はすべて「ビットマップ」と呼ばれるフォーマットで、小さい色つきの点（画素、またはピクセルと呼ぶ）の集合で画像を表現するものでした。このSVGファイルは「ベクター形式」と呼ばれ、図の線や塗りを数式で表します。拡大しても画質が悪くならないのが特徴で、会社のロゴや図に使われます。
・MP4, WebM、MP3
「.mp4」、「.webm」という拡張子のファイルを見かけたら、それは動画ファイルです。Webで再生できる動画ファイルにはほかにも種類がありますが、現在は、「.mp4」がよく使われています。
「.mp3」は音声ファイルです。
■その他のファイル
Webサイトのデータの中に、PDFファイル（拡張子「.pdf」）や圧縮データのZIPファイル（拡張子「.zip」）などのファイルが含まれることがあります。Webサイトからダウンロードできるデータとして、PDFファイルやZIPファイルを用意することもあります。
まれに、ここまでに紹介した以外の拡張子のファイルが含まれることもあります。そうしたファイルは、サーバーで動作するプログラムファイルや設定ファイルであることが多く、Webサイトの更新作業には関係ないものがほとんどです。見慣れない拡張子のファイルを見かけたら、開く前に、検索して調べることをおすすめします。
HTML・CSSの入門書をプレゼント！
本記事の感想をお寄せいただいた方の中から抽選で書籍『スラスラわかるHTML&CSSのきほん（SBクリエイティブ）』をプレゼントします。これからWeb制作を始める人にも、HTML・CSSを学び直したい人にもおすすめの一冊です。皆さんのご応募お待ちしています！
※本記事に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。
