↑上へ
ホーム
特集・講座編
HTMLとCSSの基本と概要講座
3章: HTML応用

CSSの基本概念と基本構文を学ぼう

CSSとは何か？

CSS（Cascading Style Sheets）は、ウェブページのデザインやレイアウトをコントロールするための言語です。HTMLでページの構造を作成した後、CSSを使って見た目を整えることができます。

CSSの基本構文

CSSは、セレクタ、プロパティ、値の3つの要素で構成されます。セレクタは、スタイルを適用する対象を指定します。プロパティは、どのようなスタイルを適用するかを指定します。値は、プロパティに設定する具体的な値を指定します。これらの要素を組み合わせて、CSSルールを定義します。

  セレクタ {
    プロパティ: 値;
  }

CSSをHTMLに適用する方法

CSSをHTMLに適用するには、主に2つの方法があります。

  1. 内部スタイルシート：HTMLファイル内の<style>タグにCSSを記述します。
  2. 外部スタイルシート：別ファイルにCSSを記述し、HTMLファイルでリンクします。

シンプルな例

以下に、シンプルなHTMLとCSSの例を示します。

  <!-- HTMLファイル -->
  <!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" href="styles.css">
    </head>
    <body>
      <h1>Hello, world!</h1>
      <p>Welcome to our website!</p>
    </body>
  </html>

  /* CSSファイル (styles.css) */
  h1 {
    font-size: 24px;
    color: blue;
  }
  p {
    font-size: 14px;
    color: green;
  }

演習問題1

以下のHTMLコードに、内部スタイルシートを使用して、h2タグの文字色を赤に変更してください。

  <!DOCTYPE html>
  <html>
    <head>
    </head>
    <body>
      <h2>Hello, CSS!</h2>
　　　　<p>This is a paragraph.</p> 
　</body> 
　</html>

演習問題2

以下のHTMLコードに、外部スタイルシートを使用して、pタグの文字色を紫に変更してください。

  <!DOCTYPE html>
  <html>
    <head>
    </head>
    <body>
      <h2>Hello, CSS!</h2>
      <p>This is a paragraph.</p>
    </body>
  </html>

演習問題3

以下のHTMLコードに、内部スタイルシートを使用して、全ての要素のフォントファミリーをArialに変更してください。

  <!DOCTYPE html>
  <html>
    <head>
    </head>
    <body>
      <h2>Hello, CSS!</h2>
      <p>This is a paragraph.</p>
    </body>
  </html>

解答と解説

演習問題1の解答

  <!DOCTYPE html>
  <html>
    <head>
      <style>
        h2 {
          color: red;
        }
      </style>
    </head>
    <body>
      <h2>Hello, CSS!</h2>
      <p>This is a paragraph.</p>
    </body>
  </html>

この例では、<style>タグを使って、内部スタイルシートを定義しました。h2タグに対して、colorプロパティを設定して、文字色を赤に変更しています。

演習問題2の解答

/* CSSファイル (styles.css) */
p {
color: purple;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Hello, CSS!</h2>
<p>This is a paragraph.</p>
</body>
</html>

この例では、外部スタイルシートを使用しています。styles.cssファイルにpタグに対するスタイルを記述し、HTMLファイルでそのスタイルシートをリンクしています。この方法で、pタグの文字色が紫に変更されます。

演習問題3の解答

  <!DOCTYPE html>
  <html>
    <head>
      <style>
        * {
          font-family: Arial, sans-serif;
        }
      </style>
    </head>
    <body>
      <h2>Hello, CSS!</h2>
      <p>This is a paragraph.</p>
    </body>
  </html>

この例では、<style>タグを使って、内部スタイルシートを定義しました。全ての要素に適用されるユニバーサルセレクタ（*）を使って、font-familyプロパティを設定して、フォントファミリーをArialに変更しています。

 

↑ 3章: HTML応用