CSSとは？概要や基本書式、具体的な記述方法について解説！

CSSとは

CSSとは「Cascading Style Sheets」 の略称であり、スタイルシートと呼ばれることも多いです。Webサイトを制作するには、HTMLとCSSのプログラミング言語が必要です。ここでは、HTMLとCSSの違いとCSSでできることについてわかりやすく説明します。

HTMLとは「HyperText Markup Language」の略称です。HTMLはタグで文章を囲うことで意味付けを行い、文章を構造化します。一方CSSは、HTMLで作成した構造に対して装飾する際に用いられます。つまり、CSSは構造とデザインの役割を区分するためのプログラミング言語と言えるでしょう。

CSSが存在していなかった時代は、HTMLを使用して文字の色や大きさなどを指定していました。しかし、ソースコードが長くなってしまい、編集がしにくいなどのデメリットがありました。そこで、誕生したのがCSSです。CSSファイルを作成すれば、装飾に関することを一括して指定できるようになります。HTMLとCSSで役割を区分することで開発効率を向上させ、多種多様なデザインが作れるようになりました。

HTML・CSSとは何か？使い方やできること、独学方法を解説！

これまでにも説明しましたが、CSSはHTMLで記載されたWebサイトの構造に対して装飾を行うためのプログラミング言語です。例えば、文字の色・大きさ・行間・行揃え・背景の色・大きさ・ボーダー・角丸・余白調整・アニメーションの変更や追加などが可能です。

また、HTMLとCSSで役割が分けられているため、メンテナンスがしやすいという特徴があります。他にもCSSファイルを別に作成するため、HTMLファイルには構造の指定だけを入力すれば良く、記述がシンプルとなり、内容がサーチエンジンにも理解されやすくなります。そのため、SEO対策の面でもメリットがあると言えるでしょう。

CSSとは？初心者が覚えたい基礎知識から使用例まで解説！

CSSでできること一覧！HTMLやJavaScriptとの違い、メリットも解説

CSSのメリット・デメリット

ここでは、CSSのメリットとデメリットについて解説します。CSSを使用するとWebページのデザインや管理が簡単になる等のメリットがありますが、デメリットもあります。メリットとデメリットを両方して理解して、CSSを効率良く使用しましょう。

HTMLだけでWebページを作成しようとすると、各WebページのHTML上でフォントの色を指定したり見出しスタイルを作成したりする必要があります。一方、CSSはすべてのデザインを一括で指定できるため、個々のページでデザインを管理する必要がありません。デザインを変更した際もすべてのページに適用されるため、デザインの管理がしやすいというメリットがあります。

CSSは様々なメディアで最適化された表示が可能です。パソコン・スマートフォン・タブレット・テレビ・印刷用など、異なるメディアやデバイスごとに適切なデザインで表示することができます。メディアによって異なるCSSを作成すれば、同じWebページでもメディアごとに最適なスタイル制御ができるでしょう。

HTMLでWebサイトのデザインを管理しようとすると、各WebページのHTML上でマークアップを付けるため、マークアップの量が膨大になり、Webサイトが重くなる・検索エンジンに正しく認識されないなどの問題が発生します。

しかし、デザインの設定をCSSで一括管理することで、HTMLのマークアップを最小限におさえることができます。そのため、Webサイトが軽量化され検索エンジンへも正しく認識されるなどのメリットがあります。Webサイトの軽量化や検索エンジンへの正しい認識により、SEO効果やユーザーのアクセシビリティの向上が期待できます。

現在使用されているブラウザではあまり問題はありませんが、NetscapeやNavigatorなどの昔のブラウザではCSSに対応しておらず、Webページを正しく表示できない場合があります。もしCSSに対応していない昔のブラウザでWebページを表示させたい場合は、HTMLでデザインを指定するなどの対応が必要です。

ブラウザにはGoogle Chrome・Firefox・MicrosoftEdgeなどさまざまな種類がありますが、同じCSSを使用していてもブラウザによって表示が異なる場合があります。例えば、Googleb Chromeでは見出しタイトルが青字で表示されているのに、Firefoxでは黒字で表示されるといったことがあります。

すべてのブラウザで同じデザインを表示させたい場合は、CSSの設定を見直す・HTMLで個別に対応するなどの対策が必要です。

CSSのメリットの1つであるデザインの一括管理ですが、1つのミスもすべてのWebページに影響することに注意しましょう。例えば、見出しのフォントデザインを変更しようとして間違えて本文のフォントデザインを変更した場合、すべてのWebページの本文に影響します。対策として、CSSを編集する際は必ずバックアップをとる・こまめにプレビューを確認するなどをしましょう。

CSSの基本書式

