CSS実践(2) 「色の指定」「背景」「ボックスモデル」

1. はじめに

本記事では、CSSの
「色の指定」「背景」「ボックスモデル」
について記載する。

2. 色の指定

色指定の方法

・RGB値で指定する方法
・カラー名で指定する方法

RGB値で指定する方法

【サンプル】

styles.css

h1 {
  color: #aa0000;
}

【表示例】

【RGB値で指定する方法】

【10進数と16進数】

10進数と16進数の定義

10進数

数値の表現形式のうち、「0」から「9」までの10種類の数字を使って数値を表現する形式のこと。

10を基数とし、10倍ごとに位取りを行う。0から9までの10個の数字を使い切ったところで桁が上がり、より大きな数字を表していく。

16進数

ひとつの桁において0〜9、A〜Fと並ぶ16個の数値を扱うことができる。

Aが10進数における10に相当し、Fは同じく10進数の15に相当する。

Fの次は位取りをして1桁上がり、10となる。

RGBのバリエーション

・10進数で指定:rgb(255,0,0)
・%で指定:rgb(100%,0%,0%)

カラー名で指定する方法

・赤:red
・緑:green
・青:blue

参考

MDN color:https://developer.mozilla.org/ja/docs/Web/CSS/color_value

3. 背景

背景の目的

・要素の背景色を指定する。
・要素の背景に画像を指定する。

要素の背景色を指定

【サンプル】

styles.css

h1 {
  background-color: #ccc;
}

【表示例】

要素の背景に画像を指定

背景全体

【サンプル】

index.html

<style>
  h1 {
    background-image: url(images/dot.png);
  }
</style>

【表示例】

上記例だと、画像を繰り返し表示しているので、繰り返し表示しない方法がある。(以下例)

背景を一部に反映

【サンプル】

index.html

<style>
  body {
    background-image: url(images/dot.png);
    background-repeat: no-repeat;
  }
</style>

【表示例】

・no-repeatとすることで、繰り返し表示を解除することができる。
・マークアップされた文字や画像などデフォルトでブラウザ画面の左上になるため、
表示例のように画像が左上になる。画像の位置も設定可能。(以下例)

【サンプル】

index.html

<style>
  body {
    background-image: url(images/dot.png);
    background-repeat: no-repeat;
    background-position: center;
  }
</style>

【表示例】

・今回だと位置をセンターにしているが、rightやleftとすることで右や左の位置にすることも可能。(今回は省略)

要素

【サンプル】

index.html

<style>
  body {
    background-image: url(images/dot.png);
  }
</style>

【表示例】

4. 使い分け

Q.HTMLのimg要素と、CSSのbackground-imageの使い分けは？
↓

・img要素:重要な画像
・background-image:背景画像。装飾

5. おわりに

次項:CSS実践(3) 「ボックスモデル」「マージン・マージンの相殺」「ボーダー」に続く。