キャリカク岡山

CSSって、何をするもの？

ホームページを見ると、

• ・文字の色が変わっている
• ・見出しが大きくなっている
• ・画像が横に並んでいる
• ・背景に色が付いている
• ・ボタンの形が整っている

といった、いろいろな「見た目」があります。

この見た目を整えるために使われるものがCSSです。

CSSは、

Cascading Style Sheets （カスケーディング・スタイル・シート）

の略です。

HTMLとCSSは何が違うの？

とても簡単に分けると、

という違いがあります。

たとえばHTMLで、

<h2>今日のお知らせ</h2>

<p>今日は晴れています。</p>

と書くと、

• ・「今日のお知らせ」は見出し
• ・「今日は晴れています。」は文章

として扱われます。

HTMLだけでも表示はできます。

しかし、

「見出しを青くしたい」 「文字をもっと大きくしたい」

という場合にはCSSを使います。

CSSを使うと、何ができるの？

CSSを使うと、たとえば次のようなことができます。

• ・文字の色を変える
• ・文字の大きさを変える
• ・背景色を付ける
• ・枠線を付ける
• ・余白を調整する
• ・画像の大きさを変える
• ・画像や文章を横に並べる
• ・ボタンの形を変える
• ・パソコンとスマートフォンで表示方法を変える

ホームページの「見た目」に関係する部分の多くを、CSSで調整できます。

CSSはどんなふうに書くの？

たとえば、

h2 {
    color: blue;
}

と書いた場合、

h2

は、

「h2タグに対して設定します」

という意味です。

そして、

color: blue;

は、

「文字の色を青色にします」

という意味です。

HTML側に、

<h2>今日のお知らせ</h2>

があれば、その文字が青色になります。

文字の大きさを変える場合

たとえば、

h2 {
    font-size: 32px;
}

とすると、

h2の文字サイズを32pxにできます。

px は、画面上の大きさを指定するときによく使う単位です。

色と大きさを同時に指定することもできます

CSSでは、複数の設定をまとめて書くこともできます。

h2 {
    color: blue;
    font-size: 32px;
}

これで、

• ・文字色は青
• ・文字サイズは32px

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

背景色も変えられます

たとえば、

h2 {
    background-color: lightblue;
}

とすると、見出しの背景を水色にできます。

さらに、

h2 {
    color: blue;
    background-color: lightblue;
    font-size: 32px;
}

のように組み合わせることもできます。

HTMLタグ以外にもCSSを付けられます

たとえばHTMLに、

<p class="important">大切なお知らせです。</p>

と書いて、

CSS側で、

.important {
    color: red;
}

とすると、

important という名前が付いた部分だけを赤文字にできます。

このように、CSSでは特定の場所だけに設定することもできます。

WordPressでもCSSは使われています

WordPressでは、ビジュアルエディターを使っていると、

「自分でCSSを書いていない」

ように見えることがあります。

しかし、実際にはWordPressのテーマやブロックにもCSSが使われています。

たとえば、

<h3 class="wp-block-heading">小見出し</h3>

というHTMLがあった場合、

テーマ側のCSSによって、

• ・文字の大きさ
• ・色
• ・背景
• ・アイコン
• ・余白

などが設定されます。

そのため、同じHTMLを書いても、WordPressのテーマが違えば表示も変わることがあります。

CSSが最後の見た目を決めます

HTMLでは、
・「ここは見出し」
・「ここは文章」
・「ここは画像」

という構造を指定します。

そしてCSSでは、
・「その見出しをどう見せるか」
・「文章を何色で表示するか」
・「画像をどのくらいの大きさにするか」

を決めます。

そのため、

HTMLがページの骨組みなら、CSSは服装や外観

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

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

CSSには非常に多くの設定があります。

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

まずは、

• ・color
• ・font-size
• ・background-color
• ・width
• ・height
• ・margin
• ・padding

あたりから覚えるだけでも、かなり多くのことができます。

必要になったときに、

「文字色を変えたい」

「画像を少し小さくしたい」

というように調べながら使っていけば大丈夫です。

まとめ

CSSは、

ホームページの見た目を整えるための仕組み

です。

HTMLが、

・文章
・見出し
・画像
・表

などの構造を作り、

CSSが、

・色
・大きさ
・配置
・余白
・背景

などを整えます。

WordPressでもCSSは非常に重要で、

テーマやブロックの見た目にもCSSが使われています。

まずは、

HTML＝構造 CSS＝見た目

と覚えておけば大丈夫です。

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

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

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

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

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