第1回: カフェサイトの基本構造とHTMLの基礎

2024-07-212024-08-03

本講座ではカフェのサンプルサイトを作成しながら、HTMLとCSSの基礎を学びます。
第1回目ではHTMLの基本構造について学び、カフェサイトの基本的なHTMLの骨組みを作成します。
初心者のかたでもわかりやすいように、ステップバイステップで進めていきますので、安心して取り組んでください。

プロジェクトの準備

まずはプロジェクトのフォルダを作成し、その中に必要なファイルを用意します。
以下のフォルダとファイルを作成しましょう。
ファイルの作成はメモ帳などのテキストエディタでかまいません。

index.html
WEBサイトの文章を記述したり、画像を挿入したりします。
styles.css
画像や文章を装飾していきます。
imagesフォルダ
この中に画像を保存して、ここから画像を挿入します。

HTMLの基本構造

まずは、HTMLの基本構造について理解しましょう。
HTML（HyperText Markup Language）はウェブページを作成するためのマークアップ言語です。
HTML文書はさまざまな要素を組み合わせて構成されます。

DOCTYPE宣言

HTML文書は必ずDOCTYPE宣言から始まります。
これはブラウザに対して文書の種類を宣言するためのものです。
HTML（Living Standard）では以下のように宣言することで、ブラウザはHTML（Living Standard）のルールに従って文書を解釈します。

<!DOCTYPE html>

言語の設定

このWEBページは日本語で作成されることを宣言します。
language=japaneseの略です。

<html lang="ja">

headセクションの設定

次にheadセクションについて見ていきましょう。
headセクションには文書のメタ情報が含まれます。
ここには文字コード、タイトル、スタイルシートのリンクなどが含まれます。

<meta charset="UTF-8">

このWEBページはUTF-8という文字コードで作成されることを宣言します。
以前はJISやShift-JISにEUCなど、さまざまな文字コードで作成されたWEBサイトが乱立し、よく文字化けなどが起こっていました。
最近はこのUTF-8で作成するのが当たり前になって、文字化けするサイトは滅多に見なくなりました。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

スマホが普及して、この宣言が必要になりました。
画面幅を幅100％と認識すること、画面の初期表示は倍率1倍で表示することを指定しています。

<title>カフェサイト</title>

WEBページのタイトルを記述します。
ファイルの名前はindex.htmlなんですが、それとは別にブラウザのタブに表示されたり、検索結果に太字で表示されたりする部分を設定します。
非常に重要な部分です。

<link rel="stylesheet" href="styles.css">

このWEBページの装飾をしているスタイルシートの保存場所を宣言しています。
次回で詳しく解説します。

カフェサイトのHTML骨組み

次にカフェサイトの基本的なHTMLの骨組みを作成します。
まずはサイト全体のレイアウトを決定し、それぞれのセクションを定義します。

headerセクションの作成

headerセクションにはサイトのタイトルやナビゲーションメニューを配置します。
主な要素は以下のようになります。

<header>
  <h1>カフェへようこそ</h1>
  <nav>
    <a href="index.html">ホーム</a>
    <a href="menu.html">メニュー</a>
    <a href="contact.html">お問い合わせ</a>
  </nav>
</header>

header: サイト全体のヘッダーを定義します。
h1: サイトのメインタイトルを表示します。
nav: ナビゲーションメニューを定義します。
a: リンクを設定します。

mainセクションの作成

mainセクションにはページの主要なコンテンツを配置します。
その中でもmainタグの中身はページの内容を表す部分で、headerやfooterはサイト全体で共通のものを使うことがほとんどなので、実際にはこのmainタグの中身が各ページごとの違いと言えます。

mainタグの中はsectionやarticleタグで仕切ります。
前後で関連性がある内容を記述するならsectionタグ、独立して読める内容を記述するならarticleタグを使用します。
非常に多くの要素を使いますが、例えば以下のようになります。

<main>
  <section>
    <h2>カフェの紹介</h2>
    <p>私たちのカフェは最高のコーヒーと心地よい空間を提供します。</p>
  </section>
</main>

main: ページの主要なコンテンツを定義します。
section: コンテンツのセクションを定義します。
h2: セクションの見出しを設定します。
p: セクションの内容を表示します。

footerセクションの作成

footerセクションには著作権情報やその他のフッターコンテンツを配置します。
本来著作権情報は記述しなくても著作権は守られているのですが、記述することが定番になっていますので、記述しておきましょう。
さらに言ってしまうと、&copyとAll rights reservedは同じ意味です。
2度記述するのは気持ち悪いかもしれませんが、定番なので倣いましょう。

またフッターナビゲーションといって、WEBサイト全体の回遊性を高めるためにリンク集を記述することも多いです。
こちらは定番というものはあまりなく、WEBサイトごとに独自のスタイルがあります。
今回は第1回目なのでフッターナビゲーションは作成しません。

<footer>
  <p>© 2024 カフェサイト. All rights reserved.</p>
</footer>

footer: サイトのフッターを定義します。
p: 著作権情報を表示します。

サンプルコード全体

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カフェサイト</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>カフェへようこそ</h1>
    <nav>
      <a href="index.html">ホーム</a>
      <a href="menu.html">メニュー</a>
      <a href="contact.html">お問い合わせ</a>
    </nav>
  </header>
  <main>
    <section>
      <h2>カフェの紹介</h2>
      <p>私たちのカフェは最高のコーヒーと心地よい空間を提供します。</p>
    </section>
  </main>
  <footer>
    <p>© 2024 カフェサイト. All rights reserved.</p>
  </footer>
</body>
</html>

カフェサイト