CSSには「セレクタ{プロパティ:値;}」という基本書式があります。この基本書式を利用して、「どの要素の（セレクタ）」「何を（プロパティ）」「どのようにする（値）」を指定します。ここでは、基本書式の詳細について紹介します。

セレクタ（selector）には、日本語で「選択」という名の通り、どの要素に対してCSSを用いるかを決定する役割があります。例えば、h1・h2・p・head・body・strongなどのタグ要素や、「id=”名前” 」「class=”名前”」のidやclassに指定した名前を指します。

ここで、idとclassの違いについて疑問を感じる方がいるかもしれません。idの場合、同じidの名前は1サイトの中に1度しか使用できません。一方classの場合、同じclassの名前は1サイトの中で何度でも使用することができます。idとclassの違いには注意して使用しましょう。

プロパティ（Property）とは、使用するCSSに関するスタイルの種類を指します。例えば、背景画像を指定したい場合には「background-image」、幅を変更したい場合には「width」、高さを変更したい場合には「height」を使用します。CSSには、さまざまなプロパティが用意されているため、実現したいイメージのデザインに応じてプロパティを使い分けることが大切です。

値とは、セレクタに適用するプロパティを「どのようにするのか」を表現した数値を指します。例えば、プロパティに背景色を変更する「background-color」が指定されている場合は「blue」「red」「green」などの色を値に設定します。値は、Webサイトの目的に応じて設定することが重要です。例えば、高齢者向けのWebサイトを制作する際には、文字サイズは大きく指定した方が良いでしょう。

CSSの具体的な記述方法

例えば「p{background-color:yellow;}」のようにCSSを指定します。この場合、p要素の背景色をイエローに指定するという意味になります。記述方法は、まずセレクタを先頭に要素を記述し、プロパティと値は、波括弧で「{ }」囲みます。プロパティと値の間は、コロン「:」でつなぎます。

また、複数のプロパティを同時に指定することも可能です。セミコロン「;」を使用して、区切って記述します。なお、最終行のセミコロンは省略できます。ここからは、具体例を紹介します。

p{ font-size:32px; font-weight:normal; font-style:oblique; background-color:red }

上記のように、複数のプロパティをまとめて記述することができます。そして、最終行のセミコロンが省略されていることがわかるでしょう。ここでは、CSSの具体的な記述方法について詳しく紹介します。

CSSでは、文字の大きさや幅・高さを指定するためにさまざまな単位を使用します。CSSでよく使用する単位は「px」「%」「em」「rem」の主に4つです。

「px」はピクセルとも呼ばれ、1pxはモニター画面の1ピクセルを指します。「%」はパーセントとも呼ばれ、em単位と同様で、パーセントによって幅や高さの割合を指定することができます。「em」はエムとも呼ばれ、1emの大きさはWebブラウザの「font-size」のデフォルト値で決定されます。ユーザーが変更しなければ、1emは16pxが一般的です。「rem」はルートエムとも呼ばれ、1remはルート要素の「font-size」の値と同様です。

CSSのemとは？フォントサイズ指定方法の違いを比較解説！

CSSでよく使用される色指定の方法は「カラーコード指定」「RGB指定」「RGBA指定」の主に3つです。例えば、文字や背景、ボーダーなどのカラープロパティに対して指定します。

また、RGB値の確認方法について気になる方も多いでしょう。RGB値の確認方法は、Photoshopなどの画像編集ソフトウェアを使用すると調べることができます。ソフトウェアを持っていない場合には、Google検索で「カラーピッカー」と検索し、Google社が提供しているカラーピッカーを使用して簡単に調べることも可能です。

ここからは、それぞれの色指定方法について詳しく紹介します。

1.カラーコード指定 カラーコード指定とは、「#」から始まる16進数のRGB値によって色を指定する方法のことです。アルファベットは、小文字でも大文字でも問題ありません。RGBそれぞれの値がゾロ目の場合には、3ケタに省略することができます。ここからは、具体例を記載します。

・カラーコード指定の一例 赤色を指定：#FF0000 アルファベットは小文字でも大文字でも可能：#7B3CFF→#7b3cff 3ケタに省略可能：#00FF00→#0F0

2.RGB指定 RGB指定とは、10進数のRGB値によって色を指定する方法のことです。「0」が薄く、「255」が濃い色を示します。ここからは、具体例を記載します。

・RGB指定の一例 赤色を指定：rgb(255,0,0) 青色を指定：rgb(0,0,255)

3.RGBA指定 RGBA指定とは、RGB値に、透明度を加えて色を指定する方法のことです。「0.0」が透明で、「1.0」が不透明を示します。「0.1」から「0.9」までの小数点の値を使用して、透明度の割合を指定します。ここからは、具体例を記載します。

