はじめに
ウェブサイトはHTMLファイルの他にもCSSやJavaScript、画像など多くのファイルで構成されています。この記事では、一般的なウェブサイトの構造と、HTMLで画像を表示する例を用いてHTMLでどのように他のファイルを扱うかについて解説します。
この記事の対象者
- ウェブ制作を基礎から学びたい人
- HTMLで他のファイルを読み込む方法について知りたい人
この記事の目標
- 静的サイトと動的サイトについて知る
- 静的サイトのディレクトリ構造について知る
- 相対パスと絶対パスについて知る
- HTMLで画像やCSSファイルを読み込めるようになる
静的サイトと動的サイト
ウェブサイトは静的サイトと動的サイトに分類することができます。静的サイトと動的サイトは制作方法が大きく異なりますが、最終的にウェブブラウザへHTMLを返すというところは同じです。この記事では簡単に静的サイトと動的サイトについて触れておきます。
静的サイト
静的サイトで構築したウェブサイトはHTMLファイルをウェブサーバーに設置します。ウェブブラウザから要求されたページのHTMLファイルをウェブブラウザに返すことでウェブブラウザはウェブページを表示することができます。
初学者向けの学習内容のほとんどは静的サイトであることを前提としていると思います。企業のコーポレートサイトやLPなどは静的サイトで構築することができますが、お知らせやページ追加など、ウェブサイトの更新を行うにはウェブ制作の知識が必要になります。
動的サイト
動的サイトで構築されたウェブサイトはPHP言語などのプログラムファイルをウェブサーバーに設置します。ウェブブラウザから要求されたページに対してのHTMLファイルはウェブサーバー上にはありませんが、設置されたプログラムファイルを実行することでウェブサーバー側でHTMLを組み上げてウェブブラウザに情報を返します。
動的サイトはECサイトやSNSなど、多くのウェブサービスで採用されています。CMSで有名なWordPressを使用して構築されたウェブサイトも動的サイトになります。
構築するためにはHTMLやCSS、JavaScriptなどの基本的なウェブ制作の他にPHPなどのサーバーサイド言語やデータベースに関する知識、セキュリティに関する知識も必要になりますが、お知らせの更新機能、ブログ機能などを実装すれば専門知識を持たない人でも更新できるようなウェブサイトを制作できます。
まずは静的サイトの構築から学ぼう
動的サイトを仕様どおりに制作できるようになることがウェブ制作を学ぶ目標になりますが、人には向き不向きがあります。実際の制作現場でもウェブデザインが得意な人やコーディングが得意な人、WordPressのカスタマイズが得意な人、新しい技術のキャッチアップが得意な人などいろんな人がいます。まずは基本となる静的サイトの構築ができるようになってから得意なものや興味の強いものにフォーカスを当てて学ぶと良いでしょう。
静的サイトのディレクトリ構造
ウェブサイトはHTMLファイルの他にもCSSファイルやJavaScriptファイルや画像など、多くのファイルで構成されています。ウェブサイトを構築するときは、これらのファイルを一つのディレクトリにまとめ、互いに呼び出すことができるように組み立てる必要があります。また、ディレクトリ内にも画像ファイルをまとめたディレクトリ、CSSファイルをまとめたディレクトリを作成することが一般的です。以下はディレクトリ構造の一例になります。
sample-site/
├img/
│ ├logo.png
│ ├main-v.jpg
├css/
│ ├base.css
│ ├style.css
├js/
│ ├main.js
├index.htmlsample-siteというディレクトリの直下にはimg、css、jsという3つのディレクトリがあり、各ファイルは種類毎に分類されています。また、index.htmlというファイルもsample-siteの直下に設置されています。
サイトの規模や制作手法によってimgディレクトリ内でもページ単位で更にディレクトリを設けたり、cssファイルをページ単位や部品単位で分割したりします。コーディングが進んでからディレクトリ構造に変更を加えると多くの修正が必要になる可能性があるので、開発の途中でディレクトリ構造に大きく手を加えることはありません。
相対パスと絶対パス
HTMLからCSSやJavaScript、画像や動画などのファイルを呼び出すにはパスというファイルの位置を示す情報を指定する必要があります。パスの指定方法は二通りあり、ファイルを基準にしたパス指定を相対パス、コンピューターを基準にしたパス指定を絶対パスといいます。
パスの記述方法そのものは相対パスと絶対パスに違いはありません。ディレクトリ名やフォルダ名を正しく「/」で区切っていくだけです。大文字小文字や半角全角なども区別されるので注意しましょう。
相対パスについて
相対パス指定ではパスを記述するファイルの位置を基準にしてパスを指定します。ディレクトリ構造で説明したsample-siteを例にすると、index.htmlと各ディレクトリは同じ階層にあるため、index.htmlから各ディレクトリを参照することが出来ます。しかし、logo.pngやmain-v.jpgなどはimgディレクトリ内にあり、index.htmlからではこれらのファイルを認識できません。認識するためには、imgディレクトリの中にあるファイルという表現でパスを記述する必要があります。
以下は相対パスでindex.html内でlogo.pngを呼び出す例です。「./」はindex.htmlが置かれている位置を示しており、省略することも可能です。
相対パスの例
〇 <img src="./img/logo.png" alt="ロゴ">
〇 <img src="img/logo.png" alt="ロゴ"> ./は省略できる
× <img src="./logo.png" alt="ロゴ"> index.htmlとは違う階層のため認識できないまた、相対パスでは「../」と記述することで上の階層を参照することができます。
sample-siteに以下のディレクトリとHTMLファイルを追加します。
sample-site/
├img/
│ ├logo.png
│ ├main-v.jpg
├css/
│ ├base.css
│ ├style.css
├js/
│ ├main.js
├page // 新しく追加
│ ├about.html // 新しく追加
├index.htmlabout.htmlでimgディレクトリにあるlogo.pngを呼び出すには以下の記述になります。
相対パスの例
〇 <img src="../img/logo.png" alt="ロゴ"> パスの先頭に../と記述することで認識できる
× <img src="img/logo.png" alt="ロゴ"> about.htmlとは違う階層のため認識できない上階層の参照は「../../」と繰り返すことで何階層上のファイルやディレクトリでも参照することができます。静的サイトでは主に相対パスを使用するので覚えておきましょう。
絶対パスについて
絶対パスはコンピューターを基準にファイルの位置を指定するため、ウェブサーバー上にファイルがある場合とローカルPCにファイルがある場合でパスが違います。そのため、ローカルで開発を行っている場合に絶対パスでファイルの位置を指定していると、ウェブサーバーにアップロードする前にほとんどのパスを書き換える必要があります。
ウェブサーバーに静的サイトを公開するのであれば、基準となるコンピューターはウェブサーバーになります。ウェブサーバーのルートディレクトリとドメインは紐付けられることになるので、絶対パスはウェブサイトのURLと書き方が同じになります。
静的サイトで絶対パスを使うケースとして、ウェブサイトを設置するサーバー以外の場所にファイルがある場合です。相対パスと比べて限定的な使い方になりますが、基本知識としておさえておきましょう。
HTMLで画像を表示してみよう
HTMLファイルに画像の相対パスを記述してウェブブラウザ上で確認してみましょう。以下のzipファイルをダウンロードしてデスクトップ等わかりやすいところで解凍してください。
test-2393というフォルダが確認できたかと思いますので、このフォルダをVisual Studio Codeなどのテキストエディタで開いてください。
test-2393の構造は以下のようになっています。
test-2393/
├img/
│ ├sample-image.png
├index.htmlまた、index.htmlの記述は以下のようになっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像を表示してみよう</title>
</head>
<body>
<img src="" alt="サンプル画像">
</body>
</html>この段階ではimgタグのsrc属性にパスの記述がされていないので画像が表示されません。index.htmlをウェブブラウザにドラッグ＆ドロップして確認してみましょう。
画像が表示されず、imgタグのalt属性の値が表示されていることが確認できました。次にimgタグのsrc属性に画像のパスを入力してもう一度ウェブブラウザで確認してみましょう。パスの記述は以下になります。
<body>
<img src="./img/sample-image.png" alt="サンプル画像">
</body>以下の画像が表示されれば成功です。
いかがだったでしょうか？正しく表示されない場合は以下に注意してみましょう。
- パスが「”」で囲われているか
- スペルは合っているか
- 拡張子は「.png」になっているか
しっかりと学びたい人は画像やフォルダ、HTMLファイルを追加したり名前を変更したりして挙動を確認しておくと良いでしょう。
最後に
ウェブサイトの構造とHTMLでのパスの指定方法について解説しました。今回はHTMLでのパスの指定でしたが、CSSやJavaScriptでも他のファイルを参照することはよくあり、パスの指定方法も変わりません。注意するところは、相対パスはそのファイルからの位置を基準にしているというところです。同じ画像を参照するにも、ファイルの位置が変わればパスも変わるということを覚えておきましょう。
また、初心者のうちは画像が表示されない、CSSのスタイルがあたらないなどの問題に直面することが多いです。その場合にまず確認するところはパスが正しいかというところになります。パスの理解が曖昧だと初歩的な問題の解決で長い時間を費やす可能性があるため、相対パスでのパスの通し方はしっかりと理解しておきましょう。