CSS（Cascading Style Sheets）は、HTML文書の見た目を制御するための言語です。これにより、ウェブページのレイアウトや配色、フォントなどを柔軟にデザインできます。CSSの適用方法には主に3つの形式があります。
1. インラインスタイル
HTMLタグ内に直接style属性として記述します。
<p style="background-color: aqua;">
テキスト
</p>2. 内部スタイルシート
<head>内に<style>タグで定義し、クラス名で適用します。
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<style>
.highlight {
background-color: darkorchid;
}
</style>
</head>
<body>
<p class="highlight">テキスト</p>
</body>3. 外部スタイルシート
別ファイル（例: styles.css）に記述し、<link>で読み込みます。
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="page_color">テキスト</p>
</body>セレクタの種類
- クラスセレクタ（
.class-name）：複数要素に適用可能 - IDセレクタ（
#id-name）：ページ内で一意の要素に適用 - 要素セレクタ（
p,divなど）：該当タグすべてに適用
<style>
#unique { background-color: red; }
p { background-color: lightskyblue; width: 100px; height: 100px; }
</style>よく使うCSSプロパティ
背景（background）
<div style="background-color: red;">Hello</div>
<div style="background-image: url(icon.png); height: 80px; background-repeat: no-repeat;"></div>枠線（border）
<div style="border: 1px solid red; height: 10px;"></div>
<div style="border-left: 3px solid red;">左側のみ枠線</div>表示形式（display）
display: none;：要素を非表示display: inline;：ブロック要素をインライン化display: block;：インライン要素をブロック化
カーソル（cursor）
<div style="cursor: pointer;">ポインタ</div>
<div style="cursor: help;">ヘルプ</div>
<div style="cursor: move;">移動</div>フロート（float）
レイアウト構築に使用される。左右に要素を浮動配置できます。
<style>
.sidebar {
width: 20%;
height: 500px;
background: red;
float: left;
}
.content {
width: 80%;
height: 500px;
background: blue;
float: left;
}
</style>
<body>
<div class="sidebar"></div>
<div class="content"></div>
</body>親要素が子要素の高さを認識しない場合（クリア問題）、末尾に<div style="clear: both;"></div>を挿入して対処します。