こんな疑問、要望に応えるべく、CSSの基本知識から解説する記事です。
CSSのコードを見て、「プログラミング言語なのかな」と思っている人もいるのではないでしょうか。
結論から言えば、CSSはプログラミング言語ではなくスタイルシート言語です。
そもそも、CSSを利用するメリットはなんなのか、と疑問に思っている人もいると思います。
そこで今回は、CSSについて次の順番でお話ししていきます。
- CSSとは？
- CSSの構造
- CSSを利用するメリット
- CSSの書き方、使い方
Web制作に興味はあるけどCSSはわからない、というあなた向けの記事ですので、ぜひご覧ください。
記事のもくじ
CSSとは？→スタイルシート言語
はじめに、CSSの基本知識を解説しますが、第一にCSSはプログラミング言語ではなく、スタイルシート言語であることを覚えておきましょう。
CSSとは何なのか、ということがわかるようにまとめましたので、一つずつ見ていきましょう。
そもそもスタイルシートとは
CSSはCascading Style Sheetsの略称であり、スタイルシート言語です。
Webページのスタイルを指定するために利用される言語です。
では、スタイルシートとは何でしょうか。
スタイルシートは、構造化された文書などの表示形式を制御するための仕組みを表します。
つまり、CSSは構造化された文書（HTML）の表示形式（スタイル）を指定する言語なのです。
ちなみに、CSSの「カスケーディング」は、ある要素のプロパティに対する宣言が複数ある際に、宣言の強さの関係を定めて、複数ある中の１つの宣言だけを有効にする仕組みです。
HTMLに適用する場合、同じ要素に対して複数のスタイルを指定する場合がありますが、そのなかでも１つだけを適用する仕組みをCSSは持っています。
カスケーディングはCSSを扱う上で非常に大切な考え方ですので、覚えておきましょう。
CSSが必要な理由
CSSが必要な理由として「文書構造を保つため」ということが挙げられます。
CSSは表示形式を制御する、とお話ししましたが、フォントの色を変えたり、フォントサイズを変えたりする程度であれば、HTMLだけでも実現できます。
HTMLだけで実現できるのであれば、CSSを使う必要はないのではないか、と思う人もいるのではないでしょうか。
しかし、HTMLは本来Webページの情報構造を定義するための言語であるため、フォントの色を変えるといった表示形式の制御は、本来の使い方ではありません。
本来の使い方と異なる使い方をすると文書の情報構造が乱れてしまい、検索エンジンに理解されない文書構造になってしまう可能性があるのです。
ほかにも、CSSを利用することで得られるメリットもありますが、CSSが必要な理由としては「文書構造を保つため」と覚えておきましょう。
プログラミング言語との違い
はじめにCSSはプログラミング言語ではないと解説しましたが、プログラミング言語と何が違うのでしょうか。
プログラミング言語とは、「動作処理が行われるもの」であり、CSSでは動作処理を行えません。
たとえば、プログラミング言語では計算処理を行えますが、CSSはHTMLを装飾するだけです。
習得難易度でいっても、動作処理が行えるプログラミング言語のほうが難しく、CSSはプログラミング言語ほど難しくはありません。
スタイルシート言語CSSの構造
スタイルシート言語であるCSSは、構造に決まりがあります。
CSSの構造を理解すれば、Webページを自由に装飾することができるようになるのです。
ここでは、基本となるルールセットの解説とあわせて、セレクタについて紹介します。
CSSの基本「ルールセット」
CSSの基本構造は「ルールセット」と呼ばれ、次の要素で構成されています。
セレクタ、宣言、プロパティ、プロパティ値の4つがルールセットの構成要素です。
一つのルールセットは「{}」で囲まれます。
それぞれの構成要素について、一つずつ見ていきましょう。
セレクタ 基本的にセレクタにはHTML要素名が入ります。該当するHTMLタグに対して、スタイルを適用します。スタイルを適用する対象を選択（Select）する者（er）なのです。
なお、セレクタにはHTML要素名以外にも、さまざまな種類のセレクタが利用できますが、詳しくは後ほど解説します。
宣言 画像の例では、「font-size:20px;」のプロパティとプロパティ値が宣言となります。具体的にどのようなスタイルを適用するのかを記載するものであり、1つのルールセットの中に複数の宣言を記載可能です。
プロパティ 指定されたセレクタにどのようなスタイルを適用するのかを指定します。画像の例では、「文字の大きさ」を表す「font-size」プロパティを利用しています。
プロパティ値 プロパティに対して、スタイルの値を指定します。画像の例では、「20px」を指定しているため、文字の大きさが20pxになります。プロパティ値は、「:（コロン）」ではじまり「;（セミコロン）」で終わることを覚えておきましょう。
セレクタには複数の種類がある
セレクタにはHTML要素名を指定することが多いものですが、そのほかにも指定することが可能です。
さまざまな種類のセレクタを表にまとめました。
| セレクタ名 | 対象となる要素 | 使用例（HTMLの記載） |
| 要素セレクタ | HTMLタグ | div （<div>） |
| IDセレクタ | idプロパティで指定されたID名を持つタグ | #kredo-id （<div id=”kredo-id”> |
| クラスセレクタ | classプロパティで指定されたclass名を持つタグ | .kredo-class （<div class=”kredo-class”>） |
| 属性セレクタ | 指定された属性を持つ要素 | img[src] （<img src=”kredo.jpg”>） |
| 擬似クラスセレクタ | 指定された要素の特定の状態 （hoverはリンクにマウスカーソルを載せているとき） | a:hover （なし） |
これだけだと分かりづらいかもしれませんが、実際に書いて試してみると理解しやすいでしょう。
具体的な使い方については、別の記事でも解説していますので、そちらをご参照ください。
スタイルシート言語CSSを利用するメリット
Webサイトのスタイルを指定する際に、CSSを利用すると複数のメリットが得られます。
ここでは、CSSを利用する3つのメリットについてお話しします。
文書構造を保てる
CSSが必要な理由でもお話ししたとおり、CSSでスタイルを制御することで、HTMLの文書構造を保てます。
CSSが必要な理由であるとともに、利用するメリットといえるでしょう。
HTMLでスタイルを制御してしまうと、文書内容にそぐわないHTMLタグを利用してしまい、検索エンジンなどに文書構造を理解してもらえなくなる可能性が考えられます。
検索エンジンで上位表示されないと、せっかくWebサイトを作成しても誰にも見てもらえないため、非常に重要な要素です。
メンテナンス性が向上する
CSSはHTMLファイルと別に保存できます。
そのため、1つのCSSファイルを複数のHTMLファイルで参照することで、一括してスタイルを適用できるのです。
HTMLでスタイルを指定する場合は、複数のHTMLファイルに同じ内容を何度も記載しなければなりません。
また、修正する場合には、存在するHTMLファイル分の修正が必要となります。
しかし、CSSファイルにスタイルをまとめて記載し、複数のHTMLファイルから参照すれば、CSSファイルを修正するだけで、すべてのHTMLファイルに適用されるため、メンテナンス性が向上します。
メディアごとにスタイルを指定できる
CSSを利用することで、メディアごとに適用するスタイルを指定することができます。
現在では、スマホやタブレットの利用が非常に増えてきたため、Webページを表示する画面サイズに大きなばらつきがあります。
画面サイズごとに適したレイアウトや文字サイズを適用するべきです。
少し前までは、PC用のCSS、スマホ用のCSSと分けて作成していました。
しかし、現在では画面サイズに応じてシームレスにレイアウトを変更する「レスポンシブデザイン」が主流です。
レスポンシブデザインは1つのCSSファイルで実現させることができ、CSSを利用する大きなメリットといえます。
スタイルシート言語CSSの書き方・使い方
具体的にCSSの書き方や使い方を知りたい、という方もいるのではないでしょうか。
ここでは、CSSの書き方や使い方について解説します。
HTMLにCSSを適用する方法は2種類
CSSはHTMLとセットで利用するものであり、HTMLに対して適用しますが、適用方法は2種類あります。
「HTMLファイルに直接CSSを記載する方法」と「CSSファイルをHTMLファイルから読み込む方法」の2種類です。
HTMLファイルに直接CSSを記載する場合は、headタグの間に「<style type=”text/css”>～</style>」と記載し、styleタグの間にルールセットを記述していきます。
CSSファイルを読み込む場合は、headタグの間に「<link rel=”stylesheet” type=”text/css” href=”CSSファイル名”>」と記載して、HTMLファイルからCSSファイルを読み込みます。
特別な理由がない限り、CSSファイルをHTMLから読み込む方法を利用しましょう。
CSSファイルを外出しすることで、メンテナンス性が格段に向上します。
OS標準のテキストエディタでCSSを書いてみよう
CSSはOS標準のテキストエディタで記述できます。
Windowsであれば「メモ帳」、Macであれば「テキストエディット」で記述可能です。
CSS単体では意味がないため、HTMLとあわせて実際に以下のサンプルコードを使って書いてみましょう。
<!DOCTYPE html> <html> <head> <title>CSSのテスト</title> <link rel="stylesheet" type="text/css" href="./sample-css.css"> </head> <body> <h2>CSSのテスト</h2> <a href="#">リンクテキスト</a> </body> </html>
h2 {
color: red;
}
a:hover {
font-size:20px;
color: green;
}
HTMLファイルを「index.html」、CSSファイルを「sample-css.css」という名前で、同じフォルダに保存してください。
「index.html」をブラウザで表示すると、h2タグの内容が赤色で表示され、リンクにマウスカーソルを合わせるとフォントサイズ20pxで、緑色になります。
サンプルコードをあなたなりに修正して、CSSの動きを確認してみてはいかがでしょうか。
まとめ：CSSはプログラミング言語ではなくスタイルシート言語
CSSは動作処理が行えないため、プログラミング言語ではなく、スタイルシート言語です。
HTMLに対して、文字色や文字サイズを変更したりと表示形式（スタイル）を適用します。
CSSはHTML文書の構造を保つために必要であり、メンテナンス性の向上など、複数のメリットがあります。
HTMLとセットで利用するものですが、その役割は大きく異なることを覚えておきましょう。
基本となるルールセットを覚えておけば、さまざまなスタイルを適用することができます。
実際に書いて試してみながら、CSSを覚えてみてはいかがでしょうか。
英語でプログラミングを学べるKredo
英語×プログラミングのスキルを身につけてグローバルに活躍しませんか？
当メディアを運営しているKredoは、英語×プログラミングをオンラインで学ぶ「Kredoオンラインキャンプ」と、フィリピンのセブ島で学ぶ「KredoIT留学」を提供しています。これまでの卒業生は2,000名を超え、卒業生の多くが、国内外のIT企業への転職、フリーランスなどへのキャリアチェンジを実現しています。これからの時代に必要な英語×プログラミングのスキルを身につけてグローバルに活躍しませんか？
