HTML&CSSコーディング
CSSの役割とコードの書き方

HTMLでマークアップすることで、ウェブページにコンテンツを表示することができます。

しかし、実際のウェブページではレイアウトがほぼ必須です。

ここでは、HTMLコードに対してレイアウト情報を付加するCSSについて、その仕組みと書き方をわかりやすく解説します。

CSSはHTMLとセットで使う

実用的なウェブサイトをつくるには、HTMLとCSSをセットで使用します。

HTMLで記述したウェブページに表示するコンテンツに対して、CSSでどのように見せるのかレイアウトを取ります。

例えば、テキストであれば、そのフォントの種類から大きさ、色、余白など、細かく設定することができます。

CSSコードの書き方

CSSコードは、次のように記述します。

h1 {
  font-size: 24px;
}

ここでのh1は「htmlのh1タグに対して」という意味です。何に対して適用するかを指定するものをセレクタといいます。

セレクタの後には、半角スペースが入り、{}が続きます。HTMLの<>とはカッコの種類が異なります。

{} の中で、何をどうするかを記述します。上記例では、font-sizeが「何を」に該当し、24pxが「どうするか」に該当します。

ちなみに「何を」に該当するものをプロパティ、「どうするか」に該当するものを値と呼びます。

つまり、上記のCSSコードは「h1タグのフォントサイズを24pxにする」と宣言しています。

これを次のHTMLに適用させてみます。

<h1>大見出しのフォントサイズが24pxになります。</h1>

比較として、CSSで大きさを指定していないh1は↓になります。指定しない場合は初期値が反映されます。

また、慣例的に{}内は上記例のとおりに改行し、プロパティの前には半角スペースを2つ取ります。こうすることで、コードやプロパティが増えても見やすさを保つことができます。

プロパティを複数記述する

上記例では、フォントサイズのみを指定しましたが、同時に他のレイアウトも指定することができます。

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

ここでは、colorプロパティを追加しました。文字通り、色を指定するもので、値は赤にしています。

このように、ひとつの{}内にプロパティを複数記述することができます。

次のページでは、CSSをHTMLに適用する具体的な方法について解説します。