25_ CSSとは？【超入門・体系化ノート】～小学生でもわかるWebページのおしゃれ担当～
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
06_CSSとは？【超入門・体系化ノート】
～小学生でもわかるWebページのおしゃれ担当～
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
# 1. CSSって何？
前回は、
HTMLタグや属性を使って、
Webページの骨組みを作りました。
でも、
HTMLだけでは、
少し味気ないページになります。
そこで登場するのが、
CSS
（Cascading Style Sheets）
です。
CSSとは、
「Webページの見た目を整える言語」
です。
━━━━━━━━━━━━━━━━━━
# 家で考えてみよう
家を建てるとき、
最初に、
壁や屋根を作ります。
これが、
HTMLです。
そのあと、
壁紙
床
カーテン
家具
照明
などを置いて、
きれいな家になります。
これが、
CSSです。
━━━━━━━━━━━━━━━━━━
# HTMLとCSSの役割
HTML
↓
骨組みを作る
CSS
↓
色やデザインを付ける
JavaScript
↓
動きを付ける
この3つがそろうと、
本格的なWebページになります。
━━━━━━━━━━━━━━━━━━
# CSSでできること
CSSでは、
例えば、
・文字の色
・文字の大きさ
・背景色
・余白
・線
・画像の大きさ
・ボタンのデザイン
などを自由に変更できます。
━━━━━━━━━━━━━━━━━━
# HTMLだけの場合
例えば、
```html
<h1>こんにちは</h1>
```
これだけでも表示できます。
でも、
色は黒、
デザインもシンプルです。
━━━━━━━━━━━━━━━━━━
# CSSを追加すると？
例えば、
```css
h1{
color:blue;
}
```
すると、
見出しが、
青色になります。
HTMLは変えずに、
見た目だけ変更できます。
━━━━━━━━━━━━━━━━━━
# CSSファイルを作ろう
VS Codeで、
新しいファイルを作ります。
名前は、
style.css
にします。
これが、
CSS専用ファイルになります。
━━━━━━━━━━━━━━━━━━
# フォルダ構成
Web勉強
├ 01_HTML
│ ├ index.html
│ ├ style.css
│ └ images
│ └ cat.jpg
HTMLとCSSは、
同じフォルダへ置くことが多いです。
━━━━━━━━━━━━━━━━━━
# HTMLとCSSをつなぐ
HTMLへ、
CSSを読み込ませます。
headタグの中へ、
次のように書きます。
```html
<link rel="stylesheet"
href="style.css">
```
これで、
HTMLとCSSがつながります。
━━━━━━━━━━━━━━━━━━
# CSSを書く流れ
HTMLを書く
↓
style.cssを書く
↓
保存する
↓
ブラウザで見る
↓
修正する
↓
完成
━━━━━━━━━━━━━━━━━━
# HTMLツリー
HTML
│
├ head
│ │
│ ├ title
│ │
│ └ link
│ │
│ └ style.css
│
└ body
│
├ h1
│
└ p
━━━━━━━━━━━━━━━━━━
# CSSのイメージ
HTML
↓
「こんにちは」
CSS
↓
青色
↓
文字を大きく
↓
中央へ配置
↓
背景色を付ける
見た目だけを変更できます。
━━━━━━━━━━━━━━━━━━
# 家で例えると
HTML
↓
家を建てる
CSS
↓
壁紙を貼る
↓
家具を置く
↓
カーテンを付ける
↓
完成
━━━━━━━━━━━━━━━━━━
# 今日覚えること
□ CSSは見た目を整える言語
□ HTMLは骨組み
□ CSSはデザイン担当
□ style.cssというファイルを作る
□ HTMLとCSSをつなぐ
□ 色・大きさ・背景などを変更できる
━━━━━━━━━━━━━━━━━━
# HTML・CSSの関係
HTML
│
├ h1（見出し）
├ p（文章）
└ img（画像）
↓
CSS
├ 色
├ 大きさ
├ 背景
├ 枠線
├ 余白
└ レイアウト
━━━━━━━━━━━━━━━━━━
# 一言でまとめる
CSSとは、
「Webページをきれいにデザインする言語」
です。
もっとかんたんに言うと、
「ホームページのおしゃれ担当」
です。
HTMLで骨組みを作り、
CSSで色やデザインを追加することで、
見やすく美しいWebページを作ることができます。
━━━━━━━━━━━━━━━━━━
# 次回予告
次は、
**「07_HTMLとCSSをつなぐ方法【超入門・体系化ノート】」**
を学びます。
HTMLからCSSを読み込む方法や、
`<link>`タグの役割、
実際に文字の色を変えながら、
HTMLとCSSの連携を体験していきましょう。
#CSS
#HTML
#VSCode
#Web制作
#スタイルシート
#デザイン
#初心者
#HTMLCSS
#プログラミング
#超入門
🔷次の記事はこちらから⇩
