HTMLでページの構造を作った次は、「CSS」を学びました。CSSを使うことで、Webページを美しくデザインできます。
CSSとは
**CSS（Cascading Style Sheets）**は、ページをデザインするための言語です。
HTMLで用意された要素に対して、「どこの」「何を」「どうするのか」を指定できます。
h1 {
color: blue;
}
この例では：
- どこの:
h1（見出し要素） - 何を:
color（文字色） - どうするのか:
blue（青色にする）
CSSの基本構文
構文:
セレクタ {
プロパティ: 値;
}
p {
color: red;
font-size: 20px;
}
構成要素
- セレクタ: どの要素に適用するか（例:
h1,p） - プロパティ: 何を変更するか（例:
color,font-size） - 値: どう変更するか（例:
red,20px）
CSSの書き方ルール
インデントする
プロパティは、**インデント（字下げ）**して書きます。
/* ✅ 読みやすい */
h1 {
color: blue;
font-size: 30px;
}
/* ❌ 読みにくい */
h1 {
color: blue;
font-size: 30px;
}
コロンとセミコロン
- プロパティの末尾には
:（コロン） - 行末には
;（セミコロン）
p {
color: red; /* コロンとセミコロン */
font-size: 16px; /* コロンとセミコロン */
}
CSSのコメント
CSSでは、/* */ でコメントを書けます。
/* これはコメントです */
h1 {
color: blue; /* 見出しを青色にする */
}
基本的なプロパティ
color：文字の色
h1 {
color: blue;
}
p {
color: #333333; /* 16進数カラーコード */
}
font-size：文字の大きさ
h1 {
font-size: 30px;
}
p {
font-size: 16px;
}
font-family：文字のフォント
p {
font-family: Arial;
}
h1 {
font-family: "Hiragino Sans"; /* スペースがある場合はダブルクォーテーション */
}
重要: フォント名にスペースがある場合は、ダブルクォーテーションで囲む必要があります。
background-color：背景色
body {
background-color: #f0f0f0;
}
h1 {
background-color: yellow;
}
width：横幅
div {
width: 500px;
}
img {
width: 300px;
}
height：高さ
div {
height: 200px;
}
img {
height: 150px;
}
実用例：ページ全体のスタイル
/* ページ全体の背景色とフォント */
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
color: #333333;
}
/* 見出しのスタイル */
h1 {
color: #2c3e50;
font-size: 36px;
}
/* 段落のスタイル */
p {
font-size: 16px;
line-height: 1.6;
}
HTMLとCSSの役割分担
- HTML: 構造（何があるか）
- CSS: デザイン（どう見せるか）
<!-- HTML：構造 -->
<h1>タイトル</h1>
<p>本文テキスト</p>
/* CSS：デザイン */
h1 {
color: blue;
font-size: 30px;
}
p {
color: gray;
font-size: 14px;
}
今日の学びのポイント
- CSS: ページをデザインする言語
- セレクタ: どの要素に適用するか（要素名:
h1,pなど） - プロパティ: 何を変更するか（
color,font-sizeなど） - 値: どう変更するか（
blue,20pxなど） - プロパティの末尾は
:コロン - 行末は
;セミコロン - インデントで読みやすくする
- コメント:
/* コメント */ - フォント名にスペースがある場合はダブルクォーテーションで囲む
CSSを使うことで、HTMLで作った構造に色や大きさを付けて、見やすく美しいWebページを作れます。
コメント