CSSのきほん🎨
HTMLが骨組みなら、CSSは「服・お化粧・お部屋のレイアウト」。同じHTMLでも、CSSしだいで見た目はガラッと変わるよ。
まずは、文字を好きな色にできたらOK
色、余白、並べ方。CSSでできることはたくさんあるけど、いっぺんに覚えなくてだいじょうぶ。今日は好きな見た目を1つ作ってみよう。
このページで出てくるものを見る
- 文字と背景の色を変える
- どのHTMLを着せかえるか選ぶ
- 余白とふちどりをつける
- カードを横やマス目に並べる
- スマホでも見やすくする
最初は、用意してある色の名前をそのまま使えばOK。暗記はいらないよ。
CSSには、英語の名前で呼べる色が用意されているよ。色の丸を見ながら、使ってみたい色を1つ選ぼう。
よく使う色の名前
black黒
gray灰色
white白
red赤
orangeオレンジ
gold黄色
green緑
skyblue空色
blue青
purple紫
hotpink濃いピンク
brown茶色
英字の部分を、そのままCSSへ書き写せば使えるよ。ブラウザには、ほかにもたくさんの色名が用意されている。
MDNで色名の一覧を見る ↗自分で色を探すときは、どう検索する？
- 検索欄へ
CSS 色 名前 一覧 MDNと入れる - 検索結果から、URLに
developer.mozilla.orgとあるページを開く - ページ内の色見本とCSSの書き方を一緒に確かめる
MDNは、Webの書き方やブラウザ対応を調べられる資料だよ。この先わからないCSSが出たときも、名前の後ろへMDNを足して検索すると公式の説明を見つけやすい。
色が変わったら大成功！ CSSは、こんなふうに見た目を1つずつ指定するよ。
いま開いている1項目だけやればOK。変化を見たあとで、使った言葉を短く説明するよ。
1色の名前を使うbackground
backgroundは、文字のうしろをぬるための言葉だよ。上の色見本から、こんどは背景に使いたい色を選ぼう。
別の色も試したくなったら、色名だけを何度でも入れかえて遊べるよ。
2カラーコードを使う#ffb6c1
色名だけでは足りないときは、カラーコードを使うよ。赤、緑、青の光をどれくらい混ぜるか、6文字で表している。
- 2文字ずつ、赤、緑、青の強さを表す
00に近いほど弱く、ffに近いほど強い- 数字のほかに
aからfも使う。これを「16進数」と呼ぶ
16進数を自分で計算する必要はないよ。カラーピッカーで色を選び、出てきたコードをコピーして使える。
#ffb6c1：明るいピンク
#87ceeb：空のような水色
色を目で選ぶと、HEX、RGB、HSLなどの値をまとめて見られる。まずはHEXの#87ceebのような値をコピーすればOK！
ほかの色の書き方も、名前だけ見ておく
hotpink：英語の色名。最初の練習に向いている#ff69b4：カラーコード。選べる色がとても多いrgb(255 105 180)：赤、緑、青の量で決めるhsl(330 100% 71%)：色あい、鮮やかさ、明るさで決める
どれも色を指定する別の書き方だよ。今は色名とカラーコードが使えれば十分！
MDNで色の書き方を見比べる ↗3文字を大きくするfont-size
font-sizeは文字の大きさ。24pxは「24ピクセルの大きさ」という意味だよ。
font-sizeは文字の大きさ、font-weightは文字の太さを変えるよ。
4箱の角を丸くするborder-radius
border-radiusは、箱の角をどれくらい丸くするか決めるよ。数字が大きいほど丸くなる。
borderはふちどり、border-radiusは角の丸さだよ。数字が大きいほど、角が丸くなる。
5箱の中を広くするpadding
paddingは、文字と箱のふちの間にすきまを作るよ。このすきまを「内側の余白」と呼ぶ。
paddingは、文字と箱のふちのあいだに作る「内側の余白」だよ。
6箱どうしを離すmargin
marginは、箱の外側にすきまを作るよ。margin-topは、箱の上側だけを離す書き方。
marginは箱の「外側の余白」。margin-topなら、箱の上側だけに余白を作るよ。
7変えたいものだけ選ぶclassとセレクタ
class="favorite"は、HTMLにつける目印だよ。同じ目印をつけると、同じ見た目にできる。
class="favorite"はHTMLにつける目印。CSSの.favoriteは、その目印があるものだけを選ぶよ。
やりたいことから、CSSの書き方を探す
名前を忘れたときに開く早見表だよ。左の「やりたいこと」から探して、そのまま書き方をまねしてみよう。
色を変えたい
- 文字の色
color: hotpink;- 背景の色
background: skyblue;
色の部分には、hotpinkのような色名も、#ffb6c1のようなカラーコードも使えるよ。
文字や箱の形を変えたい
- 文字を大きくする
font-size: 24px;- 箱の角を丸くする
border-radius: 8px;
すきまを作りたい
- 箱の内側
padding: 16px;- 箱の外側
margin: 16px;
変えるものを選びたい
HTMLへclass="favorite"という目印をつける。
CSSでは.favoriteと書くと、その目印があるものだけを選べるよ。
🐣 つぎの練習：ページ全体を整えようCSSファイルのつなぎ方と、横並び・マス目・スマホ表示を順番に試すよ
💄 CSSってなに？
CSS（Cascading Style Sheets）は、「どの要素を」「どんな見た目にするか」を指定する言語。基本の書き方はこう。
セレクタ {
プロパティ: 値;
}たとえば、すべての<p>タグの文字をピンクにしたいなら：
p {
color: hotpink;
}pの部分を「セレクタ」、{ }の中身を「宣言（プロパティ: 値;）」と呼ぶよ。
書き方は3つあるけど、いちばんのおすすめは③だよ。
① インラインスタイル
<p style="color: hotpink">
やあ
</p>タグに直接書く方法。手軽だけど、量が増えると管理が大変になるので基本は非推奨。
② headの中に書く
<style>
p { color: hotpink; }
</style>そのページだけの特別なスタイルを書きたいときに便利。
③ 別ファイルにする（おすすめ）
<link rel="stylesheet" href="style.css" />HTMLとCSSを別ファイルに分けて、<link>タグで読み込む方法。このサイトも実際にこの方法で作られているよ。
color: hotpink;
文字の色を変えるよ。
見本：ピンクの文字background: #fff27a;
うしろの色を変えるよ。
見本：黄色の背景border-radius: 12px;
箱の角を丸くするよ。
見本：角がまるい箱「どの要素を選ぶか」の指定方法。この3つをまず覚えよう。
| 書き方 | 選ばれるもの |
|---|---|
p | すべての<p>要素（タグ名で指定） |
.highlight | class="highlight"を持つ要素（複数の要素に使い回せる） |
#special | id="special"を持つ要素（1ページに1回だけ使う想定） |
すべてのHTML要素は、中身のまわりに「内側の余白」と「外側の余白」を持つ、四角い箱として扱われるよ。
↑ 内側から content → padding → border → margin の順で重なっているよ
色にはいろんな書き方があるよ。どれも同じピンク色を表せる。
color: hotpink; | あらかじめ決まった色の名前（147種類ある） |
color: #ff69b4; | 16進数カラーコード（赤緑青を2桁ずつ） |
color: rgb(255 105 180); | 赤・緑・青を0〜255の数字で指定 |
color: hsl(330 100% 71%); | 色相・彩度・明度で指定（直感的に調整しやすい） |
要素を横（または縦）に並べたいときの定番。まずはこれだけ覚えれば、たいていのレイアウトは組める。
display: flex; | これを書いた要素の「直接の子ども」が横に並ぶようになる |
justify-content | 横方向のそろえ方（center / space-between など） |
align-items | 縦方向のそろえ方（centerなど） |
gap | 要素どうしのすきま |
格子状（マス目）にきっちり並べたいときはGridが得意。
画面の幅に合わせて、レイアウトを自動で切りかえる作り方。スマホでもPCでも見やすいページにするために欠かせない考え方だよ。
まず、HTMLの<head>に次のタグが必要。これがないと、スマホでは「PC用の広いページ」がそのまま縮小表示されちゃう。
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><head>にも、実はこのタグが入っているよ。
その上で@mediaという書き方を使うと、「画面の幅が〇〇px以上（または以下）のときだけ」スタイルを変えられる。
/* 画面の幅が480px以上のときだけ効く */
@media (min-width: 480px) {
.nav {
flex-direction: row;
}
}@mediaが反応するよ。
ボックスモデル・色・Flexboxを組み合わせてみよう。数字や色を書きかえて遊んでみてね。