👻

CSSって何？ 10分で分かる基礎知識

2024/05/16に公開

こんにちは！あなたがこの記事を読んでいるということは、ウェブデザインの世界に興味がある、もしくは学び始めたばかりの方かもしれませんね。それとも、すでにHTMLの基礎を学び、次のステップに進む準備ができているのかもしれません。どちらにしても、あなたがここにいる理由は一つ、「CSS」についてもっと知りたいからですよね。

CSSは、ウェブページの見た目を整えるための言語で、色やフォント、レイアウトなど、ウェブページのデザインを自由に変えることができます。しかし、CSSの書き方や構文、セレクタやプロパティの種類と使い方、そしてCSSの優先順位や継承のルールなど、学ぶべきことはたくさんあります。

でも、心配しないでください。この記事では、CSSの基礎について一緒に学んでいきましょう。あなたがCSSの基礎をマスターすれば、自分だけの素敵なウェブページを作ることができるようになりますよ。

それでは、本編をどうぞ。

CSSとは何か

まず、CSSとは何かを説明しましょう。CSSは、Cascading Style Sheetsの略で、ウェブページのスタイルを指定するための言語です。つまり、ウェブページの色やフォント、レイアウトなどの見た目を決めることができます。

CSSとHTMLの違い

次に、CSSとHTMLの違いについて説明します。HTMLはウェブページの構造や内容を表現する言語です。一方、CSSはウェブページの見た目を決める言語です。これらは、手と目のような関係にあります。手（HTML）が物を作り、目（CSS）がそれを美しく見せるのです。

CSSの力

最後に、CSSの力について説明します。CSSを使うことで、ウェブページのデザインを自由に変えることができます。これは、あなたが画家で、ウェブページがあなたのキャンバスであると考えるとわかりやすいでしょう。CSSは、あなたが使う色や筆の種類を選ぶことができるパレットのようなものです。

これで、CSSの基本的な概念について理解できたと思います。

CSSの書き方

CSSを書く際には、セレクタと宣言ブロックを使います。これらの基本的な要素を理解することで、スタイルを適用する方法がわかります。

セレクタ

セレクタは、スタイルを適用する対象の要素を指定します。セレクタはHTML要素のタグ名やクラス名、IDなどで指定できます。例えば、以下のように書くことができます。

h1 {
  color: blue;
}

この例では、h1 タグをセレクタとし、テキストの色を青に設定しています。

宣言ブロック

宣言ブロックは、スタイルの内容を指定するものです。宣言ブロックは、プロパティと値のペアからなります。

プロパティ: スタイルの種類を指定するものです。例えば、color プロパティはテキストの色を指定します。
値: プロパティの具体的な設定を指定するものです。例えば、blue はテキストの色を青に設定します。

セレクタと宣言ブロックは、波括弧 {} で囲まれます。プロパティと値は、コロン : で区切られます。宣言ブロック内のプロパティと値のペアは、セミコロン ; で区切られます。

例えば、以下のように書くことができます。

h1 {
  color: blue;
  font-size: 24px;
}

この例では、h1 タグのテキストの色を青に設定し、フォントサイズを24ピクセルに設定しています。

CSSを書く場所

CSSを適用する方法にはいくつかの選択肢があります。どの方法を選ぶかは、ウェブページの構造や管理のしやすさによります。以下では、外部スタイルシート、内部スタイルシート、インラインスタイルの3つの方法について説明します。

外部スタイルシート：CSSを別のファイルに書く

外部スタイルシートとは、CSSを別のファイルに書いて、HTMLからリンクする方法です。この方法の一番の利点は、CSSを一つのファイルにまとめることができるため、HTMLとCSSを別々に管理できます。これにより、コードの可読性や保守性が高まります。さらに、同じCSSを複数のHTMLに適用することができます。

以下に、外部スタイルシートの使用例を示します。

<!-- HTML -->
<head>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <h1>Hello, world!</h1>
</body>

/* CSS */
h1 {
 color: red;
}

内部スタイルシート：HTMLファイル内に直接CSSを書く

内部スタイルシートとは、HTMLファイル内に直接CSSを書く方法です。この方法は簡単に書くことができますが、同じスタイルを複数の要素に適用する場合には、手間がかかります。また、HTMLとCSSが混ざってしまうため、可読性が低くなる可能性があります。

以下に、内部スタイルシートの使用例を示します。

