CSSとは?スタイルシートの役割を理解しよう

CSSとは?スタイルシートの役割を理解しよう

   


CSSとは?スタイルシートの役割を理解しよう

この記事の目次

  1. CSSとは?
  2. CSSの書き方
  3. CSSを使ってみよう
  4. 理解するポイント

1.CSSとは?

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

HTMLでWebページの骨組みを構築し、見た目や機能をCSSでデザインするといったイメージです。特に、色、文字の大きさ、レイアウトの幅や高さ、背景等CSSを用いればWebページのデザインを自由自在に変更することができます。

CSSとは?

2.CSSの書き方

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

h1{color:red;}

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

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

セレクタは、CSSを適用したい要素を指定します。上記の場合、h1要素に対してCSSが適用されます。プロパティは、変更を加えたい項目を指定します。上記の「color」は、テキストの色を指定するためのプロパティです。値は、プロパティに用意された値を入れます。

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

プロパティと値は、「{}」(半角)で囲み、プロパティと値の間には「:」(半角)を入れます。実際にコードを書く際は、見やすくするため下記のように書くのが一般的です。

h1{
  color:red;
}

3.CSSを使ってみよう

では、実際にCSSを適用させてみましょう。CSS入門(初級編)では、Web Makerというエディタを使用していきます。インストールが済んでいないという方は、「Web Makerをインストールして、エディターを準備しよう」を参考にインストールしてください。

今回使用するHTMLはこちら

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

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

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

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

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

今回は、CSSとは何か?そして、CSSの使いかたを説明しました。次回から、様々なセレクタを見ていきましょう。

4.理解するポイント

  • CSSとは、HTMLで作成されたWebページにスタイルを付ける為の言語。
  • CSSは、セレクタ・プロパティ・値から構成されています。
  • プロパティと値は、「{}」(半角)で囲み、プロパティと値の間には「:」(半角)を入れます。