CSSでスタイルをつけよう
知っている人へ: 「確認しよう」のチェックリストだけやって次に進んでOKです。
このページで学ぶこと
- CSS ファイルを作って HTML に適用できる
- セレクター・プロパティ・値の書き方がわかる
- Flexbox を使った基本的なレイアウトができる
CSSとは
CSS（Cascading Style Sheets）は、HTMLに見た目をつけるための言語です。
「この見出しは赤色」「このボタンは角を丸くする」のような指定をします。
HTMLだけのページは味気ない白いページですが、CSSを加えると見た目が変わります。
やってみよう
ステップ1: CSSファイルを作る
前のページで作った practice フォルダに style.css ファイルを追加する。
style.css に以下を貼り付けて保存する。
h1 {
color: royalblue;
font-size: 32px;
}
p {
color: gray;
line-height: 1.8;
}次に index.html の <head> の中に以下を追加して CSS を読み込む。
<link rel="stylesheet" href="style.css" />ブラウザをリロード（Windows: F5 / Mac: Cmd + R）すると、見出しが青色になっていれば成功。
ステップ2: CSSの基本構文を理解する
セレクター {
プロパティ: 値;
プロパティ: 値;
}h1 { ← セレクター: どの要素に適用するか（h1タグ全部）
color: red; ← プロパティ: 何を変えるか（文字色）
← 値: どう変えるか（赤）
}セレクターの種類
| セレクター | 意味 | 例 |
|---|---|---|
h1 | タグ名で指定 | h1 { ... } |
.クラス名 | class属性で指定 | .title { ... } |
#ID名 | id属性で指定 | #header { ... } |
クラスを使う場合は HTML と CSS 両方に書く。
<!-- HTML -->
<p class="intro">紹介文です</p>/* CSS */
.intro {
font-size: 18px;
font-weight: bold;
}ステップ3: よく使うプロパティを試す
以下を style.css に追加して、変化を確認してみましょう。
文字の装飾
.sample-text {
color: #333333; /* 文字色（#RRGGBB形式） */
font-size: 16px; /* 文字サイズ */
font-weight: bold; /* 太字 */
text-align: center; /* 中央揃え */
}背景と枠線
.card {
background-color: #f5f5f5; /* 背景色 */
border: 1px solid #ddd; /* 枠線（太さ・種類・色） */
border-radius: 8px; /* 角を丸くする */
padding: 16px; /* 内側の余白 */
margin: 8px; /* 外側の余白 */
}margin と padding の違い
ステップ4: Flexboxでレイアウトを組む
Flexboxは要素を横並びにしたりするための仕組みです。
現代の Web 開発で必ずと言っていいほど使います。
HTML に以下を追加する。
<div class="card-list">
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>
</div>CSS に以下を追加する。
.card-list {
display: flex; /* Flexboxを有効にする */
gap: 16px; /* 要素間のスキマ */
justify-content: center; /* 横方向の揃え方（中央） */
}
.card {
background-color: #e3f2fd;
border-radius: 8px;
padding: 24px;
width: 150px;
text-align: center;
}3つのカードが横並びになれば成功。justify-content の値を flex-start / flex-end / space-between に変えて違いを確認してみましょう。
ステップ5: プロフィールページを整える
前ページで作ったプロフィールページに CSS を当てて見た目を整えてみましょう。
以下は参考例です。自由にアレンジしてください。
body {
font-family: sans-serif;
max-width: 600px;
margin: 40px auto;
padding: 0 16px;
color: #333;
}
h1 {
color: #1565c0;
border-bottom: 2px solid #1565c0;
padding-bottom: 8px;
}
ul {
line-height: 2;
}
a {
color: #1565c0;
}確認しよう
-
style.cssを作ってindex.htmlに読み込めた - タグセレクター・クラスセレクターを使えた
-
color/font-size/padding/margin/border-radiusを試した - Flexbox で要素を横並びにできた
- プロフィールページに CSS を当てた
AIに聞いてみよう
「CSSで要素を画面の中央に配置する方法をいくつか教えてください」
次のステップ
Last updated on