CSSのきほん🎨
HTMLが骨組みなら、CSSは「服・お化粧・お部屋のレイアウト」。同じHTMLでも、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>タグで読み込む方法。このサイトも実際にこの方法で作られているよ。
「どの要素を選ぶか」の指定方法。この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を組み合わせてみよう。数字や色を書きかえて遊んでみてね。