Loading...
基本的なCSSを知ろう

基本的なCSSプロパティを知ろう

公開
2018.07.16
更新
2018.10.29
  • 講座

  • CSS

本講座では基本的なCSSプロパティについて学んでいきます。

本講座の進め方

1つ1つ、一緒に表示を確認しながら講座を進めていきましょう。

以下のHTMLを任意のファイル名で保存してください。

<!doctype html>
<html lang="ja">
<head>
  <title>CSSプロパティ表示テスト</title>
  <style>
    .testSelector {

    }
  </style>
</head>
<body>
<div class="testSelector">
  <p>ここにスタイルが反映されます。</p>
  <p>ここにスタイルが反映されます。</p>
  <p>ここにスタイルが反映されます。</p>
</div>
</body>
</html>

本講座で取り上げるCSSを、6行目の.testSelector {}の中に記述して、一緒に表示を確認していきましょう。

ボックス装飾系

HTML要素の全体を装飾するものを、Gieerでは"ボックス装飾系"と呼びます。

ボックス装飾系には以下のようなCSSプロパティがあります。

  • background-color
  • border

background-color

背景色を指定するCSSプロパティです。

.testSelector {
  background-color: skyblue;
}

background-color

該当のHTML要素全体に、指定した背景色が敷かれます。

border

境界線を指定するCSSプロパティです。
「幅 -> 種類 -> 色」という順で値を指定します。

.testSelector {
  border: 1px solid gray;
}

border

該当のHTML要素に指定した内容の境界線が引かれます。

ボックス整形系

HTML要素の全体を整形するものを、Gieerでは"ボックス整形系"と呼びます。

ボックス整形系には以下のようなCSSプロパティがあります。

  • width
  • height

width

要素幅を指定するCSSプロパティです。
わかりやすいようにborderも一緒に指定してみます。

.testSelector {
  width: 300px;
  border: 1px solid gray;
}

width

該当のHTML要素が指定した幅に変わります。

height

要素の高さを指定するCSSプロパティです。
わかりやすいようにborderも一緒に指定してみます。

.testSelector {
  height: 300px;
  border: 1px solid gray;
}

height

該当のHTML要素が指定した高さに変わります。

フォント系

フォント系には以下のようなCSSプロパティがあります。

  • color
  • font-size
  • font-weight
  • font-family
  • text-align
  • line-height

color

文字色を指定するCSSプロパティです。

.testSelector {
  color: red;
}

color

該当のHTML要素の文字が指定した色に変わります。

font-size

文字サイズを指定するCSSプロパティです。

.testSelector {
  font-size: 20px;
}

font-size

該当のHTML要素の文字が指定したサイズに変わります。

font-weight

文字の重み(太さ)を指定するCSSプロパティです。

.testSelector {
  font-weight: bold;
}

font-weight

該当のHTML要素の文字が指定した太さに変わります。

font-family

文字種類を指定するCSSプロパティです。
適応したい文字種類を「,(カンマ)」区切りで優先度順(高 -> 低)に指定します。
値に日本語などの一部の文字列を使用する場合には「'(クォーテーション)」で囲みます。

.testSelector {
  font-family: 'MS 明朝', serif;
}

font-family

該当のHTML要素の文字が指定した種類に変わります。

text-align

文字揃えを指定するCSSプロパティです。

.testSelector {
  text-align: center;
}

text-align

該当のHTML要素の文字が指定した位置に揃います。

line-height

行間を指定するCSSプロパティです。
単位(※)を省略した場合、1文字のサイズを基準に幅が設定されます。

.testSelector {
  line-height: 2;
}

該当のHTML要素の行間が指定した幅に変わります。

line-height


※ 単位については次の講座で詳細に取り上げます

余白系

余白系には以下のようなCSSプロパティがあります。

  • margin
  • padding

どちらのCSSプロパティも4方向に余白の設定が可能で、margin-toppadding-leftの様に「-(ハイフン) + 方向」という形で指定します。

続けて確認してみましょう。

.testSelector {
  margin-left: 50px;
}

margin-left

.testSelector {
  padding-left: 50px;
}

padding-left

該当のHTML要素に指定した方向・幅の余白が設定されます。

marginpaddingの違い

marginは要素の外側paddingは要素の内側に余白が設定されます。
どういうことか、実際に表示して確認してみましょう。

.testSelector {
  margin-left: 50px;
  padding-left: 50px;
  border: 1px solid gray;
}

marginとpaddingの違い

borderプロパティにより要素の境界線が引かれ、その外側と内側に余白が設定されていることが分かります。

marginとpaddingの違い視覚化

使い分けは難しいですが、常にこの違いを意識しながら使ってみてください。

値の継承

ここまでいくつかのCSSプロパティを見てきて、CSSの値が継承されるケースがあることに気が付いたでしょうか?

改めて、CSSを適応させているHTMLを見てみましょう。

<div class="testSelector">
  <p>ここにスタイルが反映されます。</p>
  <p>ここにスタイルが反映されます。</p>
  <p>ここにスタイルが反映されます。</p>
</div>

CSSを適応させているのはdiv要素であり、その中にはp要素が置かれています。

では、ここまでに見てきたCSSプロパティのうち、bordercolorをもう一度見てみます。

.testSelector {
  border: 1px solid gray;
}

border

.testSelector {
  color: red;
}

color

borderdiv要素にのみ適応されているのに対し、colorは中のp要素にも反映されていますね。

このように、CSSプロパティには子・孫要素(※)に対して値を継承するものと、継承しないものがあります。

値の継承は、1箇所の指定でその要素内の全てに反映させられるメリットがあります。
全てに反映させた上で、ある箇所だけ別の指定にしたい場合は、同様のCSSプロパティを個別に設定します。

<div class="testSelector">
  <p class="firstLine">ここにスタイルが反映されます。</p>
  <p>ここにスタイルが反映されます。</p>
  <p>ここにスタイルが反映されます。</p>
</div>
.testSelector {
  color: red;
}

.firstLine {
  color: blue;
}

個別のスタイリング

複雑ですが、使いながら少しづつ覚えていきましょう。


※ あるHTML要素を起点にした時に、直下にある要素を"子要素"、さらにその下にある要素を"孫要素"と呼びます

まとめ

本講座では

  • 基本的なCSSプロパティ
  • 値の継承

について学びました。

あなたは今、基本的ですが本当によく使うCSSプロパティを知ることができました。
CSSをどんどん使ってWEBサイトの可能性を広げていきましょう!

次の記事

これまでの記事

  • ふむふむ・・・

イア

イア(er)
独学する美少女エンジニア

当サイトのナビゲーターであり、あなたと一緒に勉強する同志でもあります。
今はナビゲーターとして未熟のため、ひたすら勉強をさせています。

隠します!