キャリカク岡山

CSSの使い方を、実際に試してみよう

(左：CSSエディター、右：プレビュー画面)

前回までは、

CSSとは、Webページの見た目を整えるためのもの

ということを紹介しました。

今回は、実際にCSSを書いて、

• ・背景の色を変える
• ・文字の色を変える
• ・文字を大きくする
• ・太字にする
• ・行の間隔を広げる
• ・余白を作る
• ・枠線を付ける
• ・背景色を付ける
• ・角を丸くする

といった操作を試してみます。

CSSは、最初から全部覚える必要はありません。

実際に値を書き換えて、

「ここを変えると、こう表示されるんだ」

と確認しながら覚えていくのがおすすめです。

---

まずは、CSSを書いてみましょう

CSSは、基本的に次のような形で記述します。

body {
    background-color: #e8fff3;
}

このCSSでは、

body

の部分が、

「どこに対して設定するのか」

を指定しています。

そして、

background-color

が、

「何を変更するのか」

という指定です。

最後の、

#e8fff3

が、

「どのような値にするのか」

を表しています。

つまり、

body {
    background-color: #e8fff3;
}

は、

「ページ全体の背景色を、薄い緑色にしてください」

という意味になります。

(#e8fff3などのカラーコードの意味は、

後ほど解説しています。)

---

CSSの基本形

CSSは、基本的に、

対象 {
    項目: 値;
}

という形で書きます。

例えば、

p {
    color: red;
}

• ・p …… 対象
• ・color …… 変更する項目
• ・red …… 設定する値

となります。

これは、

「pタグで囲まれた文字を赤色にする」

という意味です。

CSSでは、この「対象」の部分を、

セレクタ

と呼びます。

また、

color: red; のような部分を、

プロパティ：値；

と呼びます。

ただし、最初から名前を全部覚える必要はありません。

まずは、

「どこを」「何に変える」

という形で理解しておけば十分です。

---

背景色を変えてみる

まず、ページ全体の背景色を変更してみましょう。

body {
background-color: #e8fff3;
}

bodyは、

Webページに表示される内容全体を囲んでいるHTMLタグです。

そのため、

body

にCSSを設定すると、ページ全体に影響します。

background-colorは、

背景色

を設定するためのCSSです。

今回は、

#e8fff3

という薄い緑色を指定しています。

CSSでは、

・red
・blue
・green
・white
・black
など、色の名前を使う方法もあります。

例えば、

body {
background-color: lightblue;
}

と書くこともできます。

---

色を細かく指定する「カラーコード」

今回使っている、

#e8fff3

のような書き方を、

16進数カラーコード

と呼びます。

(16進数とは、10進数での0～15を、
0～9,ABCDEFという順番で表します。
つまり、Aが10進数でいう10、Fが15に相当します)

例えば、

#ffffff
は白、
#000000
は黒、
#ff0000
は赤、
#0000ff
は青です。

(#より右側は2桁の16進数を並べたもので、
0～FFは0～255までを表し、0が一番暗く、FF(255)が最も明るく光る状態になります。
RGBに相当し、R=赤、G＝緑、B=青の値になります。)

カラーコードを使うと、 色の名前だけでは指定できない微妙な色まで設定できます。 Webページを作る場合は、とてもよく使われます。

---

見出しの色を変えてみる

次に、見出しの色を変更します。

HTMLでは、

<h1>
<h2>
<h3>

などが見出しとして使われます。

CSSでは、次のように書くことができます。

h1,
h2,
h3 {
    color: blue;
}

すると、 h1、
h2、
h3
すべての文字が青色になります。 ここで重要なのが、

h1,
h2,
h3

という書き方です。

複数の対象に同じCSSを適用したい場合は、

カンマで区切って並べることができます。

例えば、

h1,
h2,
h3,
h4,
h5,
h6 {
    color: blue;
}

とすると、すべての見出しを青色にできます。

---

本文の文字色を変更する

次は、本文です。

HTMLでは、多くの場合、普通の文章は、

<p>

タグで囲まれています。

そのため、

p {
    color: red;
}

とすると、

pタグで書かれた文章が赤色になります。

ここで少し注意したいのが、

同じpタグが複数あれば、基本的に全部に適用される

という点です。

例えばページ内に100個のpタグがあれば、

p {
    color: red;
}

だけで、その100個すべてが赤文字になります。

これがCSSの非常に便利なところです。

一つ一つの文章に、

<p style="color:red;">

と書く必要はありません。

---

文字の大きさを変更する

文字の大きさは、

font-size

で設定します。

今回の例では、

p {
    font-size: 24px;
}

としています。

pxは、

pixel（ピクセル）

の略です。

画面上の大きさを指定するときによく使います。

例えば、

font-size: 16px;

なら比較的小さめ、

font-size: 24px;

なら大きめ、

font-size: 40px;

ならかなり大きな文字になります。

---

文字を太くする

文字を太字にする場合は、

font-weight

を使います。

p {
    font-weight: bold;
}

とすると、文字が太くなります。

boldは、

太字

という意味です。

そのため、

font-weight: bold;

は、

「文字を太字にしてください」

という指定です。

---

CSSは複数まとめて設定できる

ここまでの設定をまとめると、

p {
    color: red;
    font-size: 24px;
    font-weight: bold;
}

となります。

これで、

• ・文字色は赤
• ・文字サイズは24px
• ・太字

という3つの設定が、同時に適用されます。

CSSでは、このように、

{
    項目: 値;
    項目: 値;
    項目: 値;
}

と複数の設定を書くことができます。

ただし、それぞれの行の最後には、

;

セミコロンを付けます。

CSSを書き始めたころは、このセミコロンを忘れて、

「なぜかCSSが反映されない……」

