CSSとは？HTMLとCSSの違いからわかるCSSの基礎知識と書き方

2021.03.01

コーディング

CSSとはCascading Style Sheets(カスケーディングスタイルシート)の略で、文章にデザインを施したいときに使う言語です。

HTMLが文章の構造を作るのに対して、CSSは「その文章をどのようにブラウザに表示するか指定する言語」なのでHTMLとセットで使われます。
このことから、CSSは「構造」と「デザイン」の役割を分けるための言語と言えます。

CSSはHTMLのタグで囲んだ場所の文字の色を変えたり、リンクをボタンにしたりして装飾することが出来ます。
しかし、HTMLよりも覚えることが多く、書き方も難しいことからCSSが何なのかよくわからないという人が多いのも事実です。

そこで、この記事ではCSSが一体どんなものなのかわからない人に向けて、CSSがどういう言語なのか具体例を交えながら詳しく解説していきます。
読み終えて頂ければ、CSSについて理解することが出来るでしょう。

1.CSSとは

先ほどもお話した通り、CSSとはCascading Style Sheets(カスケーディングスタイルシート)の頭文字をとったものです。
カスケーディングスタイルシートは、HTMLのタグなど(要素)に対してどのような装飾をするのか、その装飾はどんなサイズや色なのか(フォントの場合)を指定する言語です。

簡単に表すとHTMLに「デザインを施す」言語だと言えます。
具体的には「文字の色を変える」「リンクをボタンにする」といったことが可能です。

1-1.HTMLとCSSの違い

HTMLとCSSの違いは文章の「構造」を指定するのか「装飾」を指定するのかといったことです。

HTMLはタグで文章を囲うことで意味付けをして、文章の構造を作ります。
それに対してCSSは「どんな装飾をするのか」「その装飾の色やサイズは何か」を指定する言語です。
つまり、CSSは構造とデザインの役割を分けるための言語と言えます。
CSSが存在しなかった頃は、HTMLで文字色や大きさなどを変えていました。
しかし、それではコードが長くなってしまって編集や修正もしにくくなってしまいます。

そこで、構造とデザインを分けるために生まれたのがCSSです。
CSSがあることで今までは画像で表現していたリンクボタンや、背景のグラデーションなどをCSSで出来るようになりました。
HTMLとCSSで役割を分担することで、より多様なデザインが出来るようになったのです。

※HTMLの内容について確認したい人はHTMLとは？HTMLの意味や絶対に知っておくべき基礎知識を大公開をタップしてください。

HTMLとは？HTMLの意味や絶対に知っておくべき基礎知識を大公開

1-2.CSSの仕組み

CSSはHTMLの要素に対して、サイズの調整などのデザインや配置の調整などのデザインを施します。
HTMLの要素とは「ボックス」と呼ばれている、HTMLのタグで囲んだ場所の領域のことです。

HTMLを記述すると上記の画像のように「ボックス」が作られます。
このボックスに対してCSSでデザインを施すことで、余白を作ったり位置を変えたりすることが出来ます。

※ボックスは目に見えるものではありません。

1-3.CSSのバージョン(Level)

CSSもHTMLと同じように国際規格があり、ルールが統一されています。

HTMLはバージョンによって書き方や使えるタグが異なるので注意が必要ですが、CSSはLevelによって使えないものはありません。

CSSは単に出来ることが増えているだけなので、あまりバージョン(正しくはLevel)は関係がないのです。
そのため、どのバージョンのCSSを使っても、ほとんどのブラウザで同じように反映されるようになっています。

2.CSSの具体的な例

ここからは、CSSで指定することが出来る具体的な例をいくつかご紹介します。
ご紹介する例は、実際にコーディングするときによく使われるものです。
他にもCSSで指定できることは数多くありますが、代表的な例を見ることでCSSがどういうものなのかよりわかりやすくなるはずです。

2-1.文字の大きさを変える

CSSでは文字の大きさを変えることが可能です。https://codepen.io/s-Osawa/embed/yLBbVRy?height=265&theme-id=0&default-tab=css%2Cresult&user=s-Osawa&slug-hash=yLBbVRy&pen-title=190824-1&name=cp_embed_1

HTMLで<h1>など見出しを作るタグを使うと、その部分の見出しの文字の大きさが変わります。
これとは別に、CSSでは指定した場所の文字サイズを変えることが出来ます。

