【初心者向け】CSSを書く前に知っておくべき基本とルール

今回の内容

1.CSSとは
2.CSSの書き方
3.CSSのルール
4.まとめ

1.CSSとは

チャッピー

ようやくデザインを学べるようになったけど、その前にCSSってなんのこと？

こばゆた

CSSとは”Cascading Style Sheets”の略でHTMLの要素に対して色や大きさなどを指定しデザインをできるようにしたものなんだ

こばゆた

HTML編で作ったサイトに対して簡単にデザインしてみました

〇〇プログラミングスクール

学べること

言語	内容
HTML	Webサイトの見た目を構成する
CSS	サイトの見た目を作る
Java Script	サイトに動きをつける

アンケート

きなこ

見た目もなんとなく変わったね

こばゆた

例のはシンプルすぎるけど、CSSとはこのような感じで文字の色やレイアウトを変える事ができるんだ

今回はそのCSSの書き方とルールをみていこう

ここまでのまとめ

CSSは”Cascading Style Sheets”の略でHTMLに色や大きさデザインを付けられるもの

2.CSSの書き方

この例だと「h1タグの文字の色を青にしてください」という指示が出ていると思ってください

用語

セレクター

どこの部分を対象とするか。ここには要素名を入れる。

プロパティ

何を変えるか。大きさを変えるのか色を変えるのかなどを指定する。

値

プロパティで指定したものをどうするかを指定する。

「〜の(セレクターの)〜を(プロパティを)〜にする(値)」という感じで覚えます。

例

<h1>こんにちは</h1>

h1{
 color: blue; /*h1の文字色を青にする*/
}

こんにちは

きなこ

自分で色を着けられた！

ちなみにCSSの書き方は改行して書く方が見やすいので改行をしましょう。

h1{color: blue; font-size: 20px; background-color: pink;}

こばゆた

ダメということはないですが、やや見にくいですね

一行で書いても結果は同じですが改行を入れた方が、プロパティの数がたくさん増えた場合も見やすいと思います。

また第三者の方が見てもメンテナンスがしやすいのでぜひ改行して書きましょう！

h1{
  color: blue; 
  font-size: 20px; 
  background-color: pink;
}

こばゆた

改行がされていて見やすいです

ここまでのまとめ

CSSでHTMLを変化させるには…
1. セレクターでどの要素を変化させるかを指定する
  例).h1, p, imgなど
2. 何(プロパティ)を変えるかを指定する
  例).color, font-sizeなど
3. 値を指定する
  例).色を指定、大きさを小さくするなど

h1{
 color: blue; /*h1の文字色を青にする*/
}

CSSを書くときは改行をいれて書く

h1{
  color: blue; 
  font-size: 20px; 
  background-color: pink;
}

3.CSSのルール

3-1.書く際のルール

1. CSSは半角英数字で書く

/*大文字で指定されている*/
h1{
 COLOR: RED;
}

2. { }できちんと囲み、コロンとセミコロンを忘れずにつける

/*セミコロンがない*/
h1{
 color: red
}

忘れるとレイアウトが崩れる可能性があります！

3. コロンとセミコロンが逆にならない様にする

h1{
 coror; red:
}
/*コロンとセミコロンが逆になっている*/

4. 単純にスペルミスに気を付ける

h1{
 coror: red;
}
/*cororになっている*/

チャッピー

けっこうあるんだねぇ

こばゆた

セレクター名を正しく指定するのはもちろんですが、上の４つが最初の頃に間違えやすいので押さえておきましょう

3-2.スタイルの有効範囲

セレクターで指定したものは基本的にWebページ全体に適用されます。

言い換えると同じタグ名があればそちらにもCSSが適用されます。

<h1>こんにちは</h1>
<p>お元気ですか？</p>
<p>私は元気です</p>

p{
 color: blue;
}

こんにちは

お元気ですか？

私は元気です

一つしかCSSを指定していませんが二つあるpタグに”color: blue“が適用されています。

3-3.スタイルの数

また一つのセレクターに対して複数の装飾も指定でき、数はどれだけ入れても大丈夫です。

<h1>こんにちは</h1>
<p>お元気ですか？</p>
<p>私は元気です</p>

p{
 color: blue;
 font-size: 20px;
}

こんにちは

お元気ですか？

私は元気です

チャッピー

改行して書くのを忘れないようにしなきゃ

3-4.プロパティの優先度

きなこ

一つのプロパティで複数の箇所のスタイルを変えられる事は分かったけど、こんな感じで二つとか書いたらどうなるの？

p{
 color: blue;
 font-size: 20px;
 color: red;
}

こばゆた

そういう時は後に書かれているプロパティが優先されるんだよ

こんにちは

お元気ですか？

私は元気です

先に文字色を青にするように指定されていますが、後に書かれている赤の方が適用されているのがわかります。

3-5.スタイリングの継承

こばゆた

少し難しいです、親要素に指定したスタイルは子要素にも継承されます。
これをスタイルの継承といいます。

ここではbodyタグに文字色を青に指定しましたが、指定していないその子要素であるh1タグとpタグの文字色も変わっています。

<body>
  <h1>こんにちは</h1>
  <p>お元気ですか？</p>
  <p>私は元気です</p>
</body>

body{
 color: blue;
}

こんにちは

お元気ですか？

私は元気です

しかし全てが継承される訳ではなく継承されないプロパティもあります。

<body>
  <h1>こんにちは</h1>
  <p>お元気ですか？</p>
  <p>私は元気です</p>
</body>

body{
 border: blue solid 1px;
}

こんにちは

お元気ですか？

私は元気です

こちらのプロパティは継承されていません。

どのプロパティが継承されてどれがされないかを全部紹介するのは大変なので詳しくはこちらのサイト様を参照して下さい。

スタイルシート［CSS］/CSSプロパティ一覧 - TAG index

CSS 2で定義されているプロパティの一覧。各プロパティの値や基本データを掲載しています。

3-6.複数のセレクターを指定する

複数のセレクターに同じスタイルを適用するには、,(カンマ)で区切ります。

<h1>こんにちは</h1>
<p>お元気ですか？</p>
<p>私は元気です</p>

h1,p{
 color: blue;
}

こんにちは

お元気ですか？

私は元気です

h1タグ、pタグともに変わっています。

こばゆた

その他のセレクターの使い方はコチラです！

4.まとめ

CSSの基本まとめ

CSSとはHTMLをスタイリング(デザイン)するもの

CSSでHTMLを変化させるには…
1. セレクターでどの要素を変化させるかを指定する
  例).h1, p, imgなど
2. 何(プロパティ)を変えるかを指定する
  例).color, font-sizeなど
3. 値を指定する
  例).色を指定、大きさを小さくするなど

CSSを書くときは改行をいれて書く

「〜の(セレクターの)〜を(プロパティを)〜にする(値)」とイメージする
書く際のルール
1. 半角英数字で書く
2. コロンとセミコロンを忘れずにつける
3. コロンとセミコロンが逆にならない様にする
4. スペルミスに気を付ける
5. 複数のCSSを適用する時は改行して見やすくする
セレクターで指定したものは基本的にページ全体に適用される。また後から記述したものが優先される
親要素で指定したものが子要素に引き継がれることがある。これをスタイルの継承という。(ただし全てではない)
複数のセレクターを指定する場合は,(カンマで区切る)