CSSの基本と適用方法を完全ガイド！初心者でもわかるスタイルシートの使い方
新人
「HTMLでページを作るとき、文字の色や背景色を変えるにはどうすればいいですか？」
先輩
「それにはCSSを使います。CSSは、ページの見た目を変更するためのスタイルシートです。文字の色や背景色、レイアウトを調整することができます。」
新人
「CSSって具体的にどう使うんですか？」
先輩
「CSSの基本的な使い方を説明しますね。CSSには、いくつかの適用方法があります。インライン型、埋め込み型、外部リンク型です。」
1. CSSとは？
CSS（Cascading Style Sheets）は、HTMLで作成したウェブページにデザインを加えるためのスタイルシートです。CSSを使うことで、文字の色、フォント、背景、レイアウトなどを自由に設定できます。例えば、ウェブページ全体のデザインを統一することができるので、デザイン面で非常に重要な役割を果たします。
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: darkblue;
}
</style>
</head>
上記の例では、styleタグ内にCSSを記述しています。これによって、ページの背景色をライトブルーに、見出し（h1）の文字色をダークブルーに設定しています。
2. CSSの適用方法
CSSをHTMLに適用する方法には、主に3つの方法があります。インライン型、埋め込み型、外部リンク型です。それぞれの方法について説明します。
2.1 インライン型
インライン型は、HTMLタグ内に直接CSSを記述する方法です。スタイルを適用するタグにstyle属性を使って、個別の要素にスタイルを指定できます。
<p style="color: red;">この文字は赤色です。</p>
上記の例では、pタグに直接style属性を使って赤色を指定しています。インライン型は、個別の要素にすぐにスタイルを適用したいときに便利ですが、大きなサイトでは管理が難しくなります。
2.2 埋め込み型
埋め込み型は、styleタグを使ってHTML文書内にCSSを埋め込む方法です。通常は、headタグ内に記述します。
<head>
<style>
body {
background-color: lightgreen;
}
h2 {
color: orange;
}
</style>
</head>
この方法では、ページ全体にわたってスタイルを適用できるので、より効率的です。しかし、他のページでも同じスタイルを使用する場合、コードが重複することがあります。
2.3 外部リンク型
外部リンク型は、CSSファイルを別のファイルとして作成し、linkタグでHTMLに読み込む方法です。これが最も効率的で、管理もしやすいため、大規模なウェブサイトでよく使われます。
<head>
<link rel="stylesheet" href="styles.css">
</head>
ここでは、外部のCSSファイル（styles.css）をリンクしています。これによって、HTMLのコードをすっきり保ちながら、複数のページに同じスタイルを適用することができます。
3. CSSの基本的な使い方
CSSを使用することで、ウェブページのレイアウトやデザインを自由に変更できます。例えば、文字の大きさ、色、背景色、ボーダーのスタイルなどを調整できます。以下にいくつかの基本的なCSSプロパティを示します。
- color: 文字の色を指定します。
- font-size: 文字のサイズを指定します。
- background-color: 背景色を指定します。
- border: 要素に枠線を追加します。
<head>
<style>
p {
color: blue;
font-size: 18px;
background-color: lightyellow;
border: 2px solid green;
}
</style>
</head>
このCSSでは、pタグ内のテキストの色を青に、文字のサイズを18pxに、背景色をライトイエローに、そして枠線を緑色に設定しています。
4. CSSセレクタの基本を理解しよう
CSSでは「どの要素にスタイルを適用するか」を指定するために、セレクタを使用します。セレクタを正しく理解することで、効率よくデザインをコントロールできるようになります。
<style>
/* 要素セレクタ */
p {
color: blue;
}
/* クラスセレクタ */
.text-red {
color: red;
}
/* IDセレクタ */
#main-title {
font-size: 24px;
}
</style>
<p class="text-red">赤い文字</p>
<h1 id="main-title">タイトル</h1>
このように、セレクタを使い分けることで、特定の要素だけにスタイルを適用することができます。
5. CSSの優先順位（カスケード）とは？
CSSには「カスケード」と呼ばれる仕組みがあり、複数のスタイルが指定された場合に、どのスタイルが優先されるかが決まっています。
<style>
p {
color: blue;
}
.text {
color: red;
}
</style>
<p class="text">この文字はどちらの色になる？</p>
この場合、クラスセレクタの方が優先されるため、文字は赤色になります。優先順位を理解することで、意図したデザインを正確に適用できるようになります。
6. CSSを効率よく管理するコツ
CSSは規模が大きくなるほど管理が重要になります。効率的に管理するためには、ルールを決めて整理することが大切です。
- クラス名をわかりやすく命名する
- 同じスタイルを繰り返し書かない
- 外部CSSファイルを活用する
/* 共通スタイル */
.button {
padding: 10px;
border-radius: 5px;
}
/* バリエーション */
.button-primary {
background-color: blue;
color: white;
}
このようにスタイルを整理することで、コードの可読性が向上し、保守や修正もしやすくなります。
