【第5回】ウェブサイト制作講座：初心者でも安心！10ステップでホームページを作ろう！

1. 第5回：CSSを使ってホームページを装飾しよう
2. CSSとは
3. CSSの基本構造
3.1. 例
4. CSSの記述方法
4.1. 例（外部ファイル）
4.2. 例（スタイル属性）
5. まとめ

第5回：CSSを使ってホームページを装飾しよう

前回は、HTMLを使って簡単なホームページを作りました。

今回は、CSS（Cascading Style Sheets）を使って、ホームページを装飾してみましょう！

CSSとは

CSSは、HTMLで記述したコンテンツの見た目を装飾するための言語です。CSSを使うことで、フォントサイズ、色、配置などを自由に設定することができます。

CSSの基本構造

CSSの基本構造は以下の通りです。

selector {
  property: value;
}

selector：装飾したい要素を指定します。
property：装飾したいプロパティを指定します。
value：プロパティの値を指定します。

例

h1 {
  font-size: 24px;
  color: #ff0000;
}

p {
  font-size: 16px;
  color: #000000;
}

このCSSコードは、以下のようになります。

<h1> タグに記述されたすべての見出しのフォントサイズを 24px に、色を赤色に設定します。
<p> タグに記述されたすべての段落のフォントサイズを 16px に、色を黒色に設定します。

CSSの記述方法

CSSは、以下の2つの方法で記述することができます。

外部ファイル
CSSコードを別のファイル（*.css）に記述し、HTMLファイルに読み込む方法です。
スタイル属性
HTMLタグに直接 CSS コードを記述する方法です。

例（外部ファイル）

以下のコードを「style.css」というファイルに保存します。

h1 {
  font-size: 24px;
  color: #ff0000;
}

p {
  font-size: 16px;
  color: #000000;
}

HTMLファイルに以下のコードを追加します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>私のホームページ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>私のホームページへようこそ</h1>
  <p>はじめまして！私は〇〇と申します。</p>
  <p>このホームページでは、私の自己紹介や趣味などを紹介していきます。</p>
  <img src="image.jpg" alt="私の写真">
</body>
</html>

例（スタイル属性）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>私のホームページ</title>
</head>
<body>
  <h1 style="font-size: 24px; color: #ff0000;">私のホームページへようこそ</h1>
  <p style="font-size: 16px; color: #000000;">はじめまして！私は〇〇と申します。</p>
  <p style="font-size: 16px; color: #000000;">このホームページでは、私の自己紹介や趣味などを紹介していきます。</p>
  <img src="image.jpg" alt="私の写真">
</body>
</html>

まとめ

今回は、CSSを使ってホームページを装飾する方法について解説しました。

次回からは、より具体的なデザインテクニックについて解説していきますので、ぜひご期待ください！

トピックス: ノウハウ

タグ: CSS、ホームページ作成