CSSとは

CSSとは、Cascading Style Sheet(カスケーディング・スタイルシート)の略で、スタイルシート言語の１つです。HTML文書のレイアウトを調整したり、「見出し」や「段落」などのデザインを指定することができます。

ホームページを作成するにあたり、HTMLを勉強すると同時にCSSとの関連や書き方も覚えていく必要があります。基本的なページを作成してHTMLとCSSの具体例を見てみましょう。

CSSの書き方の基本

セレクタ{
  プロパティ：値；
}

この基本書式を使って、HTMLの中の、「どの部分の（セレクタ）」、「何を（プロパティ）」、「どのように変更する（値）」かを指定していきます。

<h1>タイトル</h1>
<p>本文</p>

p {
  color:red;
}

ブラウザでの表示

本文

「pタグ」の部分の「color」を「red」に変更するというcssを記載すると上記のように反映されます。

セレクタの指定方法としては、上記のようなタグの直接指定、クラス指定、Id指定など様々な指定方法があります。

クラス指定の際はセレクタの前に ” . ” を指定します。

.クラス名 {
  color:red;
}

Id指定の際はセレクタの前に ” # ” を指定します。

#Id名 {
  color:red;
}

CSSプロパティは250個近くあると言われ、全てを覚える必要はありません。頻出プロパティを7つ紹介いたしますので手元で装飾のイメージを確認してみましょう。

以下の中でクラス指定の際のセレクタの記述方法として正しいのはどれか

回答

2. .クラス名
#はId指定、何もつけないのはタグ指定、!は用いない

以下の中で要素の外側の余白の指定をする際に用いるプロパティはどれか

回答

3. margin
paddingは要素の内側の余白指定、widthは要素の幅の指定、text-alignはテキストの左右・中央寄せを指定

CSSプロパティを覚える際は必ず手を動かし挙動を確認しながら覚えましょう。テキスト上で理解したつもりになっていても実際に試してみるとうまく動かなかったり想定した動きにならなかったりするケースが多々あります。