Web

CSS の基礎

投稿日:2017年6月20日 更新日:

1. CSS とは?

CSSは、HTML などの構造化された文書に対して、装飾を与えることを可能にするスタイルシート言語のことをいいます。文書の「内容」と「装飾に関する情報」を分離することができるため保守・管理がラクになります。

2. CSS のバージョン(分類)

CSS はバージョンによって仕様を分類することができます。

Cascading Style Sheets, level 1

  • 勧告 1996年12月
  • 最初に勧告された CSS の仕様です。
  • 現在では、この仕様は時代遅れの内容となっています。

Cascading Style Sheets, level 2 (CSS2)

Cascading Style Sheets, level 3 (CSS3)

  • 最新の仕様です。
  • CSS2 を基本として、その上に乗っかる仕様になります。
  • 多くの仕様があるため、「モジュール」という名前でいくつもの種類に分かれています。

参考

3. 仕様書

CSS に関して何か調べる場合は、一次情報である以下のドキュメントを参照しましょう。

CSSに関する仕様書一覧ページ

2017年における CSS の現状について

CSS 2 (Level 2)の仕様書(最新版は 2.2)

CSS3 (Level 3) は、CSS 2 (Level 2) を土台としています。
まずは、CSS2 (Level 2) を学びましょう

CSS 3 (Level 3)の仕様書

CSS 3 (Level 3) は、CSS 2 (Level 2) の上に追加された形で定義されています。
こちらは、たくさんの仕様書があります。その中から主なものを以下に示します。

その他

4. ブラウザの実装状況

以下のウェブサイトで、各ブラウザの CSS 実装状況をチェックすることができます。

5. CSS の書き方

CSS を書くことによって、HTML内の特定の要素に対し「フォントのサイズ」「フォントの太さ」などを指定できます。以下は、実際の記述例です。

CSS の記述例

ここに、各名称を書き込んだのが以下になります。

CSS の記述における各名称

それぞれの言葉の意味は以下の通りです。

セレクタ
  • { の前の部分がセレクタです。スタイルを適用する対象を指定します。
  • 要素を指定したり、「クラス」というもので指定したり、いろいろな指定方法があります。
  • ここでは、h1 という要素を指定しています。
宣言ブロック
  • {} で囲まれた部分が、宣言ブロックです。セレクタに対して適用する宣言を書きます(複数可)。
宣言
  • セレクタに対して適用する「プロパティ」と「値」のペアが宣言です。
  • セミコロンを間に置くことによって、複数の規則を記述することができます。
プロパティ
  • 適用する装飾の種類です。
  • ここでは、1つ目のプロパティとして、font-weight を指定しています。これは、フォントの太さを意味します。
  • プロパティに対してセットする値です。
  • プロパティ毎にセットできる値が決まっています。
規則(スタイル規則)
  • セレクタとそれに対する宣言ブロックを合わせたかたまりを「規則 (スタイル規則)」と呼びます。

名称だけでCSSを書いてみると、以下のような記述になります。

セレクタ {
  プロパティ1 : 値1 ;
  プロパティ2 : 値2 ;
  プロパティ3 : 値3 ;
}

これは、

セレクタに対して、
  プロパティ1 には「値1」をセットし、
  プロパティ2 には「値2」をセットし、
  プロパティ3 には「値3」をセットする

という意味になります。

詳細は以下をご覧下さい。

6. セレクタの種類

HTML上の要素を指定する記述がセレクタです。いろいろな種類がありますが、ここでは代表的なセレクタを説明します。

単体セレクタ

型セレクタ

特定の要素を指定するセレクタです。要素名 をそのまま記述します。

例:

h1 {
  font-family: sans-serif
}

全称セレクタ

全ての要素を対象にすることができるセレクタです。アスタリスク「 * 」を記述します。

例:

* {
  font-family: sans-serif
}

属性セレクタ

属性の値を指定して、その属性を持つ要素を対象にすることができるセレクタです。括弧「 [ ] 」を使って指定します。様々な指定方法があります。

パターン1:[属性名]

属性名 で指定した属性を持つ要素を指定します。

例:

h1[title] {
  font-family: sans-serif
}
パターン2:[属性名=]

属性名 で指定した属性の値が である要素を表します。

span[class="example"] {
  font-family: sans-serif
}

次のように span 要素を記述すると、この規則が適用されます。

<span class="example">Hello!</span>
パターン3:[属性名~=値]

値が空白で区切られて複数記述されていた場合に、その中の1つが である要素を表します。

例:

span[class~="example"] {
  font-family: sans-serif
}

次のように span 要素を記述すると、この規則が適用されます。

<span class="foo example bar">Hello!</span>
パターン4:[属性名^=値]

属性名 で指定した属性の値が から始まる要素を表します。

例:

span[class^="example"] {
  font-family: sans-serif
}

次のように span 要素を記述すると、この規則が適用されます。

<span class="example2">Hello!</span>
パターン5:[属性名$=値]

属性名 で指定した属性の値が で終わる要素を表します。

例:

a[href$=".html"] {
  font-family: sans-serif
}

次のように a 要素を記述すると、この規則が適用されます。

<a href="/foo/bar.html">Foo page</a>
パターン6:[属性名*=値]

属性名 で指定した属性の値に が含まれている要素を表します。

例:

p[title*="hello"] {
  font-family: sans-serif
}

次のように p 要素を記述すると、この規則が適用されます。

<p title="foohellobar">Foo page</p>

クラスセレクタ

ドット「 . 」に続けて文字列を指定する方法です。class属性の値として、この文字列を持つ全ての要素を対象にすることができます。

例:

.foo {
  color: green
}

次のように p 要素を記述すると、この規則が適用されます。

<p class="foo">Foo page</p>

クラスを特定の要素に限定することもできます。その場合は、ドットの前に要素名を記述します。

例:

h1.foo {
  color: green
}

また、クラスの値を複数指定することもできます。その場合は、「ドット + クラス名」をつなげて指定します。

.foo.bar {
  color: green
}

ID セレクタ

シャープ「 # 」に続けて文字列を指定する方法です。id属性の値として、この文字列を持つ要素を対象にすることができます。
id属性の値は、文書の中で1つしか存在してはいけません。

例:

#foo {
  color: green
}

