本記事では、CSSのプロパティについて初心者の方にも分かりやすく解説します。CSSを使うことで、Webページのデザインを自由にカスタマイズできます。基本的な書き方やよく使われるプロパティを例を交えて紹介し、最終的には自分でスタイルを調整できるようになることを目指します。
CSSのプロパティとは？
CSS（Cascading Style Sheets）は、Webページのデザインを指定するための言語です。CSSのプロパティとは、HTMLの要素に適用される「デザインの指示」のことを指します。例えば、文字の色や大きさ、背景の色、余白の調整などができます。
CSSのプロパティを理解することで、Webサイトの見た目を自由にカスタマイズできるようになります。初心者の方でも分かりやすいように、具体的な例を交えながら解説していきます。
CSSの基本的な書き方
CSSは、通常以下のような構文で記述されます。
セレクタ {
プロパティ: 値;
}
例えば、HTMLの<p>タグ（段落）を赤色にする場合、次のように記述します。
p {
color: red;
}
この場合、
- セレクタ →
p（適用する対象のHTMLタグ） - プロパティ →
color（文字の色を変更する） - 値 →
red（赤色に指定）
という構成になります。
よく使われる基本のCSSプロパティ
CSSには数多くのプロパティがありますが、特によく使われるものを紹介します。
色を指定する color プロパティ
color プロパティを使うと、文字の色を変更できます。
h1 {
color: blue;
}
この例では、<h1>タグの文字が青色になります。
背景色を指定する background-color プロパティ
background-color プロパティは、背景色を設定するために使用します。
div {
background-color: lightgray;
}
この例では、<div>タグの背景がライトグレーになります。
文字のサイズを調整する font-size プロパティ
font-size プロパティを使うと、文字の大きさを変更できます。
p {
font-size: 20px;
}
この例では、<p>タグの文字サイズが20ピクセルになります。
文字を太字にする font-weight プロパティ
font-weight プロパティを使うと、文字の太さを調整できます。
strong {
font-weight: bold;
}
この例では、<strong>タグの文字が太字になります。
文字の配置を変更する text-align プロパティ
text-align プロパティを使うと、文字の配置を変更できます。
h2 {
text-align: center;
}
この例では、<h2>タグの文字が中央揃えになります。
余白を調整する margin プロパティ
margin プロパティは、要素の外側の余白を設定するために使います。
div {
margin: 20px;
}
この例では、<div>タグの周りに20ピクセルの余白が設定されます。
要素の内側の余白を調整する padding プロパティ
padding プロパティは、要素の内側の余白を設定します。
div {
padding: 10px;
}
この例では、<div>タグの内側に10ピクセルの余白ができます。
CSSのプロパティの組み合わせ方
プロパティは複数組み合わせて使用できます。例えば、以下のように書くことで、背景色や文字色、余白を同時に設定できます。
.box {
background-color: yellow;
color: black;
padding: 20px;
margin: 10px;
}
このコードを適用すると、.box クラスが適用された要素は背景が黄色になり、文字色が黒、内側の余白が20px、外側の余白が10pxとなります。
CSSを適用する方法
CSSを適用するには、以下の3つの方法があります。
HTMLのタグ内に直接書く（インラインスタイル）
<p style="color: red;">この文字は赤色です。</p>
この方法は簡単ですが、管理が難しくなるため、大規模なサイトでは推奨されません。
<style>タグを使ってHTML内に記述する（内部スタイルシート）
<style>
p {
color: blue;
}
</style>
この方法では、HTMLファイル内でCSSをまとめて記述できます。
外部CSSファイルを作成する（外部スタイルシート）
<link rel="stylesheet" href="styles.css">
styles.css という外部ファイルを作成し、そこにCSSを記述すると、複数のページで同じデザインを適用できます。
まとめ
CSSのプロパティを理解すると、Webページのデザインを自由にカスタマイズできるようになります。本記事で紹介した基本のプロパティを活用して、少しずつ自分のスタイルを作ってみてください。
CSSにはさらに多くのプロパティや応用的な使い方がありますが、まずは基本をしっかり押さえておくことが大切です。実際にコードを書いて試しながら学んでいきましょう！
