WEBCRE8TOR.COM中国短期大学情報ビジネス学科 メディア科目ブログ
[コーディングの基礎] CSSの基本的な考え方と記述方法
基礎編

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

2024年10月03日 ／最終更新：2024年10月06日

CSSの基本的な考え方を解説します。キーワードは「セレクタ」「プロパティ」「値」の3つです。

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

cssの書き方

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

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

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

css

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

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

セレクタ

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

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

css

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

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

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

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

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

プロパティ・値

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

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

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

css

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

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

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

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

ちょっと練習してみよう

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

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

まずhtmlを記述しましょう。
前回コーディングした内容の中で<body></body>タグがありましたね。
<body></body>タグは何のためのタグだったか覚えていますか??

<body></body>タグは、ブラウザに表示される内容を記述するブロックで、
ブラウザでは<body></body>タグ内に記述されたhtmlタグにcssを使って指定したレイアウトやデザイン、
そしてJavaScriptを使った動きを表示している・・・でしたね。

この練習もブラウザに表示される部分を調整するので、
当然<body></body>タグ内、つまり<body>から</body>の間に記述します。
早速index.htmlファイルに、ハイライトされている9行目の記述を追加してください。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザインA</title>
</head>
<body>
  <h1>ウェブデザインA</h1>
</body>
</html>

次に、「main.css」に以下の3行を全て記述しましょう。

css

h1 {
  font-size: 20px;
}

さらに、文字色を赤色にしたい場合、以下のような追記をします。

css

h1 {
  font-size: 20px;
  color: red;
}

この結果、h1タグの文字の大きさは20px、文字色は赤色になります。
cssではこんな記述を繰り返しデザインを反映させていきます。

ちょっと見てみましょう。今使ってるブラウザで新規タブを開いて、そこにhtmlフォルダ内にある「index.html」をドラッグ&ドロップ(以後D&D)してください。

どうかな??ちゃんとh1は赤いかな??
問題なく表示されていたら、cssの入り口に入れたということですね。
以下のようにindex.htmlに追加した9行目の記述とmain.cssの記述を丸ごと削除しておきましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザインA</title>
</head>
<body>
</body>
</html>

css

/* h1の指定の記述を消す */

RELATED POST関連記事

© 2024 RYU-YA DESIGN.

PAGE TOP
offcanvas