ID を特定の要素に限定することもできます。その場合は、ドットの前に要素名を記述します。

例:

h1#foo {
  color: green
}

擬似クラス

擬似クラスを使うと、特殊な条件に一致する要素を指定することができます。

動的擬似クラス

リンク擬似クラス

:link 擬似クラス
未訪問のリンクに適用されます。
:visited 擬似クラス
既に訪問済のリンクに適用されます。

ユーザーアクション擬似クラス

:hover 擬似クラス
ユーザーがマウスのカーソルを動かして重ねた要素に適用されます。
:active 擬似クラス
ユーザーによって実行された要素に適用されます。
:focus 擬似クラス
フォーカスを持つ要素に適用されます。

詳細は以下をご覧下さい。

7. ボックスモデル

CSS では、各要素に対して ボックスモデル と呼ばれる領域が生成されます。

各ボックスは、以下の領域を持っています。

コンテンツ領域
テキストや画像など、要素の内容が表示される領域です。
幅 (width)
コンテンツ領域の幅です。
box-sizing: border-box が指定された場合は、パディングとボーダーを含んだ長さが width になります。
高さ (height)
コンテンツ領域の高さです。
box-sizing: border-box が指定された場合は、パディングとボーダーを含んだ長さが height になります。
パディング (padding)(オプション)
コンテンツ領域を直接囲む領域です。
ボーダー (border)(オプション)
パディングの外側の領域です。枠を表します。
マージン (margin)(オプション)
ボーダーの外側の領域です。

隣り合った要素の間の距離は、これらの領域のサイズを指定することで調整します。

ボックスモデル

詳細は以下をご覧下さい。

8. HTML に CSS を適用する方法

いろいろな方法がありますが、できる限り CSS の記述は別ファイルに行うことがよいマナーであるとされています(スタイルに関する情報は HTML から切り離して管理した方が良いという理由です)。 しかし、それほど神経質に考えなくてもよいでしょう。

1. style 属性に記述する方法

全ての要素は style 属性を持っています。
各々の要素に対する「スタイル規則」は、style 属性に直接記述することができます。
宣言ブロックと同様、セミコロンで区切ることにより 複数のスタイル規則を記述することができます。

例:

<p style="color: #090; line-height: 1.2">...</p>

2. style 要素に記述する方法

スタイル規則(複数可)を記述したstyle 要素を、head 要素内に配置する方法です。

例:

<style>
p {
  line-height: 1.1;
}
p:first-letter {
  font-size: 3em;
  font-weight: normal
}
span {
  font-weight: bold;
}
</style>

3. 外部のスタイルシートを読み込む方法

スタイル規則(複数可)を記述したファイルを、HTMLファイル側から読み込む方法です。

その場合、外部スタイルファイルには、@charset を使って文字エンコーディングを指定しておきます。

例:

以下を記述したファイルに「 style.css 」という名前を付け、読み込み側の HTMLファイルと同じフォルダに保存します。

@charset "UTF-8";

p {
  line-height: 1.1;
}
p:first-letter {
  font-size: 3em;
  font-weight: normal
}
span {
  font-weight: bold;
}

HTML側は以下のように記述して、style.css を読み込みます。

 :
<head>
 :
  <link rel="stylesheet" href="style.css" type="text/css">
 :
</head>
 :

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

CSS

overflow:hidden が指定された領域内に、幅の大きい table (表) を記述する

目次1. はじめに2. 対応策3. おわりに 1. はじめに 本ウェブサイトは、スマートフォンのサイズだと 1カラムのレイアウトになるのですが、その際、画面全体を表す HTML要素のスタイルに、「ov …

Chrome

Google Chrome 68 で、HTTPS非対応のマークが変わりました

目次1. Chrome 68 がリリース2. 以前のマーク3. Chrome 68 以降のマーク4. ついでに、https にしてアクセスしてみる5. おわりに 1. Chrome 68 がリリース …

Web Vitals

LCP を意識した Highlight.js の読み込み方

LCP を意識した Highlight.js の読み込み方について説明します。

Web

Webページ中の特定の文字列をURLで指定する(Text Fragments)

Webページ中の特定の文字列をURLで指定する Text Fragments について説明します。

Web

ウェブサイトを開いたら表示される「通知の表示」を求めるポップアップについて

ウェブサイトの「通知」機能について説明してます。