ということがよくあります。

---

行の間隔を広げる

文章が詰まっていて読みにくい場合は、

line-height

を使います。

今回の例では、

line-height: 2;

としています。

例えば、

p {
    line-height: 2;
}

とすると、行間が広くなります。

文章量が多いページでは、

行間を少し広くするだけでも、

かなり読みやすくなります。

---

要素の下に余白を作る

次は、

margin-bottom

です。

margin-bottom: 40px;

とすると、

要素の下側に40pxの余白

を作ります。

例えば、

p {
    margin-bottom: 40px;
}

とすると、

文章と、その次の要素との間が広くなります。

marginは、

要素の外側の余白

と覚えておくと分かりやすいです。

---

枠線を付ける

CSSでは、文章や画像の周囲に枠を付けることもできます。

今回の例では、

border: 1px solid red;

としています。

分解すると、

1px

は枠線の太さ、

solid

は実線、

red

は枠線の色です。

つまり、

border: 1px solid red;

は、

「太さ1pxの赤い実線を付ける」

という意味になります。

例えば、

border: 3px solid blue;

なら、

太さ3pxの青い枠線になります。

---

要素に背景色を付ける

ページ全体だけでなく、文章の部分だけに背景色を付けることもできます。

background-color: #fff3cd;

今回の例では、薄い黄色を設定しています。

p {
    background-color: #fff3cd;
}

とすると、文章の後ろに背景色が付きます。

ここまで来ると、普通の文章だった部分が、

一つの「ボックス」

のように見えてきます。

Webページでは、このように要素を箱として考えることが非常に重要です。

---

枠の内側に余白を作る

背景色や枠線を付けると、文字が枠ギリギリに表示されてしまいます。

そこで使うのが、

padding

です。

padding: 20px;

とすると、

枠線と文字との間に20pxの余白

ができます。

ここで、

margin

と、

padding

の違いが出てきます。

簡単に言えば、

• margin …… 箱の外側の余白
• padding …… 箱の内側の余白

です。

これはCSSで非常によく使う考え方なので、ぜひ覚えておきたいところです。

---

角を丸くする

最後に、

border-radius

を使ってみます。

border-radius: 12px;

とすると、枠の四隅が丸くなります。

例えば、

p {
    border: 1px solid red;
    border-radius: 12px;
}

とすると、

四角い枠線が少し柔らかい印象になります。

最近のWebサイトでは、

ボタンやカードなどの角を丸くするデザインがよく使われています。

---

今回使用したCSSをまとめると

今回のサンプルでは、最終的に次のようなCSSになっています。

body {
    background-color: #e8fff3;
}

h1,
h2,
h3 {
    color: blue;
}

p {
    color: red;
    font-size: 24px;
    font-weight: bold;
    line-height: 2;
    margin-bottom: 40px;
    border: 1px solid red;
    background-color: #fff3cd;
    padding: 20px;
    border-radius: 12px;
}

これだけのCSSでも、最初の何も設定していないページから、かなり見た目が変わります。

---

CSSは「後から見た目だけ変更できる」

CSSの大きな特徴の一つが、

HTMLの文章そのものを変更しなくても、

見た目だけを変更できる

ということです。

例えばHTMLが、

<h1>ブログ</h1>
<h2>Hello world!</h2>
<p>
Welcome to WordPress. This is your first post.
</p>

だったとしても、CSSを書き換えるだけで、

• ・見出しを青色にする
• ・本文を赤色にする
• ・背景を緑にする
• ・枠を付ける
• ・文字を大きくする

といった変更が可能です。

HTMLは、

「何が書いてあるか」

を担当し、

CSSは、

「どう見せるか」

を担当している、と考えると分かりやすいでしょう。

---

CSSを少し変更して実験してみよう

CSSを覚えるときにおすすめなのが、

数値を少しずつ変更してみること

です。

例えば、

font-size: 24px;

を、

font-size: 40px;

に変更してみる。

あるいは、

padding: 20px;

を、

padding: 50px;

に変更してみる。

さらに、

border-radius: 12px;

を、

border-radius: 30px;

に変えてみる。

すると、

どの数字が、画面のどこに影響しているのか

が見た目ですぐに分かります。

CSSは、本を読むだけより、

実際に変更して、画面を見る

という方法の方が覚えやすいと思います。

---

CSSでよく使う項目

今回使ったものをまとめると、次のようになります。

CSS	主な役割
background-color	背景色
color	文字色
font-size	文字サイズ
font-weight	文字の太さ
line-height	行間
margin-bottom	要素の下側の外余白
border	枠線
padding	内側の余白
border-radius	角を丸くする

最初は、このあたりを使えるだけでも、

かなりWebページらしいデザインができるようになります。

---

まとめ

CSSは難しいプログラムを書くもの、というより、

「Webページの見た目を指定するための設定表」

と考えると分かりやすいと思います。

基本は、

対象 {
    項目: 値;
}

です。

そして、

p {
    color: red;
}

なら、

「文章を赤くする」

という非常にシンプルな指示です。

そこから、

font-size
padding
border
background-color

などを少しずつ追加していけば、見た目を細かく調整できるようになります。

最初からCSSを暗記する必要はありません。

「こうしたい」と思ったときに、そのCSSを調べて使う。

これを繰り返していけば、自然に覚えていきます。

---

次回はCSSファイルの置き場所を見てみようと思います。

もし、わかりづらい場合、以前のページで

できるだけ、わかりやすく書いているので、

ご参照頂けたら幸いです。

・ホームページを表示するには？
・HTMLって、どうやって使うの？
・主なHTMLタグ一覧
・WordPressって、どういうもの？
・WordPressとHTMLの対応は？
・CSSって、なにもの？

キャリカク岡山：F.K.