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に、背景色をライトイエローに、そして枠線を緑色に設定しています。
このブログ記事の文字数は約2850文字です。
