【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3

Webサイトを形作っている言語「HTML」「CSS」「JS」。
この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める（インプット）と、自分でゼロから書く（アウトプット）ときの引き出しになる。
書ける前に読む！*2と、いうことでコードを読むために理解しておくといいHTML、CSS、JSの基本書式をまとめる。

第3回は「CSSの基本」編。Webサイトの見た目を彩る「CSS」の書式を理解する！

連載一覧：

目次：

コメント
セレクタ、プロパティ、値
主なセレクタ
複数セレクタと子孫セレクタ
セレクタの優先順位
- 優先順位の基本ルール
- 付けすぎ注意な!important
擬似クラスと擬似要素
- 擬似クラス
- 擬似要素
属性セレクタ
@ルール
CSSサンプル
最後に：次回はJS - 前編！

第1回（Webの基礎知識）にも書いたようにCSSは文書の見た目（スタイル）を変える「スタイルシート言語」だ。
そのままでは味気ないHTML文書を、普段見慣れているWebサイトの姿に変えているのはこのCSSだ。

前回（HTMLの基本）と同様、CSSもまずはコメントから説明する。CSSでもコメントはブラウザの処理では無視される。書き方はHTMLとはちょっと違う。

/*コメント*/

CSSのコメントは/*で始まり*/で終わる。スラッシュ/が外側、アスタリスク*が内側だ。

中には目立つようにこのようなコメントを書いている人がいるかもしれない。

/******* トップページ *******/

あるいはこんなのとか

/* --------------------------- *
           トップページ 
* --------------------------- */

実際には一番外側のスラッシュ/、アスタリスク*しかブラウザは認識しない。これらはあくまで人間にとって見やすい装飾にすぎない。

セレクタ、プロパティ、値

CSSの基本書式

CSSの基本中の基本である「セレクタ」「プロパティ」「値」を説明する。

/*セレクタ*/
セレクタ {ブロック宣言}

「セレクタ」とはCSSのスタイルを当てる対象のこと。日本語文で言えば「何の」に当たる部分。セレクタで前回（HTMLの基本）触れたHTMLの「要素」を指定する。
セレクタの後ろ付けている波カッコ{ }は「ブロック宣言」といい、この中にスタイルを書く。

スタイルは「プロパティ」と「値」の組み合わせが基本形。

/*セレクタ、プロパティ、値*/
セレクタ {プロパティ: 値;}

「プロパティ」はスタイルの種類。日本語文の「何を」に当たる。プロパティの後ろにはコロン:をつける。
「値」はスタイルの設定値。日本語文の「どうする」に当たる。値の後ろにはセミコロン;を付ける。
「セレクタのプロパティを値にする」という意味になる。

例：

/*セレクタ、プロパティ、値*/
p {font-size: 14px;}

上記は「p要素の文字（font）サイズを14px（ピクセル）にする*3」という意味になる。

CSS関数

「CSS関数」はプロパティにより詳細な設定ができる。

/*CSS関数*/
セレクタ {プロパティ: 関数名(値);}

関数名の後にカッコ( )が付き、中に設定値を入れる。
例：

/*CSS関数*/
p {background : url(haikei.jpg);}

backgroundは背景を設定するプロパティで、url( )関数の値で画像のパス（URL）を指定している。
「p要素の背景を画像haikei.jpgにする」という意味になる。
なお、パスの書き方は前回（HTMLの基礎）の「パス（URL）」と共通する。

複数プロパティ

一つのセレクタに複数のプロパティを設定することができる。

/*複数プロパティ*/
セレクタ {
    プロパティ: 値;
    プロパティ: 値;
    プロパティ: 値;
}

長くなるのでこのように波カッコ{ }の前後やセミコロン;で改行を入れると見やすくなる。
例：

/*複数プロパティ*/
p {
    font-size: 14px;
    font-weight: bold;
    color: blue;
}

「p要素のフォントサイズを14pxにし、
フォントの太さをボールドにし、
フォントの色を青*4にする」
という意味になる。

