【プログラミング入門】中学生でも分かるCSSの基本

Seika_USA

2023年7月28日 09:49

こんにちは～！アメリカ・シリコンバレー在住のSeikaです😊

今回はCSSの基本的な概念、使用方法、HTMLへの組み込み方を、簡潔に解説します。

(2023年7月27日公開)

1、CSSとは

CSSとは、"Cascading Style Sheets"の略で、ウェブサイトの見た目をデザインするための言語です。
「ウェブサイトをおしゃれに着せ替えるためのツール」のようなものです。

HTMLがウェブサイトの骨組みを作るのに対して、
CSSはその骨組みに色や形をつけて美しく見せる役割があります。

「Cascading」は「滝のように落ちる」という意味。
CSSでの「Cascading」の場合、「ルールの順番」「ルールの優先順位」といった意味合いになります。

2、CSSの基本的な構文

CSSの基本的な書き方はこちらです。

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

具体例

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

これは、
「すべての段落の文字色を赤にし、文字の大きさを20ピクセルに設定する」という意味になります。

このように、CSSを使うとウェブサイトの見た目を自由に設定することができます。

3、CSSの用語

ルールセット（Ruleset）
ルールセットは、特定のHTML要素（セレクタ）に適用する一連のスタイル指定（宣言）をまとめたものです。
上記のコード全体（p { color: red; font-size: 20px; }）がルールセットです。
宣言（Declaration）
宣言は、スタイルの属性（プロパティ）とその値をセットにしたもので、具体的にどのスタイルをどう設定するかを指定します。
上記のコードの「color: red;」「font-size: 20px;」が宣言になります。
セレクタ（Selector）
セレクタは、CSSのスタイルを適用する対象のHTML要素を指定するためのものです。
上記のコードの「p」がセレクタになります。
プロパティ（Property）
プロパティは、ウェブページの特定の部分の見た目をどのように変更するかを指定するためのものです。
上記のコードの「color」、「font-size」がプロパティです。
値（Value）
値は、そのプロパティにどのような設定をするかを具体的に指定します。上記のコードの「red」と「20px」が値です。

4、CSSをHTMLに組み込む方法

では、実際作ったCSSはどのようにHTMLにつなぐのでしょうか？
組み込む方法を3つご紹介します。

1、インラインスタイル

HTMLタグの中に直接「style」という属性を書く方法です。

<p style="color: red;">This is a paragraph.</p>

🌟メリット
特定の要素に対して直接スタイルを適用できる。
外部CSSファイルがなくても動作するため、小さなスタイル変更には便利

💔デメリット
・HTMLに直接書かれているため、大規模なウェブサイトでは管理が難しい。
・同じスタイルを複数の要素に適用する場合、それぞれの要素に同じスタイルを書かなければならず、冗長性が生じる。

2、内部スタイルシート

HTMLファイルの「<head>」タグの中に「<style>」タグを使ってCSSを書く方法です。

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>This is a paragraph.</p>
</body>

🌟メリット
・ページ全体にスタイルを適用することができる。
・CSSとHTMLが同じファイルにあるため管理が容易。

💔デメリット
・再利用性が低い。他のHTMLページで同じスタイルを使用する場合、その都度スタイルを記述する必要がある。
・CSSが大量になると、HTMLファイルが大きくなり、読み込み時間が長くなる可能性がある

3、外部スタイルシート

CSSを別の「.css」という拡張子のファイルに書いて、それをHTMLファイルからリンクで参照する方法です。

HTMLファイル（index.html）

<head>
  <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
  <p>This is a paragraph.</p>
</body>

CSSファイル（style.css）

cssCopy codep {
  color: red;
}

🌟メリット
・再利用性が高い。同じスタイルシートを複数のHTMLページから参照することができる。
・HTMLとCSSが分離されているため、メンテナンスが容易。

💔デメリット
・HTMLとCSSが別々のファイルにあるため、ファイル間の移動が必要。
・外部ファイルの読み込みにより、初回のページ読み込みが遅くなる可能性がある。

今回はCSSの基本的な内容を解説いたしました。
また、次の記事でお会いしましょう～！

参照

Follow me here😊
Youtube│Instagram│Twitter│Dribbble│Linkedin│Behance│Notion│Portfolio│Figma │質問箱

この記事が参加している募集

#最近の学び

181,238件

よろしければサポートお願いいたします。いただいたサポートはクリエイターとしての活動費に使わせていただきます。