CSSとは何なのか、初心者向けに分かりやすく解説します

Webサイトを制作するうえで最低限必要となるのが、HTMLとCSSの知識です。しかし、「HTMLとCSSって聞いたことはあるけれど、どういうものなのかイマイチわからない」という方もいらっしゃるでしょう。特にCSSは、自分らしいWebサイトを作るうえで重要です。

そこで、この記事では、初心者向けに「CSSとは何か」「どのように使えばよいのか」といった疑問にお答えしていきます。

CSSとはWebサイト制作に欠かせない言語

CSSは、「Cascading Style Sheets（カスケーティングスタイルシート）」を略したもの。HTMLと同じく、Webサイト制作には欠かせない言語です。

まずは、HTMLやCSSとは何か、HTMLだけでなくCSSを使うとどんなことができるのかを紹介します。

Webページの骨組みを作るHTML

CSSとは何かをお話する前に、まずはHTMLについて知っておいた方がよいでしょう。HTMLとは、コンピューターに「この文章は見出しとして大きめに表示してね」「ここ重要だから太字で表示してね」というように製作者の意図を伝えるための言語です。

例えば、HTMLの「h2」というのは大見出しのことです。新聞の見出しのように、伝えたい文章を大きく表示させるために使います。また、「strong」は「強い」という意味ですが、HTMLで使うと文字を太字にして強調できます。

このように、文章の構造を指示してWebページの骨組みを作るのがHTMLの役割です。

指示をコンピュータに認識させるためのマークアップ言語

HTMLとCSSは、マークアップ言語です。マークアップ言語は文章を構造化できる言語で、人間の言葉をコンピュータに分かりやすく伝えるために用いられます。先ほどのように「この文章は見出しとして大きめに表示してね」などの指示をコンピューターに認識させるために使います。

Webページを装飾するのがCSSの役割

HTMLにはWebページの骨組みを作る役割がある、とお話しましたが、CSSにはどのような役割があるのでしょうか。

CSSは、Webページに装飾を施すためのマークアップ言語です。装飾というのは、Webページ上の文章のサイズや色を変えたり、背景色を設定すること。HTMLだけで構築されたWebページは単調ですが、CSSを加えると一気にカラフルでオシャレなWebページに変身させられます。

CSSを使うメリット

実は、HTMLだけでもWebページ内の文字のサイズを変えたり、カラーを変えたりすることはできます。しかし、わざわざCSSを使うのは、その方がメリットがあるからです。

そのメリットとは、CSSを別のファイルで作成して読み込めば、HTMLで作成したWebページが使い回せるようになることです。HTMLの中で文字のサイズやカラーを全て設定してしまうと、後からWebページのデザインを変更する必要が生じた場合、HTMLを書き直していかなければなりません。

しかし、骨組みを作るのはHTMLファイル、装飾するのはCSSファイルと分けておくと、後からデザインを変更したい時はCSSファイルだけを変更すればよくなります。また、CSSでパソコン版、スマホ版のWebページのデザインをそれぞれ決定しておけば、1つのHTMLからパソコン版、スマホ版2種類のWebページを生み出せます。

このように、HTMLとCSSを使い分けておくと、Webサイトの制作がスムーズに行えるようになります。

Webページを装飾できるCSS

CSSを使うと、「h2の大見出しは25ピクセルで、背景色はオレンジに設定して」、「h3の小見出しは20ピクセルにして」という風にWebページ全体の装飾を指示できます。

「ここはピンク、そこは赤」というように一つ一つの文章に指示を与えなくても、「このページのh2は全て25ピクセル、全て背景色オレンジ」と一気に設定できるのもCSSを使うメリットです。

CSSセレクタとは何か、初心者向けに解説

CSSを学習する上で知っておきたいのが「セレクタ」です。CSSセレクタ（CSS Selectors）を使用すると、その名の通り、CSSのある部分を選択できるようになります。ここからは、そんなCSSセレクタについて見ていきましょう。

スタイルをどこに適用するかを指定できるのがセレクタ

CSSでは、「h2の文字色は黒にしてね」というように、Webページの特定部分のデザインを指示できます。そして、デザインをWebページの「どこ」に適用するのかを指定できるのが「セレクタ」です。