主なセレクタ

全称セレクタ

アスタリスク*を書くとページ全体にスタイルが当たる。

/*全称セレクタ*/
* {font-size: 14px;}

「ページ全体の文字サイズを14pxにする」という意味になる。

基本セレクタ

要素名を書くとHTMLページ内のその要素すべてにスタイルが当たる。

/*基本セレクタ*/
p {margin: 10px;}

「ページの全てのp要素に余白（margin）を10px付ける」という意味になる。

idセレクタ

頭にハッシュ#を付けるとidが指定できる。前回（HTMLの基礎）の「ページ内リンク」と共通した書き方だ。

/*idセレクタ*/
#iida {color: red;}

「id名に"iida"が付いている要素の文字色を赤にする」という意味になる。

classセレクタ

頭にドット.を付けるとclassが指定できる。

/*classセレクタ*/
.name {color: blue;}

「class名に"name"が付いているすべての要素の文字色を青にする」という意味になる。

複数セレクタと子孫セレクタ

複数セレクタ

複数のセレクタを一度に指定することができる。カンマ,で繋げていく。

/*複数セレクタ*/
セレクタ, セレクタ, セレクタ {プロパティ: 値;}

例：

/*複数セレクタ*/
h1, p, img { margin-bottom: 10px;}

「h1要素とp要素とimg要素の下に余白を10px付ける」という意味になる。

子孫セレクタ

HTMLタグのネスト（入れ子）の階層でセレクタをより厳密に指定することができる。こちらは半角スペースを空ける。*5

/*子孫セレクタ*/
セレクタ セレクタ セレクタ {プロパティ: 値;}

例：

/*子孫セレクタ*/
.profile .face img {
    width: 100px;
    height: 100px;
}

「.profileの中の.faceの中のimgの幅を100px、高さを100pxにする」という意味になる。
.prifireから見たら.faceは子、imgは孫。

複数の子孫セレクタ

セレクタが長くなるのでカンマ,ごとに改行すると見やすくなる。

/*複数の子孫セレクタ*/
セレクタ セレクタ セレクタ ,
セレクタ セレクタ セレクタ ,
セレクタ セレクタ セレクタ {
    プロパティ: 値;
}

例：

/*複数の子孫セレクタ*/
.profile .face img ,
.profile .snap img ,
.service .item img {
    width: 100px;
    height: 100px;
}

「.profireの.faceのimgと、
.profireの.snapのimgと、
. serviceの. itemのimgの
幅を100px、高さを100pxにする」
という意味になる。

セレクタの優先順位

優先順位の基本ルール

第1回（Webの基礎知識）でも触れたように、CSSセレクタの処理には優先順位がある。基本は「汎用的なセレクタ」から「固有なセレクタ」に特定されるほど優先される。
上記「主なセレクタ」の例で言えば「全称（全体）＜基本（要素）＜class＜id」（*＜p＜.name＜#iida）の順に優先される。
同じプロパティの値が重複する場合は、より固有なセレクタが上書きされる。
例：

/*"#iida"内の全てのp要素の
文字サイズを14pxに*/
#iida p {font-size: 14px;}

/*"#iida"内の".name"の
文字サイズだけ20pxに
（こちらが優先される）*/
 #iida .name {font-size: 20px;}

どちらのプロパティもfont-sizeを設定している。
セレクタ#iidaの子要素の中で上のp要素より下の.nameの方がより固有な指定なので下の値が優先される。

付けすぎ注意な!important

なお、値の後ろに!important（重要！）を加えると、優先順位ルールを超えてスタイルが優先させる。

/*優先（付けすぎ注意！）*/
セレクタ {プロパティ: 値 !important;}

例：

/*"#iida"内の全てのp要素の
文字サイズを14pxに
（こちらが優先される）*/
#iida p {font-size: 14px !important;}

/*"#iida"内の".name"の
文字サイズだけ20pxに
（こちらは無視される）*/
 #iida .name {font-size: 20px;}

