概要
HTMLで作られたWebページにデザイン(色、レイアウト、フォントなど)を加えるためのスタイルシート言語です。
「見出しを青くしたい」「ボタンを中央に配置したい」「文字を大きくしたい」といった
視覚的な調整は、すべてCSSで指定します。
例えるなら、HTMLが「骨格」、CSSが「服装やメイク」の役割です。
正式名称
Cascading Style Sheets(カスケーディング・スタイル・シート)
略称
CSS(シーエスエス)
特徴
- 文字の色・サイズ・太さを変える
- 背景色や背景画像を設定する
- ボタンやカードに影をつける
- スマホ・タブレット対応のレイアウトを作る(レスポンシブ対応)
- アニメーションやフェードインなどの動きをつける
具体例
HTML
<p class="highlight">Hello World!</p>
CSS
.highlight {
color: red;
font-size: 20px;
text-align: center;
}
各プロパティの役割
プロパティ | 役割 |
---|---|
文字色を赤 | |
フォントサイズを20px | |
文字を中央揃え |
最初に覚えたい基本プロパティ一覧はこちら
関連用語
用語 | 解説 |
---|---|
セレクタ | CSSで「どのHTML要素に対してスタイルを適用するか」を指定する部分。例: や
|
プロパティ | スタイルの種類。例: (文字色)や (文字サイズ) |
値(バリュー) | プロパティに設定する内容。例: や
|
クラス | HTML要素に名前をつける仕組み。CSSと組み合わせて見た目をコントロールする |
ID | クラスに似ているが、1ページ内で一意の識別子。例:
|