【初心者向け】CSSとは何か？画像を交えて分かりやすく解説

CSSとは？

CSSは、HTMLで作られたページの要素に効果を与えることができます。たとえば文字の大きさや背景の色、画像の配置などを変化させることが可能です。

HTMLだけで作られたページはテキストやリンク、画像が全て左につめて表示されます。そこにCSSで効果をつけ加えることで、視覚的に見やすいページやデザイン性に富んだページをつくることができるのです。

そうすることで、サイト自体のイメージやユーザーに与える印象を変化させることができます。

CSSの書き方とは？

それではここから実際にCSSの書き方について学んでいきます。CSSもHTMLなどと同じく、コードで記入するんです。たとえば、見出し2を赤色にしたいとします。とすると、記述すべきは以下のようなコードです。

h2 { 
 color: red;
 }

すると、見出し2の部分が…

赤色に変化します。

まずはじめにどの部分を変化させたいかを指定します。今回の場合は見出し2なので”h2”ですね。

そして、文字の色なのか、大きさなのか、はたまた背景なのか、という指定を書きます。「：（コロン）」をはさんだ右側では、左側で指定したことを具体的にどれくらい変えるのかを指示しましょう。

具体例を見ながらおさらいすると、” color: red; ”という指定は「color（文字色）」を「red（赤色）」にすることを意味しています。また、さらにh2の文字サイズを50pxにしたくなった場合は、以下のように記述します。

h2 {
 color: red;
 font-size: 50px;
}

すると、このようになります。

文字色を赤色にする効果に追加して、「文字サイズ（font-size）」を「50px（ピクセル）」にする効果を与えることができました。

覚えておきたいCSSの指示とは？

ここからは、CSSを使うなら覚えておきたい指示をまとめていきます。CSSを書いていれば必ずと言っていいほど使用するものばかりですので、要チェックですよ。

font-size

先ほども登場しましたが、文字サイズを指定する指示がこちらの”font-size”です。サイズを指定する方法としては以下の3種類があります。

1. 長さ・％
2. 絶対サイズ
3. 相対サイズ

長さや％で指定する

任意の数字にpxやem、ex、％などの単位をつけることでサイズを指定する方法です。pxとは1ピクセルを1としている単位で、emはフォントの高さを1とする単位、そしてexとは小文字の「x」の高さを1としている単位です。

絶対サイズのキーワードで指定する

“x-large”、”large”、”small”、”xx-smail”のような絶対サイズのキーワードを使用することで、サイズを指定する方法です。この場合、最も大きなサイズは”xx-large”、最も小さなサイズは”xx-smail”となります。

相対サイズのキーワードで指定する

親要素（階層が他よりも上位にある要素）の文字サイズに対して、1段階大きくしたいのであれば”larger”を、1段階小さいサイズにしたいのであれば”smaller”を指定します。

color

こちらも先ほど紹介しましたが、文字の色を指定するのが”color”です。ユーザー環境で背景が指定されていたさいに、文字が読みにくくなることを防ぐため、背景色を同時に指定しておくのがセオリーでしょう。

background-color

こちらが背景色を指定するさいに使用するプロパティ”background-color”です。他の色とのかね合いや、サイト全体の配色とも合わせた上で変更していきたいですね。

height

高さを指定するプロパティです。初期値は”auto”であり、数値や％値を使って指定します。

width

幅を指定するプロパティです。heightと同じく初期値は”auto”であり、数値や％値を使って指定します。

margin

マージンと呼ばれる領域間のスペースを指定するプロパティです。後述する”padding（パディング）”とセットで覚えましょう。

複数の値を指定することで、上下左右で異なる値を指定することができます。

padding

パディングと呼ばれる領域内のスペースを指定するプロパティです。”margin”とセットで覚えたいですね。

マージンと同じく、上下左右に異なる値を指定することができます。

float

指定された要素を左や右に寄せて配置する際に使用するプロパティが”float”です。floatが使われた要素のあとにある要素は、その反対側に回り込みます。

”float:left”で指定された要素は左に寄り、あとに来る要素はその右側に回り込みます。逆に要素を右に寄せたい場合は”float:right;”を使い、あとに続く要素はその左側に回り込みます。

初期値は”float:none;”で、特に配置を指定しません。

border

要素の境界線（ボーダー）のスタイルや太さ、色を指定するプロパティです。

スタイルの値

borderのスタイルには様々なものがありますので、代表的なものをいくつかご紹介しますね。

一本線を表現するために使うのは”solid”、二本線になると”double”を使用します。

破線（-----）や点線（・・・・・）もborderプロパティで表現することが可能です。破線を表現するには”dashed”、点線を表現するには”dotted”を用います。

太さの値

ボーダーの太さはheightプロパティやwidthプロパティなどと同じく、pxやem、exなどの単位で指定することができます。

また、thin（細い）、medium（普通）、thick（太い）といったキーワードで指定することもできますね。

色の値

16進数やカラーネームでボーダーの色を指定することができます。また、”transparent”という値を入れることでボーダーの色を透明にすることも可能です。

まとめ

CSSについて、大まかに全体を説明しました。はじめは難しく感じることもあるかもしれませんが、書き続けていると徐々に理解できるようになってきます。

逆に言えば、コードを書かずにCSSが上達することはありません。書いては直すことをくり返して、だんだんと自分のものにしていきましょう。

本記事を読んでCSSの事は理解できましたか？独学で始めるのもいいですが、まずCodeCampの無料体験を受けてみるのも1つの手ではないでしょうか？