Chap2-3 CSSの基礎知識 I

Chap2-3 CSSの基礎知識 I

HTMLはブラウザで表示する文章の部分、CSSはその文章をデザインする部分です。
HTMLとCSSがゴチャゴチャになりやすいので、しっかりと頭の中を整理しておきましょう。

CSSでデザイン

ブラウザ全体の背景を黒色に、全ての文字を白色にデザインしました。
<body>はブラウザで表示される画面部分を意味するので、<body>にstyle属性を使ってCSSのプロパティと値を記述します。

次のChap2-4へ進む場合は、下のコードをコピーして使っても構いません。

See the Pen Untitled by Rayout-gw (@Rayout-gw) on CodePen.

Master
Master

終わったらミスがないか確認ておきましょうね

HTMLと同じく、色んな授業で使用しているCSSの資料をFigmaから確認できます。

この章のポイント

CSSは見た目のデザイン指示

「背景色を黒色にする」ためのデザインは、「:(コロン)」と「;(セミコロン)」を使って、英単語などの決められたプロパティ名と値でデザインしたい場所のタグに指示を出します。

背景色は「background-color」、黒色は「black」になるので、「:(コロン)」と「;(セミコロン)」を使って記述すると、「background-color:black;」となります。

background-colorをプロパティ名、blackを値と呼び、この記述をHTMLのデザインしたい場所のタグに「style=””」を追加入力して、「””(ダブルクォーテーション)」の間に記述します。