2-2.色を変える

文字の色や背景色を変えることも出来ます。https://codepen.io/s-Osawa/embed/LYPybXj?height=265&theme-id=0&default-tab=css%2Cresult&user=s-Osawa&slug-hash=LYPybXj&pen-title=190824-2&name=cp_embed_2

HTMLでも文字の色を変えられますが、現在はCSSで文字の色を変えるのが一般的です。
また、背景色をグラデーションにするなら画像を使うしか方法がありませんでしたが、CSSによって背景色をグラデーションにすることが可能です。

2-3.余白を作る

CSSを使うと余白を作れます。https://codepen.io/s-Osawa/embed/ZEzLgLV?height=265&theme-id=0&default-tab=css%2Cresult&user=s-Osawa&slug-hash=ZEzLgLV&pen-title=190824-2&name=cp_embed_3

このときにCSSの仕組みでお話した、HTMLの要素(ボックス)に対して余白を指定するCSS(マージンやパディングなど)を記述することで、そのボックスに余白を指定することが出来ます。

3.CSSの基本文法

CSSでデザインを指定するときは、基本文法に沿ってCSSを記述します。

基本文法に沿ってCSSを記述することで、どこにどんな装飾をするのか指定することが出来ます。
それぞれにどういった意味があって、どのような書き方をすれば良いのか解説していくので今後CSSを書く際の参考にしてください。

3-1.セレクタ

セレクタはCSSを適用させたい場所のHTMLのタグなど(要素)を指定するものです。

このセレクタを記述することで、どの部分にデザインを適用させるか決めることが可能です。
セレクタにも種類が複数あるので、場合によって使い分ける必要があります。

※セレクタのあとは波括弧{}がつきます。

3-2.プロパティ

プロパティはセレクタで指定した場所の「何を変化させたいのか」決めるものです。
セレクタの後に記述される波括弧{}の中にプロパティを記述します。

例えば、プロパティで指定出来るものに文字サイズや文字の色があります。
下記のようにプロパティを記述することで文字サイズを大きくして、文字の色を変えることが出来るのです。

プロパティは数100種類あるので、その中から指定したいものを選んで記述します。

3-3.値

値はプロパティで指定したものを、どのくらい変化させるのか決めるものです。
もし文字サイズを指定するプロパティを記述したなら、その文字サイズをどのくらいの大きさにするのかを値で設定します。

値は各プロパティによって記述する内容が異なるので、注意が必要です。

4.CSSの書き方

最後に、CSSの書き方をご紹介します。
CSSはHTMLとセットで使う言語なので、CSS単体では使いません。
そのため、まずはHTMLのファイルを用意する必要があります。

ファイルを作るのが難しいと感じる人のために、こちらでダウンロード出来るファイルを用意しました。
もし難しくて出来ない人はファイルをダウンロードして頂ければ、CSSが記述出来るようになっています。
ダウンロードして頂く「whatscss_sample.zip」というファイルに「style.css」と書いてあるファイルがあるのでそちらを利用してください。

ファイルのダウンロードはこちら

※CSSの書き方についてもっと詳しく知りたい人はCSSを書きながら学ぶ！初心者でも覚えられるCSSの書き方と注意点をタップしてください。

CSSを書きながら学ぶ！初心者でも覚えられるCSSの書き方と注意点

4-1.HTMLのファイルを用意する

まずは、HTMLのファイルを用意します。
「テキストエディタ」に下記のHTMLをコピーして貼り付けてください。

———-ここから———-
<!doctype html>
<html>
<head>
<meta charset=”UTF-8″><!–文字コードの種類としてUTF-8を指定します文字化けを防ぐため–>
<title>Webサイトのタイトル</title>
<link rel=”stylesheet” href=”css/reset.css”><!–リセットcssを先に読み込み–>
<link rel=”stylesheet” href=”css/style.css”><!–自分で書いていくcss–>
</head>
<body>
<h1>CSSで出来る様々なこと</h1>

<div class=”box1″>
<p>角丸にする</p>
</div>

<div class=”box3″>
<p>内側に線を装飾する</p>
</div>

</body>
</html>
———-ここまで———-

そして、ファイルの名前を「index.html」に変更して保存しましょう。
ファイル名を「.html」にすることで、パソコンがこのファイルはHTMLのファイルだと認識してくれます。