先ほどの例のp要素の方に!importantを追加したので、こちらが優先される。

ただし、付けすぎると収拾がつかなくなるので注意！!importantはどうしてもスタイルを優先したいときの最終手段にしておこう。
例：

/*Oh, 両方に付いてるから結局同じだYo!*/
/*（無視される）*/
#iida p {font-size: 14px !important;}

/*（優先される）*/
#iida .name {font-size: 20px !important;}

この例では両方に!importantが付いているため、結局元の設定に戻ってしまっている。

さて、ここまでがCSSの基本的な内容になる。一般的なWebサイトの見た目は充分変えることができるからだ。
ここから先は応用的な内容になってくるが、CSSのコードでよく見受けられる書式について解説していこう。

擬似クラスと擬似要素

擬似クラス

擬似クラスはセレクタに条件を設定し、合致するセレクタに擬似的なclassを加える効果がある。

/*擬似クラス*/
セレクタ:擬似クラス {プロパティ: 値;}

セレクタの後ろにコロン:を付けて擬似クラスを記述する。
例：

/*擬似クラス*/
/*１つ目だけ*/
#akaten li:first-child {
   color: red;
   font-weight: bold;
}

/*マウスオーバーした時*/
.profile a:hover {
   opacity: 0.7;
}

#akaten liの擬似クラスは:first-child*6 。一つ目のli要素にだけ文字色を赤、文字を太字にする。
.profile aの擬似クラスは:hover。a要素をカーソルがマウスオーバーしたときにだけ不透明度（opacity）を70%にする。

擬似要素

擬似要素はセレクタに擬似的な要素を追加する効果がある。

/*擬似要素*/
セレクタ::擬似要素 {プロパティ: 値;}

擬似要素はダブルコロン::を付けて記述する。*7
例：

/*擬似要素*/
/*前に要素を追加*/
#akaten li::before {
   content: "× ";
   color: red;
}

/*後ろに要素を追加*/
#akaten li::after {
   content: " 頑張りましょう。";
   font-weight: bold;
}

両方ともセレクタは#akaten liだが別の擬似要素が付いている。
一つ目の擬似要素は::before。contentプロパティで"× "という文字列をli要素の前に追加して、赤字のスタイルを当てている。
二つ目の擬似要素は::after。こちらは" 頑張りましょう。"という文字列をli要素の後ろに追加して、太字のスタイルを当てている。

いずれのスタイルも擬似要素にだけ適用され、元のセレクタ#akaten liの見た目は変わらない。
なお、値が「文字列」の場合はダブルコーテーション" "で囲う。

属性セレクタ

属性セレクタは要素の属性値でさらに厳密にセレクタを特定できるので優先度が高まる。

/*属性セレクタ*/
セレクタ[属性名="属性値"] { プロパティ: 値;}

角括弧[ ]の中で属性名と属性値をイコール=で繋げる*8 。
属性値は先ほどの擬似要素の「文字列」と同様にダブルコーテーション" "で囲う。

前回（HTMLの基礎）の「属性」とよく似た書式だ。
例：

/*属性セレクタ*/
/*alt属性の値が"顔写真"*/
img[alt="顔写真"] { 
    width: 200px;
    height: 200px;
}

「alt属性の値が"顔写真"になっているimg属性の幅と高さを200pxにする」

@ルール

まれに行頭にアットマーク@がついた記述を見ることもあるかもしれない。
これは「@ルール」と言って特殊な設定をしたり、CSSファイル内に外部CSSファイルを読み込んだりする。
例：

/*文字コード*/
@charset "UTF-8";

/*外部CSS読み込み*/
@import url("gaibu.css");

/*レスポンシブ設定*/
@media screen and ( max-width:600px ) {
    section {width: 100%;}
}

charaset：文字コードを設定している。
import：は外部CSSファイルを読み込んでいる。
media secreen：600pxより画面が小さい時にスタイルを適用。レスポンシブ（スマホ向け）設定