・RGBA指定の一例 赤色で透明度を50%で指定：rgb(255,0,0,0.5)

「/`*」と「`*/」

で囲まれた部分は、Webブラウザの表示には影響しないコメントになります。どのようなスタイルを指定したCSSなのかをコメントで残すことで、レビューや更新を行う際に、ソースコードについて理解しやすくなります。そのため、実務ではコメントが用いられることが多いです。また、コメントは複数行にまたがったとしても機能します。ここからは、具体例を記載します。

・コメントの一例 /`*コメントが1行のみ*`/ p{ font-size:32px;/`*文字の大きさは32px*`/ font-weight:bold;/`*文字の太さは太字*`/ color:#000080;/`*文字の色はネイビー*`/ background-color:#C0C0C0/`*背景の色は*`/ }

/`*コメントが複数行にまたがる場合*`/
p{
    font-size:32px;/`*文字の大きさは32px*`/
    font-weight:bold;/`*文字の太さは太字*`/
    color:#000080;/`*文字の色はネイビー*`/
    background-color:#C0C0C0/`*背景の色はシルバー*`/
/`*
複数行にまたがっても
コメントアウトは機能します
*`/
}

CSSのおすすめ学習方法

ここでは、CSSを効率的に学べるおすすめの学習方法を紹介します。CSSはWebサイトを作成しながら学ぶことで、インプットとアウトプットを同時にできて知識を身に着けやすいでしょう。それぞれの学習方法の特長を理解し、自分に合った方法でCSSを勉強してください。

CSSとは？初心者が覚えたい基礎知識から使用例まで解説！

独学で学ぶなら参考書がおすすめです。初心者の方でもわかりやすいものが豊富にあるので、自分のレベルに合った本を選ぶと良いでしょう。ここでは、おすすめの参考書をいくつか紹介します。

HTML＆CSSとWebデザインが 1冊できちんと身につく本 本書は初心者の方にはもちろん、未経験からWebデザイナーを目指す方におすすめの本です。HTMLやCSSの基本の記述方法に加え、よく使われている4つのレイアウト手法についても学べます。実務で使えるテクニックや最新の手法も載っているため、実用的な知識を身に着けたい方におすすめです。

【参考】HTML＆CSSとWebデザインが 1冊できちんと身につく本：書籍案内｜技術評論社

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 Webサイトを作成しながら学べる本書は、初心者の方にもやさしい内容となっています。説明に沿って実際にWebサイトを作成できるため、知識のインプットとアウトプットが同時に行え知識が身に付きやすいです。

【参考】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 | SBクリエイティブ

世界一わかりやすい HTML5＆CSS3 コーディングとサイト制作の教科書 本書は15のレッスンに分けられており、段階的に学ぶことができます。カラー表記で分かりやすく、知識の理解度を確かめることができる練習問題も付いています。文字のスタイル変更・レイアウト手法などに丁寧な解説があるので、練習問題で間違ったところもすぐに解決できるでしょう。

【参考】世界一わかりやすい HTML5＆CSS3 コーディングとサイト制作の教科書：書籍案内｜技術評論社

オンラインの学習サイトには、わかりやすい動画で解説しているものや、実際にコーディングができて手を動かしながら学べるものまでさまざまなタイプがあります。無料のものもたくさんあるため、「CSSを勉強したいけど何から手をつけたらいいのかわからない」という方も試しやすいです。

まずは初心者向けの学習サイトから試して、知識がついてきたら中級～上級者向けの学習サイトで学ぶといった段階的な学習方法がおすすめです。

ある程度CSSの知識がついたら、自分の好きなWebサイトのデザインを模写するのもおすすめです。サイトを模写することによって「どんなコーディングをすればこんなデザインになるのか」といったことが理解しやすく、実践的なテクニックが身に付きます。

また、参考書や学習サイトには載っていない手法がとられていることもあり、新しい知識や応用的な手法も学ぶことができます。

CSSの基礎を押さえてWebサイトを作成できるようになろう！

これまでに、HTMLとCSSの違いやCSSでできること、メリット・デメリット、CSSの基本書式、CSSの具体的な記述方法、おすすめの学習方法について解説しました。CSSとは、HTMLで記載されたWebサイトの構造に対して装飾を行うためのプログラミング言語です。

CSSには基本書式があり、「セレクタ」「プロパティ」「値」を利用して装飾します。CSSには、さまざまな単位や色指定の方法があり、全てをいきなり覚えようとすると大変です。そのため、基礎をきちんと押さえることが重要です。HTMLやCSSの学習を行う際には、実際に自分で手を動かしながら学習することをおすすめします。そのため、書籍だけではなく、学習サイトやスクールなどを活用して勉強しましょう。