第2回: カフェサイトの基本デザインとCSSの基礎

2024-08-032024-08-04

第2回目ではカフェサイトの基本的なデザインを整えるためにCSSの基礎について学びます。
CSS（Cascading Style Sheets）はHTMLで作成した要素の見た目を装飾するための言語です。
今回の講座では基本的なCSSの書き方や使い方を学び、カフェサイトに適用していきます。

CSSの基本構造

CSSはスタイル（見た目）を設定するための言語です。

p {
  color: red;
  font-size: 16px;
}

CSSは主に以下の3つの部分から成り立っています。

セレクタ: どのHTML要素にスタイルを適用するかを指定します。
例えば特定の見出しや段落を選ぶことができます。
プロパティ: その要素にどのようなスタイルを適用するかを示します。
例えば文字の色や大きさを設定します。
値: プロパティに対して具体的なスタイルの値を指定します。
例えば「赤」や「16px」などです。

CSSファイルのリンク

まずHTMLファイルにCSSファイルをリンクします。
前回作成したHTMLファイルのheadセクションに以下のリンクタグが含まれていることを確認します。

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

これによりstyle.cssファイルに記述したスタイルがHTMLに適用されます。

基本的なセレクタ

CSSのセレクタは、初心者のうちは主に以下の3つを使います。

タグセレクタ

HTMLのタグ名を指定します。
例えばbodyタグ全体に適用する場合は次のように書きます。

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

クラスセレクタ

任意の要素にクラスを指定してスタイルを適用します。
クラス名の前にピリオド（.）を付けて指定します。

.header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

IDセレクタ

特定の要素にIDを指定してスタイルを適用します。
ID名の前にハッシュ（#）を付けて指定します。

#main-title {
  font-size: 24px;
  font-weight: bold;
}

CSSの適用例

具体的な例を見てみましょう。
カフェサイトのヘッダー、メインコンテンツ、フッターにスタイルを適用します。

ヘッダーのスタイル設定

ヘッダーには背景色とテキストの色、余白を設定します。
以下のCSSをstyle.cssに追加します。

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

header h1 {
  margin: 0;
  font-size: 36px;
}

header nav a {
  display: inline-block;
  margin-right: 8px;
  color: #fff;
  text-decoration: none;
}

header nav a:hover {
  text-decoration: underline;
}

header: ヘッダー全体に背景色（#333）、テキストの色（白）、パディングを設定します。
header h1: メインタイトルのマージンとフォントサイズを設定します。
header nav a: リンクの色と装飾を設定します。
header nav a:hover: リンクがホバーされたときの装飾も設定します。

メインコンテンツのスタイル設定

次にメインコンテンツのセクションにスタイルを適用します。

main {
  padding: 20px;
  background-color: #f9f9f9;
}

main section {
  margin-bottom: 20px;
}

main h2 {
  font-size: 28px;
  color: #333;
}

main p {
  font-size: 16px;
  line-height: 1.6;
}

main: メインコンテンツ全体にパディングと背景色を設定します。
main section: 各セクションの下にマージンを追加します。
main h2: セクションの見出しのフォントサイズと色を設定します。
main p: 段落のフォントサイズと行間を設定します。

フッターのスタイル設定

最後にフッターのスタイルを設定します。

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: fixed;
  width: 100%;
  bottom: 0;
}

footer p {
  margin: 0;
  font-size: 14px;
}

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>

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

header h1 {
  margin: 0;
  font-size: 36px;
}

header nav a {
  display: inline-block;
  margin-right: 8px;
  color: #fff;
  text-decoration: none;
}

header nav a:hover {
  text-decoration: underline;
}

main {
  padding: 20px;
  background-color: #f9f9f9;
}

main section {
  margin-bottom: 20px;
}

main h2 {
  font-size: 28px;
  color: #333;
}

main p {
  font-size: 16px;
  line-height: 1.6;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: fixed;
  width: 100%;
  bottom: 0;
}

footer p {
  margin: 0;
  font-size: 14px;
}