27_ CSSの書き方とは？【超入門・体系化ノート】～小学生でもわかるCSSの基本ルール～
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
08_CSSの書き方とは？【超入門・体系化ノート】
～小学生でもわかるCSSの基本ルール～
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
# 1. CSSとは？
HTMLは、
Webページの骨組みを作る言語でした。
CSSは、
その骨組みに、
色
大きさ
背景
配置
余白
デザイン
などを付ける言語です。
つまり、
HTML
↓
家を建てる
CSS
↓
家をおしゃれにする
という役割になります。
━━━━━━━━━━━━━━━━━━
# HTMLとCSSの違い
HTML
↓
骨組み
↓
何を表示するか
CSS
↓
デザイン
↓
どう見せるか
JavaScript
↓
動き
↓
どう動くか
この3つが揃うことで、
Webページは完成します。
━━━━━━━━━━━━━━━━━━
# CSSの基本構造
CSSは、
たった3つでできています。
セレクタ
↓
誰を？
プロパティ
↓
何を？
値
↓
どうする？
例えば、
```css
h1{
color:red;
}
```
h1
↓
見出し
color
↓
文字の色
red
↓
赤色
━━━━━━━━━━━━━━━━━━
# CSSを書く3つの方法
① 外部CSS（おすすめ）
style.css
を書く
↓
HTMLから読む
━━━━━━━━━━━━━━━━━━
② 内部CSS
headタグの中へ
styleタグを書く
━━━━━━━━━━━━━━━━━━
③ インラインCSS
タグへ
style属性を書く
例
<p style="color:red;">
こんにちは
</p>
現在は、
①外部CSSが
一番よく使われます。
━━━━━━━━━━━━━━━━━━
# コメントを書く
CSSでは、
メモを書くこともできます。
```css
/* 見出し */
h1{
color:blue;
}
```
コメントは、
プログラムとして実行されません。
━━━━━━━━━━━━━━━━━━
# よく使うセレクタ
h1
↓
見出し
p
↓
文章
img
↓
画像
body
↓
画面全体
.class
↓
class
#id
↓
id
━━━━━━━━━━━━━━━━━━
# よく使うプロパティ
color
↓
文字色
font-size
↓
文字サイズ
background-color
↓
背景色
width
↓
横幅
height
↓
高さ
margin
↓
外側の余白
padding
↓
内側の余白
border
↓
枠線
text-align
↓
文字位置
display
↓
表示方法
━━━━━━━━━━━━━━━━━━
# 単位
px
↓
ピクセル
%
↓
割合
em
↓
親のサイズ
rem
↓
基準サイズ
vw
↓
画面幅
vh
↓
画面高さ
━━━━━━━━━━━━━━━━━━
# 色の指定方法
名前
↓
red
blue
green
━━━━━━━━━━━━━━━━━━
16進数
↓
#ff0000
━━━━━━━━━━━━━━━━━━
RGB
↓
rgb(255,0,0)
━━━━━━━━━━━━━━━━━━
RGBA
↓
rgba(255,0,0,0.5)
透明度も指定できます。
━━━━━━━━━━━━━━━━━━
# 優先順位
style
↓
最優先
id
↓
2番目
class
↓
3番目
タグ
↓
最後
CSSには、
優先順位があります。
━━━━━━━━━━━━━━━━━━
# CSSツリー
CSS
│
├ セレクタ
│
├ プロパティ
│
├ 値
│
├ 単位
│
├ 色
│
└ コメント
━━━━━━━━━━━━━━━━━━
# 家で例えると
HTML
↓
家
CSS
↓
壁紙
↓
家具
↓
カーテン
↓
照明
↓
完成
━━━━━━━━━━━━━━━━━━
# 今日覚えること
□ CSSはデザイン担当
□ HTMLと役割が違う
□ セレクタ・プロパティ・値で書く
□ 外部CSSが一番使われる
□ colorは文字色
□ background-colorは背景色
□ marginは外側の余白
□ paddingは内側の余白
□ borderは枠線
□ pxや%などの単位がある
━━━━━━━━━━━━━━━━━━
# 一言でまとめる
CSSとは、
「Webページをきれいに見せるための言語」
です。
もっとかんたんに言うと、
「ホームページのデザイナー」
です。
HTMLで骨組みを作り、
CSSで色・大きさ・余白・配置などを整えることで、
見やすく美しいWebページを作ることができます。
━━━━━━━━━━━━━━━━━━
# 次回予告
次は、
**「09_CSSで文字・色・背景を変えてみよう【超入門・体系化ノート】」**
を学びます。
実際にCSSを書きながら、
文字色・背景色・サイズ・中央揃えなど、
Webページの見た目を自由に変更していきましょう。
#CSS
#HTML
#Web制作
#VSCode
#Selector
#Property
#Value
#初心者
#HTMLCSS
#超入門
🔷次の記事はこちらから⇩