例えば、「h2の文字色は黒にしてね」という指示をCSSで記述すると、以下のようになります。

h2{color:black}

この場合、「h2」の部分がセレクタになり、「h2の文字色を黒」と指定していることになります。「h2」はHTMLタグで、CSSセレクタの1つです。他にもCSSセレクタとして使えるHTMLタグには「p」や「img」など色々な種類があります。

classセレクタの役割

CSSセレクタの中でもclassセレクタはよく使います。先ほどのHTMLタグで「h2の文字色を黒」と指定すると、Webページにあるh2全てにデザインが適用されます。しかし、あるh2だけの色を変えたい時もありますよね。

そんな時に使えるのが、classセレクタです。classセレクタを使うと、指定した文章のみにデザインを適用できるようになります。小学1年生といっても1組・2組・3組とクラスが複数あり、1組だけ体育館で授業をするように指定するのと同じようなイメージです。

idセレクタの役割

idセレクタもclassセレクタと同じように使用できます。ただし、classセレクタは同じHTMLファイル内で何回も使えますが、idセレクタは1回しか使えません。また、idセレクタは指定したデザインが適用される優先順位が高いという特徴があります（優先順位については後ほど解説します）。

初心者でも使いやすい！CSSプロパティの種類

Webページの指定した箇所に適用するスタイルの種類をプロパティといいます。

ここからは、実際にWebサイトを作成する時によく利用するCSSプロパティを紹介します。

文字の大きさを指定できる

Webサイトで文字の大きさを指定することってよくありますよね。文字の大きさを指定するには、「font-size」プロパティを使用します。例えば、h2の文字サイズを18ピクセルにしたい場合は、以下のように書きます。

h2{font-size:18px}

ちなみに、Webサイトの文字サイズは「px（ピクセル）」で指定します。ピクセルはデジタル画像で用いられる単位です。

文字色を指定できる

colorプロパティを使用すると、文字の色を指定できます。文字色は「red」「black」の他、「#ffffff」といったカラーコードも使えます。カラーコードを使えば、思い通りの色でWebサイトを制作できます。

カラーコードはメモしておく必要はありません。ネットで検索すれば色見本を公開しているWebサイトが多くあるので、必要なときにこれらを参照すれば十分です。例えば「原色大辞典」はカラーコードが一目でわかるのでおすすめです。

参考：原色大辞典

中央寄せなどができる

Webページによって文章を左寄せにしたり中央寄せにしたりしてデザインを整えたいですよね。そんな時は、text-alignプロパティを使用しましょう。

例えば、body部分の文章を左寄せにしたい場合は、以下のように記載します。

body{text-align:left}

もし中央寄せにしたい場合は「center」、右寄せにしたい場合は「right」を指定しましょう。

背景色を指定できる

指定した箇所の背景色を変更できるプロパティも覚えておくと便利です。body部分の背景色を変更したい場合は、以下のように指定します。

body{background-color:red}

背景色にも「red」や「pink」などのカラー名や「#f6f6f6」のようなカラーコードを使用して指定できます。

文字を囲む

文字の周りを線で囲んだり、文字の下に線を引いたりすれば、Webページの見た目がよくなります。その際は、borderプロパティを使用しましょう。borderプロパティでは、線の太さ・色・種類を指定できます。

h2の部分を太さ2pxの赤色の実線で囲む場合は、以下のように指定しましょう。

h2{border:solid 2px red}

なお、線の種類は、実線（solid）の他にも点線（dotted）や二重線（double）が指定できます。また、線の太さも指定できるので、シンプルな装飾からオシャレなデザインまで自由自在です。

コメントアウトを活用しよう

CSSでもHTMLと同様に、ソースコードの中に自分や他の人に向けたメモ書きを残すことができます。このメモ書きのようなものは「コメントアウト」といい、「/* メモ書き部分 */」と入力します。コメントアウトはWebページには表示されません。

自分へのメッセージや、複数人でWebサイトを作成する場合の伝言として活用できます。

忘れてはいけないCSSの優先順位

