さて、これまでHTMLについて一通り書き方を学んできました。
このレッスンからいよいよCSSについて、詳しく触れていきます。
CSSにはどんな役割があって、どのように書き、どんな方法でHTMLファイルに効果をもたせるのか、基本的なことから解説していきます。
もくじ
そもそもCSSってなに？
これまでのHTMLのレッスンで、何度かCSSについてかんたんに説明してきましたが、改めてCSSの役割を考えてみましょう。
まずCSSとはCascating Style Sheets（カスケーディングスタイルシート）の略でHTMLで書いた文書構造に、見た目の装飾を加えるのがおもな役割となります。
CascadingのCascade（カスケード）とは直訳すると‘小滝’の意味。
ゆるやかな傾斜の滝のように、いろいろなデザインの指定（スタイルと呼ばれます）が上流から下流へと伝わっていくのをイメージすると、CSSの性質を理解しやすくなります。
同じ項目のスタイルを指定したときは、下流に書いたスタイルが反映され、また記述する場所によってもデザインの優先度が変わってくるのがCSSの特徴です。
大規模なサイトになるほど、スタイルが競合しあってCSSが効かない、などのトラブルがよく起こりますので、そんなときはこの特性を意識して原因を特定していくのがとても重要になります。
CSSを使うとどんな効果があるの？
こちらの２つの画像を見て比べてみてください。
↓(スタイルを指定すると…)
１つ目の画像がなにもCSSを指定していないページで、２つ目の画像がCSSを適用させたあとの画像になります。
ぜんぜん見た目の印象が変わりますね！
HTMLのみでつくられたページは、白の背景に黒い文字が乗っただけのずいぶん殺風景な見た目ですが、２枚めはすっきりとレイアウトされ、見やすくなりました。
このようにCSSとは、HTMLでつくられた要素の土台に、デザイン的なアクセントを加える役割をもつマークアップ言語です。
そのため、CSSを学ぶタイミングは土台となるHTMLをある程度理解して、書けるようになったくらいで始めるのが適しています。
色の指定やレイアウトなど、好きなイメージで調整することで、そのサイトが表現したい世界観を作り上げることができるようになります。
CSSをHTMLファイルに反映させるには？
ではどのようしたら、CSSでページにデザインを加えることができるのでしょうか？
そのためには
- 好きなデザインを考えて決定する
- 決まった書き方のルールでスタイルを指定する
- 書いたCSSをHTML文書に適用する
の手順をふむ必要があります。
HTMLにはない、新しいルールもたくさん出てきますので、これから順番に見ていきましょう！
指定したCSSを適用させる方法
HTML文書に好きなデザインに変化させるやり方を見ていきましょう。
スタイルを適用させるには、
- HTMLタグに直接デザインの指定をする
- ページの<head>タグの中にCSSを記述する
- 外部からCSSファイル（スタイルシート）を呼び出す
の３種類のやり方があります。
やり方を順番に見ていきましょう！
HTMLタグ内に属性としてCSSを指定する方法
HTMLタグの属性の１つとして、CSSを指定することができます。
この形式をインラインスタイルと呼びます。
<開始タグ style=”変更したいデザインの指定;”>
のように、style属性でHTMLタグの中からデザインを変えることができます。
では実際に文字の色を黒から赤に変えてみましょう！
<p style="color:red;">こんにちは</p>
こんにちは
こんにちは
color:red;
の部分が「文字を赤くしてくださいね」と指示しています。
:(コロン)や;(セミコロン)があり、これまでの属性値の書き方とは、少し形式が異なっていますね。
これはCSSでスタイルを指定するときの書き方に準じているのですが、後ほど詳しくレッスンしていきますので、まずはHTMLタグ内でデザインを変更できると覚えておきましょう。
<head>タグ内にスタイルタグを書く方法
つぎに<head></head>の中に、<style>タグとして指定する方法について説明します。
（さっきはstyle属性だったのに対し、styleタグになっていることに注意。）
では同様に文字を赤くするstyleタグを書いていきます。
<head>
<style>
p {
color: red;
}
</style>
</head>‘こんにちは’の文が赤くなるのはstyle属性で指定したときと、全く同じになります。
ただし、<head>タグ内で上記のように指定した場合は、すべてのpタグの文字が赤くなることに注意が必要です。
好きな場所だけでデザインを変えるためには、classやidなどセレクタと呼ばれる属性を指定する必要があるのですが、こちらは別のレッスンで詳しく説明していきます。
外部からCSSファイルを呼び出す
WEBデザインの世界でCSSを適用させるのに、もっとも一般的な方法です。
デザインを指定した「ファイル名.css」という拡張子をつけたファイル(CSSファイルと呼びます)を別で作成して、HTMLファイルで呼び出します。
CSSファイルの呼び出し方
CSSファイルを呼び出すには、<head></head>の中で<link>タグを使います。
（閉じタグは不要。）
たとえば、style.cssというファイルを読み込みたい場合、
<head>
<link rel="stylesheet" href="style.css">
</head>と書きます。
rel=”stylesheet”の部分は「これから呼ぶのはCSSファイルですよ」という意味で決まり文、
そしてhref=”style.css”は呼びたいCSSファイルのパスを指定します。
ファイルパスについてはこちらで詳しく解説しています。
今回は相対パスと絶対パスの書き方のちがいを、わかりやすく図を見ながら学んでいきます。 一回理解するとそんなに難しくないのに、初心者のうちはなかなかわかりづらいのが、このパスの概念です。 パスとはどんな役割があって、それぞ[…]
CSSファイルの中身はどうなっているの？
では具体的にCSSファイルはどのように書かれているのでしょうか？
@charset "utf-8";
p {
color: red;
}CSSファイルを新規で作成するときには、１行目に
@charset “utf-8”;
と書くのを忘れないようにしましょう。
これは文字コードを現在のWEBの世界では基準となっている’utf-8’にすることで、間違って変換されたり文字化けを防ぐために記述します。
（文字コードについて詳しく知りたい方は、ググると詳しい情報がたくさん出てきます。文字コードを設定する場面が出てきたら、とりあえず’utf-8’と覚えておくだけでも大丈夫です。）
その下のスタイルの指定は、先ほどの<style>タグで書いたものと同じ形式になっていますね！
外からCSSファイルを呼び込むメリット
実際の現場では、もっとも一般的なやり方であると説明しましたが、どのようなメリットがあるのでしょうか？
- HTMLファイル側で１行で呼び出すことができるので、HTMLの記述がすっきりする。
- 指定した複数のHTMLファイルで共有することができるため、ファイルごとにCSSを書く必要がない。
- デザインの変更があっても、大元であるCSSファイルを変更するだけで、呼び出しているすべてのページに反映される。
このようにスタイルシートがHTMLファイルとは別になるので、分けて管理できて便利、ということがいちばん大きな利点であると言えます。
CSSの基本的な書き方
それではいよいよ、CSS(スタイルシート)の書き方について説明していきます。
先ほど、ちらっとのぞいてみましたが、スタイルを指定するには
・セレクタ
・プロパティ
・プロパティ値
を書いていきます。
図のようにセレクタを書いたあと、{}(カギカッコ)でプロパティと値を囲む形式が基本となります。
{}(カギカッコ)で囲まれた範囲を宣言ブロック、
宣言ブロックの中の各プロパティ: プロパティ値;
の部分を宣言と呼びます。
・セレクタ→どこの
・プロパティ→なにを
・プロパティ値→どのように/ どれくらい
を指し示しています。
それぞれ詳しく解説していきます。
セレクタとは
宣言の中で「どこに」に当たる部分を指定するのが、セレクタです。
適用させる場所は、HTMLの要素を使ってあらわします。
h1タグに適用させたい場合はh1、pタグに適用させたい場合はpと、そのまま要素名を書くことでページのすべての指定の要素が適用されます。
これらを要素セレクタといいます。
セレクタの指定は他にidセレクタや、classセレクタがあり、ねらったところにスタイルを効かせることも可能です。
(後のレッスンで詳しく説明します。)
プロパティと値について
つぎに宣言の中の
「なにを」
「どのように/ どのくらい」
をあらわす、プロパティとプロパティ値について詳しく見ていきます。
プロパティ: 値;
の形式で書きます。
(プロパティのあとに : (コロン)、プロパティ値のあとに ; (セミコロン)が入ります。)
先ほどの例で説明すると
color (文字の色) : red (赤く) ;
font-weight (文字の太さ) : bold (太く) ;
とそれぞれが「なにを」、「どのように/ どのくらい」の意味を持った形式になっているのがわかりますよね？
このプロパティと値の書き方は、セットで形式が決まっていて、とてもたくさんの種類が存在します。
（参考サイト）
たとえば文字のデザインを変えるには、こんなプロパティが存在しています。
| プロパティ | 用途 | 値（単位など） |
| font-size | 文字のサイズを指定する | pxやrem, %などの数値 (例: 16px;) |
| font-family | フォントの種類を指定する | フォント名 (例: “メイリオ”;) |
| color | 文字の色を指定する | redなどの色の名前やカラーコード (例: red;/ #000;) |
| text-decoration | 文字の装飾を指定する | 規定の装飾 (例: underline; / blink;) |
また、たくさんプロパティが存在するだけではなく、値にはpxやremなど聞き慣れない単位を使用することも特徴の1つです。
こちらについても別のレッスンで詳しく説明していきたいと思います。
あまりに多くて気が遠くなりそうですが、よく使うプロパティは限られていますし、繰り返し書くことで自然と身につきますので心配ありません！
すべて暗記するのではなく、必要に応じてMDNなどのサイトでその都度調べる、というやり方がおすすめです。
実際にスタイルシートを作って、デザインを変えてみよう！
それではCSSファイルを作成して、かんたんなスタイルを書いていきましょう。
今回は<p>タグの部分を
・文字の色を青に
・フォントサイズ（文字のサイズ）を18ピクセルに
・アンダーラインを引く
スタイルをあてていきます。
index.htmlとstyle.cssの2つのファイルを作っていきます。
まずは土台となるindex.htmlを作成します。
ファイル作成やブラウザの表示のやり方について詳しくはこちら。
エディタ(VS CODE)を立ち上げたら新規ファイルを作成し、以下の通りマークアップしていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CSSのファイルを呼んでみよう！！</h1>
<p>おはようございます！</p>
<p>こんにちは！</p>
<p>こんばんは！</p>
</body>
</html>この状態でいったんブラウザで表示させてみましょう。
つぎにstyle.cssを書いていきます。
先ほどと同様に新規ファイルを作成します。
（事前に言語モードをCSSにしておくと、色見本が表示されたり、予測変換してくれたり便利です。）
もし文字コードが’UTF-8’、改行コードが’LF’になっていない場合は、こちらも変えておきましょう。
@charset "utf-8";
p {
color: blue;
font-size: 18px;
text-decoration: underline;
}マークアップが終わったら’style.css’の名前でファイルを保存します。
表示させていたブラウザを更新してみます。
・文字の色を青に
・フォントサイズ（文字のサイズ）を18ピクセルに
・アンダーラインを引く
が見た目に反映されています。
もし「CSSが効いていないな」と思ったら、
<link>タグのファイル名が違っている
または
CSSファイルの宣言の書き方が間違っている(:(コロン)や;(セミコロン)など)
の可能性がありますので、前の章の書き方をよく見直して確認してみましょう。
スタイルの優先順位について
もし同じ要素セレクタ、プロパティを複数の場所で記述されていたらどうなるのでしょうか？
指定が競合していたら、表示させるブラウザも混乱してしまいそうです。
そんなケースでも問題ないようにCSSではあらかじめ、書く場所によって優先順位が決められていますので、こちらを表示させながら確認していきましょう！
スタイルは下流にいくほど上書きされる
いちばん最初にCascadingのCascade（カスケード）とは直訳すると‘小滝’の意味と説明しました。
一般的にマークアップ言語やプログラミング言語は、ファイルの上から下に向かって処理が行われます。
CSSのスタイルも同様で、古い指定からどんどん新しい指定に上書きされ、水の流れに例えると下流にある指定が優先されるのです。
もしCSSファイルの先ほど書いた記述の下に、新たに
‘文字をピンクにする’
のスタイルを指定するとこちらが適用されます。
@charset "utf-8";
p {
color: blue;
font-size: 18px;
text-decoration: underline;
}
p {
color: pink;
}の下に指定した
‘文字をピンクに’
が画面に反映されています。
外部スタイルシートと<head>内スタイルタグの優先度の違い
index.htmlの<link>タグの下に<style>タグでさらに
‘文字をグリーンにする’
と指定してみます。
<head>
<link rel="stylesheet" href="style.css">
<style>
p {
color: green;
}
</style>
</head>画面を更新すると今度はピンクからグリーンに変わりましたね！
これは<style>タグの部分が、スタイルシートを呼び出す部分より新しいため、ピンク→グリーンと上書きされたためです。
ちなみにいろいろなCSSの教材では、「<head>内の<style>タグが、外部スタイルシートより優先される」と説明しているものが多いのですが、これは厳密には誤りで、あくまで優先されるのは新しい記述の部分です。
（一般的に<link>タグが<style>タグより先に書かれることが多いので、このように説明されているようです。）
試しに<link>タグの行を、<style>タグの下に移動して、再度表示させてみてください。
<head>
<style>
p {
color: green;
}
</style>
<link rel="stylesheet" href="style.css">
</head>今度はまたピンクに戻ります。
（表示の確認が取れたら、また<link>タグを上に戻しておいてください。）
これは逆にグリーン→ピンクに上書きされるためです。
インラインスタイルは最優先される
つぎにインラインスタイルで’こんにちは！’の文だけ文字を赤くしてみます。
(インラインで指定するとその要素の箇所だけ、ピンポイントでスタイルが適用されるのでした。)
<p>おはようございます！</p>
<p style="color:red;">こんにちは！</p>
<p>こんばんは！</p>
画面を更新すると、インラインスタイルで指定したところだけ、文字が赤くなります。
インライン（スタイル属性）で指定した箇所は、他の記述はすべて上書きされ、最優先されるのです。
まさに文字を表示させるそのときにスタイルが指定されるため、最下流の指定であると言えますね。
学習したてのころは、なかなか処理の流れが追えないので、ひとまず「インラインスタイルはいちばん優先される」と覚えておいても大丈夫です。
すべての優先順位を打ち消す!important
最後にすべての優先順位を打ち消し、強制的にスタイルを適用する
!important
について説明していきます。
最初に書いたstyle.cssの文字を青にするプロパティ値の後ろに!importantと追加してみます。
@charset "utf-8";
p {
color: blue !important;
font-size: 18px;
text-decoration: underline;
}画面を更新すると、また文字がブルーに戻っていますね。
本来であれば文字の色は
ブルー→ピンク→グリーン→（’こんにちは’部分のみ）レッド
と上書き、表示されるはずでしたよね？
このように!importantは優先度を完全に無視して、表示させるとても強力な効果を持っています。
ある程度CSSを書けるようになってくると、うまくスタイルが反映されないときについつい使いたくなるシチュエーションが出てきます。
しかしながら、あまり乱用してはいけないともされています。
あとからCSSを変更したい場合、正しくスタイルを追加してもこちらが優先されてしまい、混乱を招いてしまうためです。
ただ、実際は使われている場面もあるので、もし今後「どうしてもスタイルが適用されない」、「原因がわからない」の場面の最終手段として使用するのをおすすめします。
まとめ
- CSSはHTMLファイルでつくられた土台部分にデザイン的なアクセント（スタイル）を加えるマークアップ言語
- スタイルをあてるには３つの方法がある（直接要素内で指定、<head>タグ内、外部CSSファイル）
- HTMLの要素内でstyle属性として指定するスタイルをインラインスタイルという
- どの方法もメリットとデメリットがあるので、特性を生かした使い方を考える
- スタイルはセレクタ、プロパティ、値を決まった形式で書く
- セレクタはどこの、プロパティはなにを、値はどのように/どれくらいをあらわす
- CSSの特徴として、下流にいくほど新しいスタイルにどんどん上書きされる
- 通常インラインで書いたスタイルがもっとも優先度が高い
- !importantで書かれたスタイルは優先度を無視して、強制的に適用される
このレッスンからはじめて本格的にCSSについて触れてきました。
スタイルシートの書き方自体は比較的わかりやすいのですが、優先順位などはCSSの本質に当たる部分で、とても奥が深く、理解に時間がかかる部分です。
また今後のレッスンで、セレクタなど要素も入り、さらに複雑になってきます。
今回学んだことは、CSSを学んでいくうえで、とても重要な基礎になるところですので、しっかり理解できるようにしておきましょう。