Skip to content

adding-a-stylesheet.md

Latest commit

 

History

History
38 lines (35 loc) · 3.4 KB

adding-a-stylesheet.md

File metadata and controls

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