基本のCSSプロパティとその使い方
CSSは、Webページの見た目を整えるために必要なスタイルシート言語です。HTMLがWebページの構造を定義するのに対し、CSSはその構造を装飾し、美しいデザインに仕上げる役割を果たします。今回は、CSSの基本的な書き方と主要なプロパティについて解説します。
CSSの書き方
インラインスタイル
HTMLタグ内に直接スタイルを記述する方法です。例えば、以下のように書きます。
<h1 style="color: red;">これは赤い見出しです</h1>内部スタイルシート
HTMLファイル内の<style>タグにスタイルを記述します。
<style>
h1 {
color: red;
}
</style>外部スタイルシート
別ファイルにスタイルを記述し、HTMLからそのファイルを参照します。
<link rel="stylesheet" href="styles.css">よく使うCSSプロパティ
文字に関するプロパティ
- color: 文字の色を指定します。
- font-size: 文字の大きさを指定します。
- font-weight: 文字の太さを指定します。
レイアウトに関するプロパティ
- text-align: テキストの水平位置を指定します。
- margin: 要素の外側の余白を設定します。
- padding: 要素の内側の余白を設定します。
表示に関するプロパティ
- display: 要素の表示方法を指定します（例: block, inline, none）。
- position: 要素の配置方法を指定します（例: static, relative, absolute）。
背景に関するプロパティ
- background-color: 背景色を指定します。
- background-image: 背景画像を指定します。
その他のプロパティ
- border: 要素の境界線を設定します。
- width: 要素の横幅を指定します。
- height: 要素の高さを指定します。