こんにちは！
前回まではHTMLで「骨組み」を作ってきました。
でも、それだけだと見た目はちょっと味気ないですよね。
ここからは CSS（シーエスエス） を使って、Webページを「オシャレ」にしていきましょう！
今日のテーマ
- CSSの書き方がわかる
- CSSの適切な使い方がわかる
1.CSSとは？
CSSは「Cascading Style Sheets」の略で、HTMLで作ったページの「デザイン」を担当するための言語です。
- 背景の色を変えたり
- 文字を大きくしたり
- 中央に配置したり
といったことが、CSSを使うと簡単にできるようになります！
2.CSSの書き方
CSSは「セレクタ」「プロパティ」「値」の3つで構成され、以下のように書きます。
セレクタ {
プロパティ: 値;
}- セレクタ：どの要素に適用するか（例：
pは段落） - プロパティ：スタイルの種類（例：
color、font-size） - 値：プロパティの設定値（例：
red、16px）
たとえば、見出し<h1>の色を青にしたいときはこのように書きます
h1 {
color: blue;
}これで <h1> に指定された見出しが青くなります！
3.HTMLにCSSを読み込む方法
3-1.方法①：外部ファイルで読み込む（推奨）
CSSのコードは、HTMLファイルとは別に「.css」という拡張子のファイルに書きます。
ここではstyle.cssというファイル名で作成しました。
これをHTMLの<head>内に次のように記述して読み込みます。
<link rel="stylesheet" href="style.css">このようにすることで、HTMLとCSSを分けて管理でき、複数のページでも再利用ができるので便利です。
3-2.方法②：HTML内に直接書く（<style>タグ）
２つ目は以下のように<style>タグを書きその中にCSSを書いていく方法です。
<style>
h1 {
color: blue;
}
</style>学習用やコードのテストには便利ですが使い回せなかったり冗長になってしますのでそれら以外では使わない方が良いです。
3-3.方法③：タグに直接書く
３つ目はタグの中にstyle属性として書いていく方法です。
<p style="color: red;">赤い文字です</p>簡単ですが、こちらも再利用ができないので非推奨です。
こちらもコードのテストには便利です。
詳しい解説はコチラ↓
4.よく使うCSSプロパティ一覧
よく使うプロパティをまとめました。
一旦は以下の表のものを覚えておけば大丈夫です。
| プロパティ | 意味 | 例 |
|---|---|---|
color | 文字の色 | color: #333; |
background-color | 背景色 | background-color: lightblue; |
font-size | 文字の大きさ | font-size: 18px; |
text-align | 文字の配置 | text-align: center; |
margin | 外側の余白 | margin: 20px; |
padding | 内側の余白 | padding: 10px; |
5.実践：簡単なCSSデザイン例
簡単な練習問題です。
早速手を動かして変化を確かめてみましょう！
<h1>CSSの練習</h1>
<p>はじめてのスタイルシート！</p>h1 {
color: darkgreen;
text-align: center;
}
p {
font-size: 18px;
background-color: #f0f0f0;
padding: 10px;
}例のようになれば完璧です！
CSSの練習
はじめてのスタイルシート！
6.まとめ
- CSSはHTMLにデザインを加えるためのスタイル言語
セレクタ { プロパティ: 値; }という形式で書く- 外部CSSファイルで管理するのが基本スタイル
color,font-size,marginなどの基本プロパティから始めよう！
7.次回：レイアウトを作る（Flexbox編）
今回はCSSの基本的な使い方を紹介しました。
次は「Flexbox」を使って複数の要素を横に並べたり中央に配置する方法を学びます！
「デザインっぽく見えるレイアウト」が作れるようになります。
コメント