28_ CSSで文字・色・背景を変えてみよう【超入門・体系化ノート】～小学生でもわかるCSSのデザイン体験～
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
09_CSSで文字・色・背景を変えてみよう【超入門・体系化ノート】
～小学生でもわかるCSSのデザイン体験～
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
# 1. CSSを書いてみよう
前回は、
CSSの基本ルール
（セレクタ・プロパティ・値）
を学びました。
今回は、
実際にCSSを書いて、
Webページの見た目を変えてみましょう。
━━━━━━━━━━━━━━━━━━
# HTMLを準備しよう
まずは、
index.htmlを書きます。
```html
<!DOCTYPE html>
<html>
<head>
<title>CSS練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>こんにちは</h1>
<p>CSSの勉強をしています。</p>
</body>
</html>
```
━━━━━━━━━━━━━━━━━━
# CSSを書こう
style.cssへ、
次のように書きます。
```css
h1{
color:blue;
}
```
すると、
見出しが青色になります。
━━━━━━━━━━━━━━━━━━
# 文字を大きくしよう
```css
h1{
font-size:50px;
}
```
font-size
↓
文字の大きさ
数字が大きいほど、
文字も大きくなります。
━━━━━━━━━━━━━━━━━━
# 文字を中央へ
```css
h1{
text-align:center;
}
```
text-align
↓
文字の位置
left
↓
左
center
↓
中央
right
↓
右
になります。
━━━━━━━━━━━━━━━━━━
# 背景色を変えよう
```css
body{
background-color:lightblue;
}
```
bodyは、
画面全体です。
背景が、
水色になります。
━━━━━━━━━━━━━━━━━━
# 文章の色を変えよう
```css
p{
color:red;
}
```
文章だけ、
赤色になります。
━━━━━━━━━━━━━━━━━━
# 枠線を付けよう
```css
p{
border:2px solid black;
}
```
border
↓
枠線
2px
↓
太さ
solid
↓
実線
black
↓
色
━━━━━━━━━━━━━━━━━━
# 内側の余白を付けよう
```css
p{
padding:20px;
}
```
padding
↓
内側の余白
文字が枠線から少し離れます。
━━━━━━━━━━━━━━━━━━
# 外側の余白を付けよう
```css
p{
margin:30px;
}
```
margin
↓
外側の余白
他の部品との間隔が広がります。
━━━━━━━━━━━━━━━━━━
# 幅を決めよう
```css
p{
width:300px;
}
```
width
↓
横幅
300pxになります。
━━━━━━━━━━━━━━━━━━
# 高さを決めよう
```css
p{
height:100px;
}
```
height
↓
高さ
100pxになります。
━━━━━━━━━━━━━━━━━━
# 色はいろいろ指定できる
名前で指定
```css
color:red;
```
━━━━━━━━━━━━━━━━━━
16進数で指定
```css
color:#ff0000;
```
━━━━━━━━━━━━━━━━━━
RGBで指定
```css
color:rgb(255,0,0);
```
━━━━━━━━━━━━━━━━━━
RGBAで指定
```css
color:rgba(255,0,0,0.5);
```
透明度も指定できます。
━━━━━━━━━━━━━━━━━━
# よく使うフォント
```css
font-family:sans-serif;
```
ゴシック体になります。
━━━━━━━━━━━━━━━━━━
```css
font-family:serif;
```
明朝体になります。
━━━━━━━━━━━━━━━━━━
# 太字にしてみよう
```css
font-weight:bold;
```
太字になります。
━━━━━━━━━━━━━━━━━━
# 文字を斜めにする
```css
font-style:italic;
```
斜体になります。
━━━━━━━━━━━━━━━━━━
# 下線を付ける
```css
text-decoration:underline;
```
下線が付きます。
━━━━━━━━━━━━━━━━━━
# 背景画像を付ける
```css
body{
background-image:url("images/background.jpg");
}
```
背景画像を表示できます。
━━━━━━━━━━━━━━━━━━
# 角を丸くする
```css
border-radius:15px;
```
角が丸くなります。
ボタンやカードでよく使われます。
━━━━━━━━━━━━━━━━━━
# 影を付ける
```css
box-shadow:5px 5px 10px gray;
```
立体的に見えるようになります。
━━━━━━━━━━━━━━━━━━
# CSSをまとめて書いてみよう
```css
body{
background-color:lightyellow;
font-family:sans-serif;
}
h1{
color:blue;
font-size:50px;
text-align:center;
}
p{
color:green;
font-size:25px;
border:2px solid black;
padding:20px;
margin:30px;
border-radius:10px;
background-color:white;
}
```
これだけで、
かなり見た目が変わります。
━━━━━━━━━━━━━━━━━━
# CSSを書く流れ
HTMLを書く
↓
CSSを書く
↓
保存する
↓
Live Serverで確認
↓
修正する
↓
完成
━━━━━━━━━━━━━━━━━━
# CSSツリー
CSS
│
├ body
│ ├ background-color
│ └ font-family
│
├ h1
│ ├ color
│ ├ font-size
│ └ text-align
│
└ p
├ color
├ border
├ border-radius
├ padding
├ margin
├ width
├ height
└ background-color
━━━━━━━━━━━━━━━━━━
# 家で例えると
HTML
↓
家を建てる
CSS
↓
壁紙
↓
家具
↓
カーテン
↓
照明
↓
庭
↓
完成
HTMLは家を作る人、
CSSはインテリアデザイナーです。
━━━━━━━━━━━━━━━━━━
# 今日覚えること
□ colorは文字色
□ font-sizeは文字サイズ
□ background-colorは背景色
□ text-alignは文字位置
□ borderは枠線
□ border-radiusは角を丸くする
□ box-shadowは影
□ paddingは内側の余白
□ marginは外側の余白
□ widthは横幅
□ heightは高さ
□ font-familyは文字の種類
□ font-weightは太字
□ font-styleは斜体
□ text-decorationは下線
━━━━━━━━━━━━━━━━━━
# 初心者が最初に覚えるCSSランキング
★★★★★（最優先）
□ color
□ font-size
□ background-color
□ text-align
□ font-family
━━━━━━━━━━━━━━━━━━
★★★★☆
□ border
□ border-radius
□ padding
□ margin
□ width
□ height
━━━━━━━━━━━━━━━━━━
★★★☆☆
□ box-shadow
□ font-weight
□ font-style
□ text-decoration
□ background-image
━━━━━━━━━━━━━━━━━━
# 一言でまとめる
CSSとは、
「Webページをきれいにデザインする言語」
です。
もっとかんたんに言うと、
「ホームページのおしゃれ担当」
です。
HTMLで骨組みを作り、
CSSで色・文字・背景・余白・影・角丸などを追加することで、
見やすく美しいWebページを作ることができます。
━━━━━━━━━━━━━━━━━━
# 次回予告
次は、
**「10_CSSのclassとidとは？【超入門・体系化ノート】」**
を学びます。
HTMLで学んだ
「class」と「id」を、
CSSではどのように使うのか、
デザインを自由に変更しながら学んでいきましょう。
#CSS
#HTML
#Web制作
#VSCode
#Selector
#Property
#Value
#color
#margin
#padding
#初心者
#超入門
🔷次の記事はこちらから⇩