初心者がCSSを使う上で混乱しがちなのが「思ったようにCSSが適用されない！」というトラブルです。指定したはずのデザインがWebページに反映されていないと焦ってしまいますよね。

反映されない原因には色々とありますが、よくあるのが自分が思っているスタイルよりも他に指定したスタイルの方が優先されてしまっているケースです。そこで、ここからは、CSSにおける優先順位について解説していきます。

下に行くほど優先順位は高い

基本的にCSSは、上から下へ順番に適用されていきます。そのため、上でスタイルを設定していたにもかかわらず、下で再度別のスタイルを指定してしまうと、上で指定したスタイルが適用されなくなります。

CSSは下に書かれているスタイルほど優先順位が高くなることを覚えておいてください。

セレクタの優先順位

セレクタには色々な種類があることを先ほどお伝えしましたが、セレクタの中でもスタイルの優先順位があります。最優先されるのが、「!important」と書かれたセレクタで、次に優先されるのがコード内で「style=」と直接指定されたセレクタです。

また、文章全体を指定したセレクタより、classセレクタやidセレクタを使って部分的にスタイルを指定するセレクタの方が優先順位は高いです。

最優先されるセレクタ

「important」は日本語で「重要」という意味ですが、CSSでは「!Important」という記述が使えます。CSSは通常、上から下にかけて優先順位が上がっていきます。しかし、「!Important」をつけた場合は、記載した場所に関係なく優先順位が一番になります。

例えば、「!Important」を使って以下のように記述できます。

body{color:green !important;}

こうしておけば、「body部分を緑にすることが最重要」とコンピュータが認識します。

classとidの優先順位

classとidはよく似ているセレクタですが、両方を使用して記述していた場合は、classよりidの方が優先順位が高くなります。さらに、要素を特定したidが優先される仕組みになっています。

優先順位は初心者の多くが悩んでしまうポイントですが、実際に手を動かして慣れてくると、優先順位を活かした使い分けができるようになるので安心してください。

実際にWebページを作ってみよう

CSSとは何かが分かったら、実際にWebページを作成していくのが初心者脱出への近道です。ここからはWebページを作る手順を解説しますので参考になさってください。

HTMLとCSSを記述するためのツール

実際にHTMLやCSSを用いてWebページを作成するには、HTMLとCSSを記述するためのツールが必要です。ツールは無料のものから有料のものまで色々ありますが、Webサイト製作初心者の方には、PhotoshopやIllustratorを提供しているAdobe社の「Dreamweaver」がおすすめです。

「Dreamweaver」は初心者にも分かりやすい設計がされており、Adobeの公式サイトやYouTubeでも解説動画が多くあるので独学でも学習しやすいのがメリットです。

参考：Adobe「Dreamweaverチュートリアル」

HTMLタグでWebページの骨組みを作成

HTMLとCSSを記述するためのツールが準備できたら、まずはHTMLタグを打っていきます。あらかじめWordやGoogleドキュメントに用意しておいた文章に見出しやボディを割り当てていきましょう。

また、HTMLやCSSのタグは暗記する必要はありません。ネットで検索すれば簡単にタグとその役割が見つかるので、初心者の頃は検索しながらタグ打ちしていくのがおすすめです。

例えば、「HTMLクリックリファレンス」では、HTMLタグやCSSプロパティが目的別に検索できます。

参考：HTMLクリックリファレンス

CSSで文字を装飾

HTMLで骨組みが作成できたら、いよいよCSSで装飾を施していきます。先ほどお話ししたセレクタやプロパティを使用して、狙った文章の文字色やサイズを指定していきましょう。

ちなみに、「Dreamweaver」では、実際にWebサイトに表示される情報をプレビュー画面で見ながらCSSを設定していけるので、初心者でもスムーズにデザインを進めていけます。

目指せ脱初心者！CSSを使えるようになろう

CSSは、Webサイトをあなたの思い通りにデザインしていくために重要な言語です。初心者の頃は「CSSって何？どうやって使うの？」と頭の中が混乱してしまうもの。

しかし、実際に自分でHTMLやCSSを書いていくことで、少しずつ自分の思い通りのWebサイトが制作できるようになります。まずは楽しみながら学習を進めていきましょう。