この記事では、CSSの基本的な書き方、各部の名称、役割や必要な理由について学ぶことができます。
Webページは「HTML」と「CSS」という２つの言語の組み合わせで作られています。
HTMLは、Webページといった「文書の構造を作る」ことが役割で、CSSは「HTMLで作成された文書の見た目を調節する」ことが役割です。
本章では、CSSの概要や基礎書式について学びます。
CSSの概要を理解しよう
CSSとは「文書構造を指定したHTML文書に対して、どのような装飾・配置にするのかを指定する言語」のことです。
例えば、文字の色や大きさ、どこに配置するかなどを指定することができます。次の動画では、CSSによって見出しの文字色を赤、文章の文字を大きくして中央寄せにしています。
CSSの役割をおさえておこう
ほとんどのWebサイトでは、HTMLとCSSを組み合わせて作られています。
PikawakaのWebサイトも、CSSで見た目を調整しています。例えばPikawakaのトップページでは、ロゴや検索フォームの大きさ・配置、ボタンの色などをCSSで指定しています。
Pikawakaで指定するCSSを解除すると、以下のような見た目になります。
どちらもHTMLは同じですが、CSSが適用されているか否かで全く違う見た目になりますね。このようにCSSはWebサイトの「見た目」を調整する役割を担っています。
トップページのCSSを解除してみよう
実際にPikawakaのトップページで指定されるCSSを解除すると、どのような表示になるのかを確認してみましょう。
まずはPikawakaのトップページにアクセスして、ページの上で右クリックし、メニューの中から「検証」をクリックしましょう。
検証をクリックすると、次の画像のようにデベロッパーツール（開発者用の検証ツール）が起動します。
続けて、デベロッパーツール内の<head>...</head>の右にある►の記号をクリックして、コードを展開させましょう。
コードを展開させたら、head内にある次の箇所をクリックしましょう
コードをクリックすると、選択状態になり、その箇所が青くハイライトされます。
次のように選択した状態で「右クリック > Delete element」をクリックして、コードを削除してみましょう。
デベロッパーツール内の編集内容は、リアルタイムでページの表示に反映されます。コードを削除すると、次の動画のようにページの見た目が崩れて表示されますね。
先ほどのコードは、指定したCSSをトップページに適用させるためのコードでした。削除したことでCSSが解除されて、ほぼHTMLだけの表示になります。（※補足説明へ）
このようにCSSは、Webページの見た目の調整をしていることがわかりますね。
- 各Webブラウザは、デフォルトで適用されるUAスタイルシート（ユーザーエージェントスタイルシート）を持ちます。
- UAスタイルシートでは、「見出しを大きめの文字で太文字」「リンクに下線を引き文字を青くする」などのスタイルが指定されます。
- トップページのCSSを解除してもUAスタイルシートが適用されるため、ある程度見やすく表示されます。
Cascading Style Sheets
CSSとは「Cascading Style Sheets」の略で、HTMLの各要素を画面上にどのように表示させるのかを指定するスタイルシート言語です。
Cascading（カスケーディング）
Cascading Style Sheetsの「Cascading」とは、同じ要素に対して複数のスタイルが競合する場合に、どのスタイルを優先するかを決める仕組みのことです。
スタイルの優先順位は、いくつかの判定基準に則って並べ替えられます。
判定基準の例を挙げると、後ろに登場したスタイルが優先される「出現順序」があります。
以下のサンプルコードで説明します。
1
<p>CSSとは「Cascading Style Sheets」の略です。</p>
上記のpの文字色を赤にする場合、CSSでは以下のように指定します。
※CSS記法の詳細は後述します。
1
2
3
p {
color: red;
}
上記のCSSをHTMLに適用させた場合、以下のようにpは赤色になりますね。
See the Pen Untitled by miyajima yuya (@pikawaka) on CodePen.
以下の例では、 pに対して 2 つのスタイルがあります。このpの文字色は、最終的に赤色ではなく、緑色になります。「出現順序」の判定基準によって、後に登場したスタイルが優先されるからです。
1
2
3
4
5
6
7
p {
color: red;
}
p {
color: green; // 後に登場したスタイルが優先される
}
上記のCSSをHTMLに適用させた場合、以下のようにpの文字色は緑色になります。
See the Pen CSS ルール by miyajima yuya (@pikawaka) on CodePen.
このようにカスケーディング（またはカスケード）は、いくつかの判定基準に則って、競合するスタイルの優先順位を並べ替えます。
競合するスタイルの優先順位を並べ替えて、最終的に1つのスタイルを有効にするよ
現段階では「CSSにはスタイルの優先順位を決める仕組みがある」とだけ覚えておけば良いね
Style Sheet（スタイルシート）
スタイルシートとは、文書の表示形式（スタイル）を制御する仕組みのことで、その規則を記述するためのコンピュータ言語を「スタイルシート言語」と呼びます。
スタイルシート言語にはいくつかありますが、Web上では一般的にCSSが利用されます。
CSSは「カスケード」できるスタイルシート言語ですが、CSSが開発された目的は文書の構造と見た目を分離することです。
過去にはHTMLでも文字の大きさや色を指定するfont要素、中央揃えにするcenter要素などの「見た目を調整するための要素や属性」が存在しており、HTMLだけでも装飾や配置を実現することができていました。
複雑な見た目でさえHTMLでなんとか実現させていましたが、コードの記述がどんどん複雑になり、文書の構造も破綻していきました。
コードは複雑でメンテナンスしづらいだけではなく、「文書の構造を作る」というHTMLの本来あるべき姿から逸脱しています。
そこでCSSの登場です。次のようにCSSによって文書の構造と見た目を分離させて、HTMLをスッキリとしたコードにすることができます。
それ以外にも分離させることのメリットとして、スタイルの一括管理や用途別に管理できることが挙げられます。
- カスケードは、同じ要素に対して複数のスタイルが競合する場合に、どのスタイルを優先するかを決める仕組みのこと
- スタイルシートとは、文書の表示形式（スタイル）を制御する仕組みのこと
CSSの基本的な書式と各部の名称
CSSでは、左側に指定する箇所に対して、波括弧の中に書いたスタイルを適用することができます。波括弧は、{と}のことです。
1
p { color: red;}
CSSを記述する際には、アルファベットや波括弧、コロン:やセミコロン;などの記号も含めてすべて半角で記述する必要があるので注意しましょう。
CSSの各部の名称は、以下の通りです。
先ほどのサンプルコードでは、以下のようにpがセレクタ、colorがプロパティ、redがプロパティ値にあたります。
それでは上記のサンプルコードを使いながら、CSSの基本的な書き方と各部の名称の役割について解説します。
セレクタ
CSSにおけるセレクタとは、スタイルを適用するHTML要素をブラウザに伝えるためのものです。セレクタには、スタイルを適用させる要素を指定します。
サンプルコードのようにセレクタにpを指定すると、以下の画像のようにHTMLファイルに含まれる全てのp要素を選択して、波括弧内のスタイルが適用されます。
セレクタには、pのように要素を直接指定する要素型の他にも「クラス」や「id」と呼ばれるものを指定することができます。セレクタの詳細は後述します。
プロパティとプロパティ値
CSSにおけるプロパティとは、関連付けられた値（プロパティ値）によって、ブラウザがどのようにHTML要素を表示するかを定義する特性のことです。
プロパティとプロパティ値には、スタイルの種類とプロパティに設定する値を指定します。
次の例ではcolorがプロパティで、redがプロパティ値に当たります。これはp要素を選択して、文字の色を赤色に指定しています。
プロパティとプロパティ値は:で区切り、プロパティ値の後ろに;を付けます。
プロパティとプロパティ値は、セットで記述します。
CSSでは数多くのプロパティが提供されているので、要素に適用するスタイルに応じて使い分けることができます。
プロパティについては、順を追って解説していきます。
複数のスタイルを指定する場合
1つのセレクタに対して、複数のスタイルを指定する場合は、以下のように「プロパティとプロパティ値のセット」の間を;（セミコロン）で区切ります。
最後の;に関しては省略可能ですが、後からスタイルを追加する場合に;を付け忘れてしまうと、スタイルが期待どおりに適用されない問題が起こります。
そのため、初学者の内は最後の;を必ず付けるようにしておきましょう。
宣言と宣言ブロック
プロパティとプロパティ値の組みは、「宣言」と呼びます。
各宣言は、;（セミコロン）で区切られます。
開始の波括弧（{）から終了の波括弧（}）までを「宣言ブロック」と呼びます。
ルールセット（ルール）
セレクタのグループと宣言ブロックの組を「ルールセット」、または単に「ルール」と呼びます。
詳しくは「セレクタの基本」で後述しますが、セレクタのグループは、pのように単一のセレクタだけではなく、複数のセレクタを指定することもできます。
そのため、セレクタの箇所は「セレクタのグループ」と記述しています。
読みやすいCSSの記述
HTMLだけではなく、CSSも「半角スペース・タブ・改行」をコード中に入れてもブラウザ上の表示には影響ありません。そのため、CSSを記述する際には、コードに「半角スペース・タブ・改行」を付けて読みやすく整形するのが一般的です。
例えば、１つのセレクタに複数のスタイルを指定する場合は、次のように改行を入れることでコードが読みやすくなります。
1
p { color: red; font-size: 18px; line-height: 1.5; margin: 24px 0; }
1
2
3
4
5
6
p {
color: red;
font-size: 18px;
line-height: 1.5;
margin: 24px 0;
}
上記のコードは改行だけではなく、セレクタの後、プロパティ:の後などに「半角スペース1つ分」を入れており、インデント（字下げ）は「半角スペース2つ分」入れています。
本カリキュラムでは、CSSのインデントを「半角スペース2つ分」で記述しています。
なお、以下のfont-sizeのように「プロパティ」の間には、半角スペースを入れることはできないので注意しましょう。「プロパティ値」の間は問題ありません。
コメントの書き方
CSSでは、/*から*/の間にコメントを書くことができます。
1
2
3
4
5
6
/* ここにコメントを書きます。 */
/*
コメント中に改行して
複数行にすることもできます。
*/
/*から*/の間のコメントはCSSとして解釈されないので、一時的にコードを除外したり、開発者に向けて説明などのメモを残しておくことができます。
例えば、以下のCSSではp要素に対して、文字色を赤にするなどの指定がありますが、コメントアウトしているため、スタイルは無効となります。
See the Pen コメントの書き方 by miyajima yuya (@pikawaka) on CodePen.
上記のコードは直接編集することができるので、CSSにある/*と*/を削除すると、右側の表示はどのような結果になるのかを確かめてみましょう。
- コメントとは、コードとして解釈されない開発者に向けた文字列のことです。
- コメントアウトとは、特定の箇所をコメント化してコードを一時的に除外することです。
- コメントの書き方は、言語ごとに異なります。
この章のまとめ
重要なポイントをおさえよう！
- CSSは、HTMLの各要素を画面上にどのように表示させるかを指定するスタイルシート言語である
- アルファベットや記号も含めてすべて半角で記述する必要がある
- 「半角スペース・タブ・改行」を付けて読みやすく整形しよう！
この記事で学んだことをTwitterに投稿して、アウトプットしよう！
Twitterの投稿画面に遷移します