CSSとは？スタイルシートの役割とCSSの書き方を理解しよう

2022年1月21日

この記事の目次

CSSとは？

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、HTMLで作成されたWebページにスタイルを付ける（見た目を変更する）為の言語です。

HTMLでWebページの骨組みを構築し、見た目や機能をCSSでデザインするといったイメージです。

特に、色、文字の大きさ、レイアウトの幅や高さ、背景等CSSを用いればWebページのデザインを自由自在に変更することができます。

CSSの書き方を覚えていきましょう。CSSは、セレクタ・プロパティ・値から構成されています。

下記のように書きます。

h1{color:red;}

それぞれ何を意味するのかを見ていきましょう。

h1の部分は「セレクタ」、colorの部分は「プロパティ」、redの部分は「値」と言います。

セレクタは、CSSを適用したい要素を指定します。上記の場合、h1要素に対してCSSが適用されます。

プロパティは、変更を加えたい項目を指定します。

上記の「color」は、テキストの色を指定するためのプロパティです。値は、プロパティに用意された値を入れます。

つまり、上の図を分かりやすくすると、こうなります。

プロパティと値は、「{}」（半角）で囲み、プロパティと値の間には「:」(半角)を入れます。

実際にコードを書く際は、見やすくするため下記のように書くのが一般的です。

h1{
  color:red;
}

では、実際にCSSを適用させてみましょう。

CSS入門（初級編）では、Web Makerというエディタを使用していきます。インストールが済んでいないという方は、「Web Makerをインストールして、エディターを準備しよう」を参考にインストールしてください。もちろん、利用しているエディタがすでにあるという方は、そちらを利用してください。

まずは、HTMLをWeb Makerで表示してください。

<h1>はじめてのCSS</h1>

今回は、h1タグのテキストの色と大きさを変えます。下記コードを「CSS」欄へ入力してください。

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

すると、文字の色と大きさが変わります。

今回は、CSSとは何か？そして、CSSの使いかたを説明しました。

次回から、様々なセレクタを見ていきましょう。

よかったらシェアしてね！