4-2.CSSのファイルを作る

次にCSSのファイルを作ります。
CSSもHTMLのファイルを用意すると同じように、テキストエディタで新規ファイルを作成し、下記のCSSをコピーして貼り付けてください。

———-ここから———-
@charset “UTF-8”; /*この指定は、外部スタイルシートファイル内でのみ使用文字化けを防ぐため*/

body{

}

h1{

}

.box1{

}

.box2{

}

.box3{

}
———-ここまで———-

貼り付けたらHTMLと同じようにファイル名を「style.css」に変更します。
「style.css」のほかに「reset.css」が必要になるので、こちらからダウンロードしてください。

それぞれのファイルは下記のように配置します。
◆css_sampleフォルダ
├index.html
└◇cssフォルダ
　├reset.css
　└style.css

4-3.CSSを記述する

CSSのファイルが完成したら、あとはCSSを記述するだけです。

既にセレクタは記述されているので、プロパティと値を記述するだけで下記のようなページが出来上がります。

下記のCSSを作成したCSSのファイルに記述してみてください。

⇒body
background-color: black;
【背景を黒くする】

⇒h1
background: -webkit-linear-gradient(left, #453a94, #f43b47);
background: -o-linear-gradient(left, #453a94, #f43b47);
【各ブラウザに対応：背景をグラデーションにする(開始位置, 開始色, 終了色)
background: linear-gradient(to right, #453a94, #f43b47);
【背景をグラデーションにする(to 方向, 開始色, 終了色)】
color: white;
【文字色を白にする】
font-size: 25px;
【フォントサイズを25pxにする】
font-weight: bold;
【フォントの太さをboldにする】
margin: 50px auto;
【外の余白を上下50pxに、左右は均等にする】
padding: 15px;
【中の余白を上下左右余白を15pxにする】
text-align: center;
【↓でした幅の中で中央寄せする】
width: 300px;
【幅を300pxにする】

⇒.box1
background-color: #d9afd9;
【背景の色を変える】
border-radius: 20px;
【半径20pxの正円の円弧をベースにした角丸を実装】
margin: 0 auto 30px;
【外の余白を上0に左右均等に下30pxにする】
padding: 20px;
【中の余白を上下左右余白を20pxにする】
text-align: center;
【幅の中で中央寄せする】
width: 200px;
【幅を200pxにする】

.box2
background-color: #d9afd9;
【背景の色を変える】
border-radius: 50%;
【全ての角を丸くして円にする】
height: 200px;
【高さを150pxにする】
line-height: 200px;
【高さと行の高さを合わせる】
margin: 0 auto;
【外の余白を上下50pxに、左右は均等にする】
text-align: center;
【幅の中で中央寄せする】
width: 200px;
【幅を200pxにする】

.box3
background-color: #d9afd9;
【背景の色を変える】
border: dashed 5px white;
【枠線をつける(種類太さ色)】
border-radius: 50%;
【全ての角を丸くして円にする】
height: 170px;
【高さを170pxにする】
line-height: 170px;
【高さと行の高さを合わせる】
box-shadow: 0px 0px 0px 10px #d9afd9;
【(左右の向きpx 上下の向きぼかし広がり色)】
margin: 30px auto;
【外の余白を上下30pxに、左右は均等にする】
text-align: center;
【幅の中で中央寄せする】
width: 170px;
【幅を170pxにする】
【 ※borderで5px、box-shadowで上下左右10pxずつ膨らんだのでwidth,heightも減らしてbox2と同じサイズにしてます】

記述して保存したのちに「index.html」ファイルを開けば、先ほどお見せしたページが出来上がっているはずです。
値を変えたり、一部を書きながら表示するとどの部分がどう変わるかがより確認できると思います。
最終的な「style.css」は下記よりダウンロードできます。

「style.css」のダウンロードはこちら

５.まとめ

CSSはHTMLが「構造」を指定するのに対して「装飾」を指定する言語のことでした。
現在のHTMLとCSSは役割分担がされていて、それにより多様なデザインが出来るようになっています。
もしあなたがこれからCSSを書いていくのなら、基本文法を覚える必要があります。
まずは基本文法を覚えて、様々な装飾のパターンを覚えていくようにしましょう。