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

cssの書き方

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

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

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

cssの基本の記述方法

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

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

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

セレクタは「どのhtmlタグに適用するか」を指定するものです。
<div></div>タグにデザインを適用したければセレクタは<div></div>タグになりますし、
<p></p>タグにデザインを適用したければセレクタは<p></p>タグになります。

ざっくり言うと、cssへ記述する際は、htmlファイルに記述する際に書いていたhtmlタグから、
<(小なり)と>(大なり)、そして閉じタグ</○○>を消せばいいわけです。

css

/*-- 〜divタグをセレクタにした場合〜 --*/
div {
  background-color: #333;
}

/*-- 〜pタグをセレクタにした場合〜 --*/
p {
  font-size: 14px;
}

上の例では、divタグをセレクタにした場合(2〜4行目)と、pタグをセレクタにした場合(7〜9行目)を記述しました。

上述したようにhtmlの記述との違いは、それぞれ、<と>、そして閉じタグ</○○>が取り払われ、
その代わりにタグの後ろに波カッコ( {と} )を記述している点です。

cssの波カッコはhtmlタグの開始タグと閉じタグと同じように適用範囲の開始と終了を意味します。
{と}の間、つまり内側に、以下のプロパティと値を記述することでcssが反映されるということ。

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

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

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

繰り返します。

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

なお、現時点では「1つのプロパティに対して値が1つ」だと思っておいてください。

例えば・・・「divのbackground-color」・「pのfont-size」を指定する場合

/*-- 〜背景色を赤(red)に指定する場合の記述〜 --*/
div {
  background-color: red;
}

/*-- 〜フォントのサイズを14pxに指定する場合の記述〜 --*/
p {
 font-size: 14px;
}

上の例では、
2〜4行目の記述でdivタグをセレクタにして背景色を赤に指定、
7〜9行目の記述でpタグをセレクタにしてフォントのサイズを14pxに指定しました。

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

ちょっと練習してみよう

セレクタ・プロパティ・値に関しては理解できましたか??
ちょっと練習してみましょう。

例えば、ぺージ全体やブロックごとのタイトルには「hタグ(heading)」というものを使いますが、
ページタイトルにh1タグを使って、文字の大きさを20pxに指定したい場合、html・cssは以下のように書きます。

See the Pen Untitled by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

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

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

3行目のプロパティと値を「Code Penの「CSS」の「h1」セレクタに追記しよう

h1 {
  font-size: 20px;/* h1の文字サイズを20pxに指定 */
  color: red;/* h1の文字色をred(赤)に指定 */
}

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