前回、HTML・CSS・JSの基礎知識を紹介しましたが、今回はCSSの書き方を詳しく解説したいと思います。

CSS ができること

外見です！！！！！CSSは、Webサイトの見た目を美しくするものです。
CSS ではHTMLを記載した内容の外見が変えることができます。
例えば：
ー文字と文字の間隔（padding / margin）
ー文字と背景の色（color / background-color）
ー動画・アニメーション（animation）
https://developer.mozilla.org/ja/docs/Web/CSS
もっと詳しく知りたい場合は、こちらをご参考ください

CSS の構造

セレクタ{
プロパティ:値;
}

例：
p {
 color: red;
}
//HTMLの中のpタグは文字の色が全部赤色に変える

pタグ（セレクタ）の中のcolor文字色（プロパティ）をred（値）にする。

クラス名・ID名を指定

//HTML
<div id="aaa">
 <p>子の段落です</p>    //aaaの子の段落
 <div class="bbb">
   <p>子孫の段落です</p>
 </div>
</div>


//CSS
#aaa,
.bbbb {
 color: blue;
} 

.　＝　クラス名
例としては.aaaaのクラス名を指定します。

＃　＝　ID名
#bbbbのID名を指定します。

また、子孫セレクタの指定も可能です。子孫セレクタとは、親要素の中の要素のことを指します。子のすべての要素を「子孫」と言います。以下のようにid="aaa"は親要素で、#aaaの中のpタグは子要素です。

//HTML
<div id="aaa">
 <p>子の段落です</p>    //aaaの子の段落
 <div class="bbb">
   <p>子孫の段落です</p>
 </div>
</div>

//CSS
#aaa p{
 color: blue;
} 

まずは#aaaです。pはid名「aaa」内のすべてのpタグが対象になります。

//HTML
<div id="aaa">
 <p>子の段落です</p>    //aaaの子の段落
 <div class="bbb">
   <p>子孫の段落です</p>
 </div>
</div>

//CSS
.bbb > p{
 color: blue;
} 

.bbb > pはclass名「bbb」の中のpタグのみが対象になります。d名「aaa」内のpタグは入りません。

*{
 margin: 0;
 padding: 0;
}

最後＊は全部という意味で、すべての要素が対象になります。CSSの初期設定によく使われます。

次はJSの書き方について紹介します！！