<!-- HTML -->
<head>
 <style>
  h1 {
   color: red;
  }
 </style>
</head>
<body>
 <h1>Hello, world!</h1>
</body>

インラインスタイル：HTMLのstyle属性に直接CSSを書く

インラインスタイルとは、HTMLのstyle属性に直接CSSを書く方法です。この方法は、インラインと外部ファイルの中間的な方法と言えます。HTMLの要素にstyle属性を付けることで、CSSを書くことができますが、内部スタイルシートよりも可読性が悪いです。また、style属性は、同じHTML内でしか使えません。

以下に、インラインスタイルの使用例を示します。

<!-- HTML -->
<body>
 <h1 style="color: red;">Hello, world!</h1>
</body>

それぞれの方法にはメリットとデメリットがあるので、自分のプロジェクトに最適な方法を選んでくださいね。

セレクタの種類とその使い方

ここでは、HTMLとCSSの中心的な要素である「セレクタ」について学びます。セレクタは、ウェブページの特定の部分にスタイルを適用するための道具です。それでは、一緒に見ていきましょう！

要素セレクタ

要素セレクタは、HTMLの要素名を指定してスタイルを適用します。例えば、h1やpなどの要素名を指定すると、その要素名を持つすべての要素にスタイルが適用されます。これは、すべての同じ種類の要素に一度にスタイルを適用したいときに便利です。

クラスセレクタ

次に、クラスセレクタについて見てみましょう。HTMLの要素にclassという属性を付けて、任意の名前を指定します。例えば、.redや.blueなどのクラス名を指定すると、そのクラス名を持つすべての要素にスタイルが適用されます。これは、特定のグループの要素にスタイルを適用したいときに便利です。

IDセレクタ

IDセレクタは、HTMLの要素にidという属性を付けて、一意の名前を指定します。例えば、#titleや#footerなどのID名を指定すると、そのID名を持つ要素にだけスタイルが適用されます。これは、ページ内の特定の要素にスタイルを適用したいときに便利です。

属性セレクタ

属性セレクタは、HTMLの要素の属性名や属性値を指定します。例えば、[href]や[src="logo.png"]などの属性名や属性値を指定すると、その属性名や属性値を持つすべての要素にスタイルが適用されます。これは、特定の属性を持つ要素にスタイルを適用したいときに便利です。

擬似クラスセレクタ

擬似クラスセレクタは、HTMLの要素の状態や順序を指定します。例えば、:hoverや:nth-child(2)などの状態や順序を指定すると、その状態や順序にあるすべての要素にスタイルが適用されます。これは、特定の状態や順序の要素にスタイルを適用したいときに便利です。

擬似要素セレクタ

最後に、擬似要素セレクタについて見てみましょう。擬似要素セレクタは、HTMLの要素の一部分を指定します。例えば、::beforeや::first-letterなどの一部分を指定すると、その一部分にスタイルが適用されます。これは、要素の特定の部分にだけスタイルを適用したいときに便利です。

以上が、セレクタの種類とその使い方についての解説です。

CSSの詳細度とカスケードについて理解する

最後に、CSSの「詳細度」と「カスケード」について学びましょう。これらの概念は、ウェブページの見た目を制御するために必要な知識です。それでは、一緒に見ていきましょう！

詳細度

詳細度とは、セレクタの強さを表す数値のことです。詳細度は、セレクタの種類によって異なります。セレクタの詳細度はIDセレクタ > クラスセレクタ > 要素セレクタです。

例えば、次のようなHTMLとCSSがあるとします。

<h1 id="title">Hello, world!</h1>

h1 {
  color: red;
}

#title {
  color: blue;
}

このとき、h1要素には、h1セレクタと#titleセレクタの両方がスタイルを適用しようとします。しかし、#titleセレクタの方が詳細度が高いので、#titleセレクタのスタイルが優先されます。そのため、h1要素の文字色は青になります。

詳細度は、名字のようなものと考えるとわかりやすいです。珍しい名字（IDセレクタ）は、一般的な名字（クラスセレクタなど）よりも目立つというわけです。

カスケードの理解

次に、カスケードについて見てみましょう。カスケードは、詳細度が同じ場合に、どのセレクタのスタイルが優先されるかを決めるルールです。カスケードは、スタイルの指定順によって決まります。一般的に、後に指定されたスタイルが優先されます。