文中の説明画像をクリックすると拡大します。
CSSって何？
CSS（シーエスエス）とは、Webサイトのレイアウトやデザインなど「見た目」を操作・制御するための言語のことです。
正確には「Cascading Style Sheets（カスケーディングスタイルシート）」と呼ばれるもので、一般的には省略されて「スタイルシート」と呼ぶことが多いです。
Webサイトの構造を記述するためには「HTML」という専門の言語があり、これはCSSとは異なります。HTMLとは何かは、以下のページを参考にしてください。
Webサイトを見るときには、Internet Explorer、Microsoft Edge、Firefox、Google Chromeといったブラウザソフトを使います。今でこそブラウザはいろいろな機能を実装していますが、昔のブラウザは基本的なCSSの記述すらあまりサポートはされていませんでした。
あくまでも「仕様」としてのCSSの機能は定義されていたのですが、ブラウザでのサポートが追い付いていなかったため、Webサイトの構造も見た目も、CSSを用いずにHTMLだけで済ましてしまうという過去がありました。そうすると、体裁や装飾の見た目の再現に限界が出てきます。
インターネットが普及するにつれて、ブラウザもどんどん進化してきました。
CSSが本格的にブラウザでサポートされるようになるにつれて、Webサイトの構造は「HTML」が司り、見た目は「CSS」が司るという具合に、役割分担がしっかりできるようになりました。
そして、Webサイトの構造と見た目を別々に分けて管理するようになったことで、Webサイトを作ったりメンテナンスしたりする作業がやりやすくなりました。
Webサイトを思い通りのデザインにするためには、CSSを知る事がとても重要です。CSSの書き方とCSSを書く場所について紹介します。
CSSの書き方
書き方を紹介します。CSSは記述する場所によって書き方がちょっと変わってくるのですが、最初に一番オーソドックスな書き方から説明します。
ここでは、以下のようなHTMLで書かれた段落（pタグ）に対して、文字の色をピンクにする方法を例として紹介します。
【HTML】
<p>ここの文字の色をピンクにします</p>
【CSS】
p {
color: pink;
}
この例では「pタグ」で囲まれた文字列「ここの文字の色をピンクにします」に対して「文字の色をピンクにする」というCSSを記述しました。
また次の例では、色をピンク色にするだけでなく、文字の大きさを指定しました。
【CSS】
p {
color:pink;
font-size:18px;
}
上のサンプルでは「文字の色をピンクに」「文字の大きさを18pxに」という指定を同時に行っているものです。「px」は「ピクセル」と読みます。画面に表示されているものの大きさを表す単位です。
これらはごく簡単な例ですが、このように、CSSによって文字の色や大きさはもちろん、要素を装飾をする、レイアウトを制御する、要素を表示する・表示しないを指定するなど、見た目に関する様々な設定をすることができます。
CSSを書く場所は？
先ほどHTMLとCSSと2つを分けることによって、Webサイトの構造と見た目を分けて管理するようになったと紹介しました。
それではCSSはどこ（どのファイル）に書けば良いのでしょうか。また、分けて作ったHTMLとCSSは、どのように関連付けさせればよいのでしょうか。
CSSを書く場所とHTMLを結びつける3つの方法を紹介します。
CSSを書く場所その1：CSSファイルを作ってHTMLで読み込む
HTMLとは完全に切り離し、独立したCSSファイルを作成して、それをHTMLファイルに読み込ませるという方法です。実際のWebサイト制作の現場で最も使われている方法です。
手順1.HTMLファイルを作る
まずWebサイトの構造となるHTMLを作成します。今回はこのような構造のHTMLを作成することにします。実際にやってみたい方は、テキストファイル（.txtファイル）に、下記のとおりに記述してみてください（Windowsメモ帳は使用しないでください）。
【HTML】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSサンプル</title> </head> <body> <p>CSSを読み込むサンプルです。</p> </body> </html>
このHTMLファイルを「index1.html」というファイル名で保存しましょう。
手順2.CSSファイルを作る
次に別途CSSファイルを作ります。
【CSS】
p {
color:blue;
font-size:20px;
}
このCSSは、「pタグに対して『文字の色を青』『文字の大きさを20pxにする』という意味です。このCSSが書かれたファイルを「style.css」という名前で、やはりテキストファイル（.txtファイル）に保存しましょう。拡張子は「.css」とします。先ほど作った「index1.html」と同じフォルダ（階層）に保存しましょう。
手順3.HTMLファイルにCSSファイルを読み込む
手順2で作ったCSSファイルを手順1で作ったHTMLファイルに読み込ませます。HTMLファイルにCSSファイルを読み込ませるには、linkタグを使います（太字の部分です）。
【HTML】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSサンプル</title> <link rel="stylesheet" type="text/css" href="style.css" > </head> <body> <p>CSSを読み込むサンプルです。</p> </body> </html>
HTMLのheadタグの中に<link rel="stylesheet" type="text/css" href="style.css">のタグを追加しました。このHTMLファイルに「style.css」というCSSファイルを読み込みますよ、という意味です。
linkタグの中にあるそれぞれの文字列は、以下のような意味です。
- 「rel="stylesheet"」はstyle.cssがHTMLファイルの中でスタイルシートとして機能することを指定します。
- 「type="text/css」はstyle.cssが読み込むファイルがCSSである時はこのように書きます。
- 「href="style.css"」は読み込むCSSファイルのファイル名（今回はstyle.css）を指定します。
この中で一番重要なのが「href="style.css"」の箇所です。読み込むファイルがどれなのかを指定する箇所だからです。
「rel」や「type」の箇所に関しては、CSSファイルをlinkタグで読み込む時のきまりだと思っていただければ結構です。また、linkタグを書く場所はHTMLファイルの<head>タグの中である必要があります。
手順1から手順3までを正しく行ったら、index.htmlをブラウザで開いてみましょう。index.htmlをクリックすれば開きます。
すると、ブラウザに「CSSを読み込むサンプルです。」
という文字が少し大きな青色の文字として表示されているはずです。
CSSを書く場所その2：HTMLファイルの中にstyleタグを追加して書く
次は、HTMLファイルの中にCSSを書く方法です。
【HTML】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSサンプル</title>
<style>
p {
color:blue;
font-size:20px;
}
</style>
</head>
<body>
<p>CSSを読み込むサンプルです。</p>
</body>
</html>
HTMLのheadタグの中に<style>～</style>で囲まれた箇所を追加しました。このファイルを「index2.html」として保存しブラウザで開いてみましょう。先ほどと同じように
「CSSを読み込むサンプルです。」
という文字が少し大きな青色の文字として表示されているはずです。
CSSを書く場所その3：HTMLタグの中に直接追加する
最後にHTMLタグの中に直接CSSを追加する方法です。
【HTML】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSサンプル</title> </head> <body> <p style="color:blue; font-size:20px;">CSSを読み込むサンプルです。</p> </body> </html>
このHTMLファイルを「index3.html」と名前を付けて保存し、ブラウザで開いてみましょう。
「CSSを読み込むサンプルです。」
という文字が青く少し大きく表示されているはずです。
pタグの中に「style="color:blue; font-size:20px;"」の記述を追加しました。この書き方はstyle属性（スタイル属性）といって、CSSで見た目を設定したいタグに対して直接CSSを書く方法です。
しかしこれは、HTMLとCSSを別々に管理するというメリットが活かせない方法です。
WordPressのプラグインで「Simple Custom CSS」というのがありますが、これはテーマのテンプレートファイルをいじることなく、オリジナルのCSSを記述することができます。コード表示も見やすく、CSS入門として使うのも良いようです。テーマがアップデートされても、カスタマイズしたCSSの内容が上書きされてなくなることがない、というメリットがあります。
まとめ
- CSSとは、Webサイトのレイアウトやデザインなど「見た目」を操作・制御するための言語。
- Webサイトの構造は「HTML」が司り、見た目は「CSS」が司るという役割分担が、明確になってきた。
- CSSは、HTMLファイルに直接書くか、HTMLファイルとは別のCSSファイルに書く。
