HTML・CSS独学応援 3-2 「CSSの書き方」

今回の目的

今回は、CSSの書き方を学びましょう。
覚路ことは、1つだけ!

△△ {
      〇〇 : ☓☓ ;
   }

この形だけ覚えられたら今回はOKです。

CSSの基本は、
この型の△や〇、×に何を入れるか変えるだけです。

書き方

△△ {
      〇〇 : ☓☓ ;
   }

この△や〇、✕を
プログラミングで使う言葉に直すと
こんな感じになります。

  • △ = セレクタ―(どこの)
  • 〇 = プロパティー(なにを)
  • ✕ = 値(どうしたい)
セレクタ― {
      プロパティー : 値 ;
   }

本やネットで情報を集める時に、
「プロパティーに〇〇を指定して・・・」
なんて書かれていることがあります。

セレクター

HTMLのどの部分に対して、指示を出したいのか決めます。
h1やpなど使いましたが、その部分です。

h1 {
    〇〇(プロパティー):✕✕(値);
  }

「h1の○○を××にして!」
こんな感じのイメージです。

プロパティー(何を)

プロパティーでは、何をしたいのか指示します。

ここでは、色を変える指示「color」を使ってみます。

h1{
   color:××(値);}

「h1のcolor(色)を、××にして!」
こんな感じになりました。

プロパティーと値の間には
:(コロン)を忘れずに書いてください。

値(どうする)

値では、どうしてほしいのか伝えます。

color(色)の場合は、
何色にしてほしいのかを伝えます。

h1 {
    color : red;
   }

これで、
「h1の色を赤くして!」っという
指示を出すことができました。

値の後には、;(セミコロン)を忘れずに書いてください。

まとめ

今回は「CSSの書き方」について学びました。
イメージすることはできましたか?

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

この形を覚えられたらOKです!

{ }(波かっこ):(コロン);(セミコロン)も
忘れずに書いてくださいね。

これがないと、
パソコンはどこまでが「セレクタ―」や「プロパティー」「値」なのか
判断できなくて、正しく表示してくれません。

今回は、h1(見出し)に対してcolor(色)を付ける
シンプルなものを紹介しました。

他にもいろんなプロパティーを指定して
いろんな効果を付けることができます。

よく使うものは、今後紹介していきます。

© 2021 ーれおの部屋ー