26_ HTMLとCSSをつなぐ方法【超入門・体系化ノート】～小学生でもわかるHTMLとCSSの連携～
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
07_HTMLとCSSをつなぐ方法【超入門・体系化ノート】
～小学生でもわかるHTMLとCSSの連携～
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
# 1. HTMLとCSSをつなごう
前回は、
CSSが
「Webページのおしゃれ担当」
だと学びました。
でも、
CSSファイルを作っただけでは、
まだHTMLには反映されません。
HTMLへ、
「このCSSを使ってください」
と教える必要があります。
その役目をするのが、
<link>
タグです。
━━━━━━━━━━━━━━━━━━
# 家で考えてみよう
例えば、
家を建てました。
でも、
家具屋さんへ
「家具を持ってきてください。」
とお願いしなければ、
家具は届きません。
HTML
↓
家
CSS
↓
家具
<link>
↓
家具屋さんへお願い
というイメージです。
━━━━━━━━━━━━━━━━━━
# HTMLとCSSをつなぐ場所
<link>タグは、
headタグの中へ書きます。
例えば、
```html
<head>
<title>私のホームページ</title>
<link rel="stylesheet"
href="style.css">
</head>
```
これで、
HTMLとCSSがつながります。
━━━━━━━━━━━━━━━━━━
# linkタグを見てみよう
```html
<link
rel="stylesheet"
href="style.css">
```
それぞれ意味があります。
link
↓
CSSを読み込む
rel
↓
何のファイルなのか
stylesheet
↓
CSSですよ
href
↓
ファイルの場所
━━━━━━━━━━━━━━━━━━
# style.cssを書こう
例えば、
style.cssへ
次のように書きます。
```css
h1{
color:blue;
}
```
すると、
h1が、
青色になります。
━━━━━━━━━━━━━━━━━━
# HTMLはそのまま
HTMLは、
変える必要はありません。
```html
<h1>
こんにちは
</h1>
```
HTMLは、
骨組みだけを書きます。
━━━━━━━━━━━━━━━━━━
# CSSだけ変える
例えば、
```css
h1{
color:red;
font-size:40px;
}
```
CSSを書き換えるだけで、
見た目が変わります。
HTMLは、
そのままです。
━━━━━━━━━━━━━━━━━━
# 保存して確認しよう
HTMLを書く
↓
CSSを書く
↓
Ctrl + S
↓
ブラウザを見る
↓
変更を確認
Live Serverなら、
保存するだけで、
画面が自動更新されます。
━━━━━━━━━━━━━━━━━━
# フォルダ構成
Web勉強
├ 01_HTML
│ ├ index.html
│ ├ style.css
│ └ images
│ └ cat.jpg
HTMLとCSSは、
同じフォルダへ置くことが多いです。
━━━━━━━━━━━━━━━━━━
# HTMLツリー
HTML
│
├ head
│ │
│ ├ title
│ │
│ └ link
│ │
│ └ style.css
│
└ body
│
├ h1
│
└ p
━━━━━━━━━━━━━━━━━━
# CSSの流れ
HTMLを書く
↓
linkタグでCSSを読む
↓
style.cssを読む
↓
ブラウザ
↓
見た目が変わる
━━━━━━━━━━━━━━━━━━
# 家で例えると
家
↓
家具を注文
↓
家具が届く
↓
部屋がおしゃれになる
Webでは、
HTML
↓
CSSを読み込む
↓
ブラウザ
↓
デザイン完成
となります。
━━━━━━━━━━━━━━━━━━
# 今日覚えること
□ HTMLとCSSは別ファイル
□ linkタグでCSSを読み込む
□ linkタグはheadタグの中へ書く
□ hrefはCSSファイルの場所を書く
□ CSSだけで見た目を変更できる
□ Live Serverを使うと便利
━━━━━━━━━━━━━━━━━━
# 一言でまとめる
HTMLとCSSは、
「linkタグでつながる」
という関係です。
もっとかんたんに言うと、
「家に家具を運んでもらうための連絡」
です。
HTMLで骨組みを作り、
CSSでデザインを追加することで、
見やすく美しいWebページが完成します。
━━━━━━━━━━━━━━━━━━
# 次回予告
次は、
**「08_CSSの書き方（セレクタ・プロパティ・値）とは？【超入門・体系化ノート】**
を学びます。
CSSの基本である
「誰を（セレクタ）」
「何を（プロパティ）」
「どうする（値）」
という書き方を、
図やツリーを使って、
小学生でも分かるように学んでいきましょう。
#CSS
#HTML
#link
#stylesheet
#VSCode
#Web制作
#LiveServer
#初心者
#HTMLCSS
#超入門
🔷次の記事はこちらから⇩
