Trinket プロジェクトの中で、コードパネルのタブを見て、styles.cssをクリックします。
- CSS はウェブサイトの見た目をきめるコードです。
このファイルには、次のテキストが含まれています。
```
body {
    background-color: white;
}
```
なみかっこ（カーリーブレイス） { } の間のテキストはウェブサイトの見た目を決めるものです。body は、ウェブサイトの中の<body> 要素（タグ）にその見た目を設定するという意味です。なみかっこの外側の部分をセレクタと呼びます。2のテキストは、body要素がセレクタになります。
background-color の横の white を LightSkyBlueに変更し、「Click To Run」をクリックします。 (「Click To Run」は、クリックして実行するというボタンです。覚えておきましょう。) ウェブサイトが青い背景になるはずです！
どうしてこうなるのかな？コードパネルのタブで index.html をクリックして、次のテキストの部分を探してみましょう。 <link type="text/css" rel="stylesheet" href="styles.css"/> この部分は、ブラウザに styles.css という名前のファイルを探すように指示しています。このファイルは、スタイルシートと呼びます。スタイルシートファイルは、ファイル名の最後に.cssと書かれています。スタイルシートには、ページ上の各要素のCSSの決まりが書かれています。
- CSSの書き方は、プロパティ: (コロン)値 ; (セミコロン)の順番で書きます。
プロパティを追加して、文字の見た目を変えてみましょう。なみかっこの中に2つの新しい行を追加します。
```
body {
   background-color: LightSkyBlue;
   font-family: "Helvetica", sans-serif;
   color: purple;
}
```
「Click To Run」をクリックして、ウェブページが変更されたか確認しましょう。
- color というプロパティは、文字の色を設定するプロパティです。
見出しの部分に本文とちがうプロパティを追加できます。h1セレクタにプロパティを設定しましょう。次のコードをstyles.cssファイルの最後に追加します。最後のなみかっこを忘れないようにね。
```
h1 {
   color: orange;
   font-family: "Times New Roman", serif;
}
```
「Click To Run」をクリックします。見出しがむらさき色からオレンジ色になるはずです。
文字の色と同じように、文字の形（フォント）も変わりました。これは、font-familyを変更したからです。 dojo.soy/web-font-families のサイトからたくさんのフォントの種類（フォントファミリー）を見ることができます。
h2セレクタを作成して、<h2>見出しに複数のプロパティを追加してみてください。
文字と背景の色を違う組み合わせにしてみませんか？使うことができる色がたくさんあります。dojo.soy/web-color-namesのサイトから色のリストを見ることができます。

CSS（スタイルシート）を設定しよう

BEGINNER HTML

CSS（スタイルシート）を設定しよう

results matching ""

No results matching ""