【CSS】CSSの基本構造をマスターしよう！スタイルシートの書き方入門

2024年9月2日2024年9月7日

はじめに

CSS（Cascading Style Sheets）は、HTMLで作成されたウェブページにデザインやスタイルを追加するためのスタイルシート言語です。CSSを使用すると、文字の色やサイズ、レイアウトなど、ウェブページの見た目を自由にカスタマイズできます。本記事では、CSSの基本構造とスタイルシートの書き方を学び、ウェブページをより魅力的にするための基本的な技術を紹介します。

CSSの基本構造とは？

CSSは、スタイルルールで構成されています。スタイルルールは、セレクタと宣言ブロックで構成されており、以下のように記述されます。

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

例: テキストの色を赤にする

p {
    color: red;
}

この例では、p セレクタ（段落要素）に対して、color プロパティを red（赤色）に設定しています。

CSSの基本的な書き方

CSSを記述する方法は主に3つあります：

インラインスタイル：HTMLタグ内に直接スタイルを記述する方法
内部スタイルシート： HTMLファイルの<head>セクションにスタイルを記述する方法
外部スタイルシート：別のCSSファイルを作成し、HTMLファイルにリンクする方法

1. インラインスタイル

インラインスタイルは、HTMLタグに直接スタイルを記述する方法です。これは特定の要素にスタイルを適用する場合に使われます。

<p style="color: red;">このテキストは赤色です。</p>

2. 内部スタイルシート

内部スタイルシートは、HTMLファイルの<head>セクション内に<style>タグを使ってCSSを記述する方法です。

<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="UTF-8">
      <title>内部スタイルシートの例</title>
      <style>
          p {
              color: blue;
          }
      </style>
  </head>
  <body>
      <p>このテキストは青色です。</p>
  </body>
</html>

3. 外部スタイルシート

外部スタイルシートは、別のCSSファイルを作成し、そのファイルをHTMLドキュメントにリンクする方法です。これは最も一般的で再利用可能な方法です。

CSSファイル（styles.css）の内容：

p {
    color: green;
}

HTMLファイルでのリンク方法：

<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="UTF-8">
      <title>外部スタイルシートの例</title>
      <link rel="stylesheet" href="styles.css">
  </head>
  <body>
      <p>このテキストは緑色です。</p>
  </body>
</html>

CSSの基本的なプロパティと使用例

CSSでは、さまざまなプロパティを使ってウェブページのスタイルを設定できます。以下にいくつかの基本的なプロパティを紹介します。

１．色の設定 (color, background-color)

body {
    background-color: #f0f0f0;
}
h1 {
    color: #333;
}

２．フォントの設定 (font-family, font-size, font-weight)

p {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: bold;
}

ボックスモデルの調整 (margin, padding, border)

.container {
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
}

レイアウトの制御 (display, flex, grid)

.flex-container {
    display: flex;
    justify-content: space-between;
}

CSSの活用方法

CSSを活用することで、ウェブページを美しくデザインすることができます。例えば、テキストの装飾や背景色の設定、画像の配置、ボタンのデザインなど、多岐にわたるスタイリングが可能です。以下は、ボタンをスタイリングする例です。

.button {
    background-color: #4CAF50;
    color: white;
    padding: 15px 32px;
    text-align: center;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.button:hover {
    background-color: #45a049;
}

まとめ

CSSはウェブページのスタイルとデザインを制御するための強力なツールです。基本的な構造を理解し、インラインスタイル、内部スタイルシート、外部スタイルシートの使い方を学ぶことで、より複雑で魅力的なデザインを作成することが可能になります。まずは基本をしっかりと押さえ、様々なプロパティを試しながら、CSSのスキルを高めていきましょう！

この記事では、CSSの基本構造とスタイルシートの書き方について学びました。次回は、さらに高度なCSSのテクニックについて紹介していきます。お楽しみに！