CSSサンプル

最後に、前回（HTMLの基礎）の「HTMLサンプル」に以下のCSSを追加してみる。

/*ページ全体*/
body {
    font-family:"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, Helvetica, Arial, sans-serif;
     color: #777;
     font-size: 14px;
}

/*外枠背景*/
#profile {
    width: 300px;
    margin: 0 auto;
    padding: 0px 10px 10px;
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/*タイトル*/
#profile h1 {
    padding: 10px;
    font-size: 20px;
    color: #fff;
    background: #888;
    border-bottom: 3px solid  #C30D23;
    text-align: center;
}

/*リンク*/
#profile .link {
    font-size: 12px;
    transition: all 0.3s;
}

/*リンク（頭）*/
#profile .link:before {
    content: "※";
}

/*リンク（マウスオーバー）*/
#profile .link a:hover {
    opacity: 0.7;
}

/*写真*/
#profile img {
      width: 100%;
      height: auto;
      margin:  10px 0 0 0;
}

プロパティの詳しい解説は省くが、セレクタを上から順に解説する。

body：ページ全体にフォント、文字色、文字サイズを設定。
#profile：外枠背景に幅、余白（外側）、余白（内側）*9、背景色、枠線、角丸を設定。
#profile h1：タイトルに余白（内側）、文字サイズ、文字色、背景色、下線、文字揃え、文字色を設定。
#profile .link：リンクに文字サイズ、アニメーション（秒数）を設定。
#profile .link:before：リンク頭に擬似要素でテキスト「※」を追加。
#profile .link a:hover:リンクのマウスオーバー時の不透明度を設定。
#profile img：写真に幅、高さ、余白（外側）を設定。

こちらが表示サンプル。HTMLのみとは雰囲気が変わったことがわかると思う。

「Result」タブを「CSS」タブに切り替えると上記のコードが書かれている。

GitHubにソースコードを公開（2020/07/24追加）

※参考：HTML_CSS_JS_formats/gaibu.css at master · ryo-i/HTML_CSS_JS_formats · GitHub

最後に：次回はJS - 前編！

「読めるぞ！私にもCSSが読める！！*10」と、なっていただけただろうか。
次回は第三の言語、Webサイトの動きや変更を制御する「JS」の読み方を解説する！

※次回：【JSの基本-前編】書ける前に読む！HTML、CSS、JSの書式-4 idr-zz.hatenablog.com

本連載は、これからWebサイト制作を始めてみたい方を念頭に、当ブログの記事中に出てくるWeb系の単語の「出発点」になることを目指して書きました。
なるべく平易な言葉で、段階的な説明を心がけたつもりです。（書きながら自分自身の復習にもなりました）
もし内容に不明点、おかしい点などあれば（優しく）ご指摘いただけると幸いです。

※参考：【HTML、CSS、JSの書式】まとめ
qiita.com

*1:ソースコード。人が書いたコンピュータへの命令のこと。

*2:某胃腸薬

*3:サイズの単位は他にも%、emなどいくつかある。

*4:ここではblueという色名で指定しているがカラーコードでも指定できる。#0033ccなどハッシュと6桁の16進数だ。

*5:他にも「>」で繋ぐ直下セレクタ、「+」で繋ぐ隣接セレクタなどいくつか種類がある。

*6:他に:last-child（一番最後）、:nth-child(x)（x番目の要素。xは数字)などもある。

*7:実は擬似要素も元々は擬似クラスと同じシングルコロンだった。ブラウザは今でもどちらのコロンにも対応しているため、擬似要素がシングルコロンで書かれることも多い。（とっても）

*8:他にも「!=」だと「〇〇以外」と真反対を意味したり、いくつかの繋げ方がある。

*9:marginは要素の外側の余白、paddingは要素の内側の余白。

*10:赤い彗星

クモのようにコツコツと

フロントエンドエンジニアイイダリョウの技術ブログ。略称「クモコツ」