LESSON 01 / 03 約3分
どこを、どんな見た目にする？
まずは仕組みをつかもう。細かい書き方は覚えなくて大丈夫。
01 これは何？
CSS＊1はHTMLの見た目を変える指定です。「どこを変えるか」をセレクタ＊2で選び、「何をどう変えるか」を中に書きます。.post-cardなら、HTMLでclass="post-card"が付いた部分を選びます。
＊1 CSS：色や配置などを指定する言葉。
＊2 セレクタ：見た目を変える対象の指定。
02 なぜ必要？
同じ投稿カードが10個あっても、CSSを一か所変えるだけで全部の色をそろえられます。HTMLには内容の役割、CSSには見た目を分けて書くと、内容を書き直さずにデザインを調整できます。
03 最小限のコード・図
.post-card {
color: #16302e;
background: #f0fdfa;
font-size: 18px;
}04 ここだけ理解する
- 先頭のドットはclassを選ぶ目印。
- colorは文字色、backgroundは背景。
- HTMLとCSSが結び付いて初めて見た目が変わる。
05 覚えなくていいこと
色番号や指定項目を全部暗記する必要はありません。
ASK AI
06 AIに聞いてみよう
質問文をコピーして、ChatGPTやCodexなどに貼り付けてみましょう。
classがpost-cardの投稿カードにCSSを付けてください。白に近い背景と読みやすい濃い文字色にし、各指定の意味、HTMLへの読み込み方も説明してください。
07 AIの回答を見るポイント
- HTMLに存在するclassを指定しているか。
- 背景と文字の色が近すぎて読みにくくないか。
08 だいたい分かったら、次へ
「理解できた」はいつでも取り消せます。記録せずに次へ進んでも大丈夫です。