[コーディングの基礎] CSSの基本的な考え方と文法

cssの基本的な文法

cssの文法、何をどうすればどう反映されるのかを知る上で念頭に置いておく必要があるのが以下の原理です。

これ(セレクタ)に、こんなデザイン(プロパティ)を、これくらい(値)反映させる。

そして、これをcssの記述に置き換えると以下のようなものになります。

See the Pen コーディング基礎:cssの基本的な文法 by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

「セレクタ」だとか「プロパティ」だとか「値」といった新しいワードが出てきましたね。
詳しく解説します。

セレクタ・・・どのhtmlタグか

セレクタは「どのhtmlタグに適用するか」を指定するものです。
divタグにデザインを適用したければセレクタはdivになりますし、pタグにデザインを適用したければセレクタはpになります。
ざっくり言うと、cssへ記述する際は、htmlファイルに記述したhtmlタグから<(小なり)と>(大なり)、閉じタグ</○○>を消せばいいわけです。

See the Pen コーディング基礎:cssの基本的な文法・・・セレクタ by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

上の例では、divタグをセレクタにした場合と、pタグをセレクタにした場合を記述しました。
※プロパティ・値は適当です

htmlの記述との違いは、それぞれ、<と>、そして閉じタグ</○○>が取り払われ、代わりにセレクタ {～}を記述している点です。
cssの波カッコはhtmlタグの開始タグと閉じタグと同じように適用範囲の開始と終了を意味します。
{と}の間、つまり内側に、以下のプロパティと値を記述することでcssが反映されるということ。

プロパティ・・・どんなスタイルを/ 値・・・どのくらい適用させるか

プロパティは「どんなスタイル(デザイン)を適用させるか」の指定です。
例えば、背景色を指定したければ「background-color」というプロパティを使い、
フォントのサイズを指定したければ「font-size」というプロパティを使います。
プロパティの最後には必ず「:(コロン)」を記述します。

値はプロパティを「どれくらい適用させるか」の指定です。
背景色を赤にしたい場合は色名やカラーコードで指定したり、
フォントのサイズを大きくしたり小さくしたりしたい場合は数字を変えたりします。
値の最後には必ず「;(セミコロン)」を記述します。

繰り返します。

「プロパティ」と「値」の間に「:(コロン)」、行の最後に「セミコロン(;)」を半角英数字で記述するのがルールです。
※本学のPC教室のキーボードでは、コロンは「け」、セミコロンは「れ」のキーの位置にあると思います。

See the Pen コーディング基礎:cssの基本的な文法・・・プロパティ by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

上の例では、
div {background-color: red;}の記述でdivタグをセレクタにして背景色を赤に指定、
p {font-size: 14px;}の記述でpタグをセレクタにしてフォントのサイズを14pxに指定しました。

こんな風に、セレクタごとのプロパティ&値の指定を繰り返しているわけです。
なお、1つのセレクタに対しプロパティと値は複数指定することができます。

ちょっと練習してみよう

セレクタ・プロパティ・値に関しては理解できましたか??ちょっと練習してみましょう。
例えば、ぺージ全体やブロックごとのタイトルには見出しの役割をもつ「hタグ(heading)」を使いますが、
ページタイトルにh1タグを使って、文字の大きさを20pxに指定したい場合、html・cssは以下のように書きます。

See the Pen Coding Basic / description method No.1 by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

なおこちらは「Code Pen」という外部のサービスで、ウェブデザインAの授業でも使用します。
現状は「HTML」と「CSS」のタブがあってそれぞれすでに記述があり、それらが反映された結果が「Result」に表示されています。
具体的に言えば、セレクタ(h1)に対し、プロパティ(font-size)を値(20px)と指定されています。

では上の「Code Pen」のウィンドウを「CSS」のタブに切り替え、以下の記述を参考に、
ラインを引いているプロパティ「color」と値「red」を追記してみましょう。

プロパティと値をCode Penの「CSS」の「h1」セレクタ内に追記しよう
h1 {
  font-size: 20px;
  color: red;/* h1の文字色をred(赤)に指定 */
}

どうかな??「Result」の文字の大きさは20px、文字色は赤色になっているかな??
問題なく表示されていたら、みなさんがcssの入り口に入れたということですね。
cssではこんなふうに記述を繰り返しデザインを反映させていきます。

以下の記事も参考になるかと思います。

【初心者向け】CSSセレクタとは？セレクタの種類や指定方法を解説！（基礎編）

CSS文法の基礎 これまでのまとめ | CSS入門編 – ウェブプログラミングポータル