Lesson 2

CSS

Chapter1 CSSとは
Chapter2 CSSの適用方法
Chapter3 ボックスモデル
Chapter4 外部スタイルシート
Chapter5 内部スタイルシート
Chapter6 インラインスタイル
Chapter7 セレクタ
Chapter8 セレクタの優先度
Chapter9 CSS宣言・宣言ブロック
Chapter10 プロパティと値
Chapter11 カスタムプロパティ
Chapter12 アットルール
Chapter13 ブラウザの互換性
Chapter14 実践編
Chapter15 CSSテンプレートの紹介
Chapter16 CSSフレームワークの紹介

Lesson 2 Chapter 1

CSS とは

Lesson1ではHTMLについて学びました。HTMLによってテキストや画像などの情報にタグや属性を持たせることで画面上に表示させることができました。タグや属性についてはこのレッスンでも重要になるのでよく復習しておきましょう！
さて、各要素を表示し文書構造を整えることができましたがこの段階ではまだウェブページの骨組みに過ぎません。より見やすくするために画面を装飾してあげる必要があります。

css適用前の画面 HTMLコードのみの画面です。文字や写真などの要素が並んでいるだけの構成になっています。

ではHTMLの要素をどうやって装飾すればよいのでしょうか。答えはCSSを使うことです！

CSS（Cascading Style Sheets：カスケーディング・スタイル・シート）とは、ウェブページのデザインを指定するための言語で、基本的にHTMLと組み合わせて使用します。 HTMLにより定義された要素に対して色やサイズ、配置などを指定しレイアウトすることができます。またボタンやアニメーションなどを追加することでさらに見やすいウェブページを作ることも可能です。実際に先ほどの画面にCSSを適用した例を見てみましょう。

css適用後の画面 CSSを適用した画面です。きれいにレイアウトされています！

CSSを理解すればウェブページを自由に装飾することができます。このレッスンを通してCSSでできることや書き方を学習し、自由にウェブページを作れるようになりましょう！まずはHTMLファイルにCSSを適用する方法について次のチャプターで解説していきます。

注意

HTMLなどにより構造化された文書のスタイルを指定する仕組みをスタイルシートと呼び、CSSはプログラミング言語ではなくスタイルシート言語に属します。

Lesson 2 Chapter 2

CSSの適用方法

このチャプターではHTMLファイルにCSSを適用する方法について解説します。HTMLの文書構造の復習も兼ねてしっかりと学習していきましょう。

HTMLファイルにCSSを適用する方法は大きく分けて2つあります。

linkタグで外部CSSファイルを呼び出す方法

styleタグでHTMLファイル内に直接記述する方法

それぞれどのように記述するのでしょうか。さっそく解説していきます。

linkタグで外部CSSファイルを呼び出す方法

まずlinkタグで外部CSSファイルを呼び出す方法を見てみましょう。linkタグを使うことで「.css」の拡張子がついた外部CSSファイルを呼び出し、CSSを適用することができます。具体的には次の一行をhead要素内に書くことで呼び出すことができます。

<link rel="stylesheet" href="style.css">

linkタグについてはLesson1で学習しましたね。rel属性でファイルの関係性を指定し、href属性でファイルのパスを指定して呼び出しています。次の例では「index.html」というファイルからlinkタグで同じディレクトリにある「style.css」というファイルを呼び出しています。

index.html

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

style.css

p {
  font-size: 1rem;
}

「style.css」というファイルの中にCSSが記述されています。このようにlinkタグにより呼び出す外部のCSSファイルを外部スタイルシートと呼びます。ここでは概要だけ掴んでいただき、詳細はLesson2 Chapter4で解説します。

推奨されるCSS

複数のHTMLファイルで一つのCSSファイルを呼び出すことができるため、ファイルの一括管理や修正が容易であることが特徴です。そのためHTMLファイルにCSSを適用する際には外部スタイルシートが推奨されています。

styleタグでHTMLファイル内に直接記述する方法

次にstyleタグでHTMLファイル内に直接記述する方法を見てみましょう。CSSをHTMLファイル内で記述するためにはstyleタグを用いる必要があります。 styleタグはスタイルシートを定義するためのHTMLタグでしたね。styleタグで囲われたスタイルシートをhead要素内に記述することでCSSを適用できます。

index.html

<head>
<style>
    p {
      font-size: 1rem;
    }
</style>
</head>

「index.html」というファイルのstyleタグの中にCSSが記述されています。このようにstyleタグでHTMLファイル内に直接記述するCSSを内部スタイルシートと呼びます。ここでは概要だけ掴んでいただき、詳細はLesson2 Chapter5で解説します。

ここでCSSの基本書式を簡単に説明します。CSSの書式は次の構造が基本となります。

CSS基本書式 CSSの記述の例です。セレクタ、プロパティ、値で構成されています。

セレクタはどこの部分（要素など）にスタイルを適用させるかを指定します。そしてプロパティはスタイルの種類、値はスタイルの具体的な数値などを指定することができます。先ほどの例では「p要素」に対して「font-size（フォントの大きさ）」を「1rem」というように指定しています。こちらはLesson2 Chapter9にて詳しく説明しますが、構造だけでも把握しておくと良いでしょう。

今回はHTMLファイルにCSSを適用する方法について概要を学習しました。次のチャプターではウェブページのレイアウトに最も重要なボックスモデルを解説していきます。

Lesson 2 Chapter 3

ボックスモデル

前回はHTMLファイルにCSSを適用する方法について学習しました。このチャプターではCSSでコーディングする際に重要となるボックスモデルという概念について学習していきましょう。

HTMLの要素は自身のコンテンツ（テキストや画像）を中心として、幅と高さを持つ四角形の領域によって形成されます。この四角形の領域をボックスと呼び、またボックスは複数の領域から構成されるためボックスモデルという概念で説明されます。ボックスモデルを理解することで各要素の配置を整える技術が身に付き、より複雑なレイアウトを作成できるようになります。

ボックスを形成する領域はcontent（コンテンツ）、padding（パディング）、border（ボーダー）、margin（マージン）の4つです。それぞれどのような特徴を持つのでしょうか。

ボックスモデルイメージボックスモデルのイメージです。中心からcontent、padding、border、marginの領域があります。

content（コンテンツ）

テキストや画像などのコンテンツが表示される領域です。幅と高さを持っており、widthやheight というプロパティで大きさを変えることができます。

padding（パディング）

パディングはコンテンツとボーダーの間にある余白の領域です。要素の内側の余白と捉えるとよいでしょう。上下左右の余白の大きさを指定することができ、要素に背景色をつける場合はコンテンツとパディングの領域に色がつきます。

border（ボーダー）

ボーダーはコンテンツとパディングをラップする境界線（枠線）です。デフォルトでは太さが0のため表示されませんが、線の太さや色、点線といったスタイルを指定することができます。

margin（マージン）

マージンは最も外側にある余白の領域です。パディングと同様に上下左右の余白の大きさを指定することができます。要素と要素の間隔を整える際には、基本的にマージンを調整します。

ボックスの種類

ボックスにはいくつか種類があり、今回は特に重要なブロックボックスとインラインボックスについて解説します。 HTMLの要素はタグごとにデフォルトのボックスの種類が決められていますが、用途に応じてdisplayプロパティにより種類を変更することができます。

ブロックボックス

ブロックボックスは上から下に配置されるボックスです。幅と高さおよび上下左右のpaddingとmarginを指定できます。ブロックボックスで表示される要素をブロック要素と呼びます。
デフォルトがブロックボックスのタグ：h1~h6、div、p、ulなど

インラインボックス

インラインボックスは左から右に配置されるボックスです。同じ行内に配置されると考えるとイメージがつきやすいです。幅と高さを指定することができず、幅が親要素いっぱいになると折り返して表示されます。また上下のmarginも指定できません。インラインボックスで表示される要素をインライン要素と呼びます。
デフォルトがインラインボックスのタグ：a、span、strong、imgなど

ボックス種類イメージ各ボックスのイメージです。ブロックボックスは縦に、インラインボックスは横に配置されます。

ボックスモデルのイメージを掴むことはできたでしょうか。CSSのレイアウトには欠かせない概念なのでしっかりと復習しておきましょう。また具体的にどのようにコーディングするのかはLesson2 Chapter14の実践編で詳しく解説します。
次のチャプターからは前回学習したCSSを適用する各方法についてより詳しく説明していきます。

Lesson 2 Chapter 4

外部スタイルシート

Chapter2ではCSSを適用する方法について概要を説明しました。このチャプターではその中の一つである外部スタイルシートについてさらに詳しく説明します。

HTMLファイルから外部スタイルシートを呼び出す方法は覚えているでしょうか。linkタグを使うことで外部CSSファイル（外部スタイルシート）を呼び出すことができましたね。例として次のようにhead要素内に記述することで呼び出すことができます。
<link rel="stylesheet" href="style.css">
"style.css"は今回このHTMLファイルと同じ階層にあるCSSファイルです。hrefの指定先は相対パスか絶対パスで示す必要があります。

では実際に次のHTMLファイルにCSSファイルを適用した画面を見てみましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Smaple Page</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>サンプル</h1>
  <p>サンプル</p>
  <p class="color-change">サンプル</p>
</body>
</html>

style.css

body {
  font-family: "Lato";
  color: red;
}
p {
  font-size: 1.5rem;
}
.color-change {
  color: blue;
}

表示画面イメージ表示される画面です。bodyタグ全体とpタグがそれぞれ装飾されていますね。

この外部スタイルシートではbodyタグとpタグに対してスタイリングを適用しています。bodyタグ全体には、「font-family（フォントの種類）」はLato、「color（文字の色）」は赤という指定をしています。 pタグには「font-size（文字の大きさ）」は1.5remという指定をしています。最後に”color-change”というクラスを持つタグに「color（文字の色）」は青という指定をしています。ここで二つ目のpタグにはclass=”color-change”というクラス属性がついているため、二つ目のpタグはスタイルが上書きされて文字の色が青になっています。
クラスについてはLesson2 Chapter7で詳しく解説しますが、スタイルを分けるためにタグに別の名前を追加できるものと認識しておきましょう。

スタイルの優先度

cssではより後に指定されたスタイルが優先されます。Lesson2 Chapter8でさらに詳しく解説します。

外部スタイルシートを使用する最大のメリットは、複数のウェブページのスタイルを一つのスタイルシートで管理できる点です。複数のHTMLファイルで同じCSSファイルを呼び出すことで共通のスタイルを適用することができ、デザインの修正も容易にすることができます。そのため基本的には外部スタイルシートを呼び出す方法が推奨されているので、よく覚えておきましょう。

複数のHTMLで一つのCSSを適用一つの外部スタイルシートで複数のHTMLファイルに適用できます。

このようにHTMLファイルから外部スタイルシートを呼び出すことでCSSを適用できることが分かりましたね。次のチャプターではHTMLファイルに直接CSSを記述する内部スタイルシートについて詳しく解説します。

Lesson 2 Chapter 5

内部スタイルシート

Chapter2ではCSSを適用する方法について概要を説明しました。このチャプターではその中の一つである内部スタイルシートについてさらに詳しく説明します。

内部スタイルシートを適用する方法は覚えているでしょうか。head要素内のstyleタグの中にCSSを書けばよいのでしたね。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Smaple Page</title>
  <link rel="stylesheet" href="style.css">

  <style>
    body {
      font-family: "Lato";
      color: red;
    }
    p {
      font-size: 1.5rem;
    }
    .color-change {
      color: blue;
    }
  </style>

</head>

<body>
  <h1>サンプル</h1>
  <p>サンプル</p>
  <p class="color-change">サンプル</p>
</body>
</html>

内部スタイルシートもCSSの書き方は外部スタイルシートと同じ構造になります。このHTMLファイルで表示される画面が前回のチャプターと同じ画面になることを確認してみましょう。

表示画面イメージ表示される画面です。bodyタグ全体とpタグがそれぞれ装飾されていますね。

type=text/cssとは

CSSの学習のためにソースコードを参照する際に、<style type=text/css></style>という記述を見かけるかもしれません。これは内部スタイルシートを書くために、styleタグにtype属性としてtext/cssという値を入れているのですが、HTML5からはデフォルトの値として既に定義されているためこの記述は必要ありません。

内部スタイルシートを使ってCSSを適用する方法を解説しました。前回説明したようにHTML/CSSの開発では外部スタイルシートを呼び出す方法が推奨されていますが、共通のスタイルと区別したい要素がある場合などでは、内部スタイルシートを使うことで一部のスタイルを変更することができます。

内部スタイルシートで一部のスタイルを変更内部スタイルシートであるHTMLファイルだけスタイルを変更できます。

次のチャプターでは外部・内部スタイルシートに加えて、より簡易的にCSSを適用するインラインスタイルというものについて紹介します。

Lesson 2 Chapter 6

インラインスタイル

前回まではCSSを適用する方法として外部スタイルシートと内部スタイルシートについて詳しく学習しました。実はもう一つCSSを記述する方法があります。今回はインラインスタイルという方法について解説していきます。

インラインスタイルとは要素の開始タグの中に直接CSSを記述する方法で、内部スタイルシートと比べてどこにどんなスタイルをつけているかが分かりやすいというメリットがあります。実際のコードを見てみましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Smaple Page</title>
</head>

<body style="font-family: 'Lato'; color: red">
  <h1>サンプル</h1>
  <p style="font-size: 1.5rem;">サンプル</p>
  <p style="font-size: 1.5rem; color: blue">サンプル</p>
</body>
</html>

bodyタグとpタグの開始タグに「style=""」という記述がありますね。これはstyle属性と言い、インラインスタイルを記述する際に使用します。また今までのCSSの書き方と少し違うことにお気づきでしょうか。インラインスタイルでは改行を避けるためにstyle="プロパティ: 値"という書き方をします。複数のプロパティをつけたい場合はセミコロン;で繋ぐことが可能です。

このHTMLファイルが前回までのチャプターと同じ画面になることを確認してみましょう。

表示画面イメージ表示される画面です。bodyタグ全体とpタグがそれぞれ装飾されていますね。

より簡易的にCSSを適用するインラインスタイルの書き方が理解できましたね。その上でインラインスタイルをすべてのタグに一つずつ書くのは効率が悪いということもお気づきになられたかと思います。

インラインスタイルは基本的にある特定の箇所のスタイルを指定するために用いられます。インラインスタイルは外部/内部スタイルシートより優先度が高いため、外部スタイルシートで全体的にスタイリングし、一部のみ変更させたい場合にインラインスタイルが有効です。

スタイルシートの優先度

ここまでに学習したスタイルシートの優先度について解説します。まずインラインスタイルが最も優先度が高いです。優先度が高いということはスタイルを上書きできるということなので、先ほど説明したように一部のスタイルを変更する際に用いられます。そして外部スタイルシートと内部スタイルシートは優先度が同じです。そのため後に記述されたほうが優先されるというCSSの基本ルールに準じるため、 head要素内においてlinkタグを先に記述するかstyleタグを先に記述するかで優先度が決まります。

優先順位	疑似要素セレクタの例	説明
1	インラインスタイル	外部スタイルシートや内部スタイルシートで共通スタイルを決め、一部のスタイル変更に用いられます。
2	外部スタイルシート内部スタイルシート	linkタグで外部スタイルシートを先に呼び出すか、styleタグで内部スタイルシートを先に記述するかで優先度が決まります。

ここまでの学習でどのようにしてHTMLファイルにCSSを適用するかを理解できたと思います。次のチャプターではより具体的なCSSの書き方を学ぶため、セレクタについて解説していきます。

Lesson 2 Chapter 7

セレクタ

前回まではCSSを適用する方法について詳しく学習しました。今回はCSSを記述するために必要なセレクタについて詳しく解説していきます。

セレクタとはCSSをどこに適用するかを指定する条件式です。セレクタに対してブレース{}の中にプロパティと値を記述するのがCSSの基本構造になります。セレクタには様々な種類があり、どこの要素にスタイルをつけたいかで効率的に使い分けることができます。

CSS基本書式 CSSの基本構造です。セレクタ、プロパティ、値で構成されています。

このチャプターでは次のHTMLファイルにセレクタを分けてスタイルを当てていきます。どのようなスタイルを記述しているかについては随時解説しますが、Chapter10やChapter14でも詳しく解説します。それでは各セレクタの特徴と使い方を理解しながら学習しましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Smaple Page</title>
  <link rel="stylesheet" href="style.css">
</head>
                      
<body>
  <div class="section_01">
    <h1>サンプル</h1>
    <p>サンプル</p>
  </div>

  <div class="section_02">
    <p class="color-red">テキストが赤になるよ</p>
    <p id="color-green">テキストが緑になるよ</p>
    <p class="color-red" id="color-blue">テキストが青になるよ</p>
  </div>

  <div class="section-link">
    <a href="#" class="link">リンク</a>
  </div>

  <div class="section_03">
    <h2>サンプル</h2>
    <p>１番目のpタグ</p>
    <p>２番目のpタグ</p>
    <div>
        <p>３番目のpタグ</p>
    </div>
    <p>４番目のpタグ</p>
  </div>
</body>
</html>

初期画面用意したHTMLファイルのスタイルを当てる前の表示です。

要素セレクタ

要素セレクタは文字通り要素を指定するセレクタで、要素名（タグ名）で記述します。タイプセレクタとも呼ばれます。指定した要素がすべて対象となるため、リセットや初期設定などに用いられることが多いです。ではbodyタグに対して次のスタイルを適用させます。

style.css

body {
    font-family: "Lato", "Noto Sans JP", sans-serif;
    color: #333;
}

ここではフォントに"Lato", "Noto Sans JP", sans-serif 、文字色に#333（カラーコード）を指定しています。フォントは左から順に適用され、ユーザーの端末で一致するフォントがない場合に備えて替わりのフォントを用意します。ちなみにWebサイトで黒の文字色を使う場合は、真っ黒（#000000）では強すぎるため少しだけグレーを帯びた色が使われます。 bodyタグにはこのように全体的にスタイルを統一させる記述をすることが多いです。この場合スタイルシートの最初に記述する必要があります。上記のスタイルを当てた画面を見てみましょう。

要素セレクタのスタイルを当てた画面 bodyタグにスタイルを当てた画面です。フォントと文字色が変わっています。

全称セレクタ

全称セレクタ（ユニバーサルセレクタ）はすべての要素を指定するセレクタで、アスタリスク*で記述します。リセットや、後述する結合子と併せて階層指定に使用することがあります。次のスタイルを当ててみましょう。

style.css

* {
  margin: 0;
  padding: 0;
}

ここでは全称セレクタを用いて、すべての要素に対してマージンとパディングを無くすように指定しています。スタイルが当てられた画面を見てみると、各要素の余白が無くなり間隔が狭くなっていることが分かります。

全称セレクタのスタイルを当てた画面すべてのタグにスタイルを当てた画面です。余白が無くなっています。

リセットCSS

Webブラウザには要素に対してあらかじめCSSが適用されており、このデフォルトのCSSをuser agent stylesheet（ユーザーエージェントスタイルシート）と呼びます。余白やフォントなどを最初にリセットすることでデフォルトのスタイルを打消し予期せぬスタイルを避けることができます。またリセットの宣言をまとめたリセットCSSというファイルがオープンソースで公開されています。リセットCSSをHTMLファイルに読み込むことで適用でき、ブラウザ毎の差異を埋めることができます。

クラスセレクタ

クラスはタグの中に記述できる属性の一つで、すべてのタグに任意のクラス名を記述することができます。そしてクラス名を指定したセレクタをクラスセレクタと呼びます。用意したHTMlファイルを見てみると<p class="color-red"></p>という記述があります。このようにクラス属性をタグに追記することができ、ピリオド.をつけることでクラス名をセレクタとして指定することができます。では次のスタイルを当ててこのクラスを持つタグの文字色を赤に変えてみます。

style.css

.color-red {
  color: red;
}

section_02クラスの子要素にあるpタグは、一つ目と三つ目にcolor-redというクラスがついています。そのため color-redというクラスを持つpタグ二か所が赤い文字色になっています。このように同じクラスを何回でも使用することができるため、クラス名を管理することで共通のスタイルを当てることができるとても便利なセレクタです。

クラスセレクタのスタイルを当てた画面 "color-red"クラスにスタイルを当てた画面です。このクラスを持つタグが赤くなっています。

IDセレクタ

IDはクラスと同様にタグの中に記述できる属性の一つで、すべてのタグに任意のID属性を記述することができます。そしてID名を指定したセレクタをIDセレクタと呼びます。用意したHTMLファイルを見てみると<p id="color-green"></p>という記述があります。このようにID属性をタグに追記することができ、ハッシュ#をつけることでID名をセレクタとして指定することができます。

クラスとIDは似ていますが大きな違いがあります。まず一つ目にファイル内で使用できる回数について、クラスは何度でも使用できますがIDは一回しか使用できません。そこでクラスは汎用的なスタイルとして使用し、ページ内リンクなど一つあればよい要素にID属性をつけるべきだと言えます。また二つ目に優先度が異なり、IDの方がクラスよりも優先度が高いです。なおセレクタの優先度についてはChapter8で解説します。

このことを踏まえて次のスタイルを当てて文字色を変えてみましょう。結果を見てみると"color-blue"IDのスタイルが優先されて"color-red"クラスのスタイルを上書きしていることが分かります。

style.css

#color-green {
  color: green;
}
#color-blue {
  color: blue;
}

IDセレクタのスタイルを当てた画面" "color-green"IDと"color-blue"IDにスタイルを当てた画面です。"color-red"クラスのスタイルが上書きされています。

クラス名、ID名のルール

クラス名とID名は任意の名称をつけることができますが、次のルールがあるので注意しましょう。
・半角英数字、ハイフン-、アンダースコア_を使う
・空白（スペース）は使わない
・一文字目は必ず英字

属性セレクタ

属性セレクタは任意の属性が存在する場合やその値から判断して要素を指定するセレクタです。通常のセレクタにブラケット[]をつけて追記します。属性セレクタの指定方法には種類があるので例を紹介します。

属性セレクタの例	説明
div[class]	classという属性を持つdivタグ
div[class="text"]	classという属性の値がtextであるdivタグ
div[class^="text"]	classという属性の値が、textで始まる文字列であるdivタグ
div[class$="text"]	classという属性の値が、textで終わる文字列であるdivタグ
div[class*="text"]	classという属性の値が、textという文字列を含むdivタグ

次は属性セレクタを使って要素に余白をつけてみます。HTMLファイルを見ると"section_01"、"section_02"、"section_03" というクラスがあります。共通部分である"section_0"を値として指定することで、クラス名の違うこれらのタグにまとめてスタイルを当てることができます。なお次のスタイルでは上下のマージンに50px、左右のマージンに10pxを指定しています。

style.css

div[class^="section_0"] {
  margin: 50px 10px;
}

属性セレクタのスタイルを当てた画面" "section_0"で始まるタグの上下左右に余白がついています。

疑似クラスセレクタ

疑似クラスセレクタとは要素の特定の状態を指定することができるセレクタです。通常のセレクタにコロン:をつけて追記します。実用的なものを紹介すると、例えば:hoverという疑似クラスはマウスカーソルが要素に合わさっている時に要素の色を変えるといったスタイリングが可能です。

疑似クラスセレクタの例	説明
a:hover	マウスカーソルが合わさっている時のaタグ
a:active	クリックなどによりアクティブになったaタグ
a:link	未訪問のaタグ
a:visited	訪問済みのaタグ
div p:nth-child(n)	親要素内（divタグ）の要素の中でn番目にあるpタグ

では疑似クラスセレクタを使ってスタイルを当ててみましょう。リンク先を示すaタグに"link"クラスがついています。このクラスに対して :hoverの疑似クラスを使って、カーソルが合わさっている時に背景色がつくようにしてみましょう。背景色はbackground-color というプロパティで指定できます。

style.css

.link:hover {
    background-color: yellow;
}

疑似クラスセレクタのスタイルを当てた画面マウスカーソルが合わさると背景色が黄色になります。

疑似要素セレクタ

疑似要素セレクタとは要素の一部や要素を追加して指定できるセレクタです。通常のセレクタに二重コロン::をつけて追記します。例えば::first-letterという疑似要素は要素の最初の一文字を指定することができます。

疑似要素セレクタの例	説明
p::first-letter	pタグの最初の一文字
p::before	pタグの直前に要素を追加
p::after	pタグの直後に要素を追加

今度は疑似要素セレクタ::beforeを使ってリンクの前に文章を追加しスタイルを当ててみましょう。

style.css

.section-link::before {
  content: "リンクはこちら　→　";
  margin-left: 20px;
}

リンクのaタグを囲っている"section-link"というクラスに疑似要素を追加します。contentプロパティを使うことで疑似要素の値を置換することができます。この例では"section-link"クラスの直前に「リンクはこちら　→　」という値を持つ要素を表示しているということです。そしてその疑似要素に対してさらに左側のマージンを20pxに指定しています。表示画面を見てみましょう。リンクの左側に文章が追加され、余白も他の要素と揃っていることが分かります。

疑似要素セレクタのスタイルを当てた画面「リンクはこちら　→　」という疑似要素が追加されています。

子孫結合子

CSSのセレクタは結合子を使うことで階層指定をすることができます。子孫結合子はその中で最も多く用いられる結合子で、半角スペースでセレクタを結合します。一つ目の要素が祖先（親、親の親など）となっている二つ目の要素を指定します。では子孫結合子を使って次のスタイルを当ててみます。

style.css

.section_03 p{
    font-size: 1.5rem;
}

子孫結合子を使って"section_03"クラスの子孫要素にあるすべてのpタグに対してフォントの大きさを1.5remに指定しています。このようにクラスセレクタなどと組み合わせることで余計なクラスを追加せずに効率的にセレクタを指定することができます。なかでもこの子孫結合子は頻繁に使われるので覚えておきましょう。

子孫結合子のスタイルを当てた画面 "section_03"クラスの子孫要素にあるすべてのpタグのフォントが大きくなっています。

子結合子

子結合子は右アングルブラケット>でセレクタを結合します。二つ目の要素が一つ目の要素の直接の子要素となる場合に指定できます。子孫結合子に対してより限定的に使うことができます。では子孫結合子を使って次のスタイルを当ててみます。

style.css

.section_03>p {
  color: red;
}

子結合子により"section_03"クラスの子要素にあるすべてのpタグに対して文字色を赤にしています。ここで３番目のpタグはdivタグによってさらに下層におり、直接的な子要素ではないためスタイルが適用されていません。

子孫結合子のスタイルを当てた画面 "section_03"クラスの子要素にあるpタグだけ文字色が赤くなっています。

隣接兄弟結合子

隣接兄弟結合子はプラス+でセレクタを結合します。二つ目の要素が一つ目の要素の直後にあり、両者が同じ親要素を持つ場合に二つ目の要素を指定します。子要素に同じタグが並ぶ時、一つ目の要素だけ指定したい場合に用います。次のスタイルを確認してみましょう。

style.css

.secton_03 h2+p{
    background-color: yellow;
}

今回は子孫結合子と隣接結合子を組み合わせています。"section_03"クラスの子要素にあるh2タグについて、同じ親要素を持つ直後のpタグに対して背景色を黄色にしています。したがって１番目のp要素だけスタイルが適用されています。

隣接兄弟結合子のスタイルを当てた画面 "section_03"クラスの子要素にあるh2タグの直後のpタグだけ背景色が黄色になっています。

一般兄弟結合子

一般兄弟結合子はチルダ~でセレクタを結合します。二つ目の要素が一つ目の要素の後にあり、両者が同じ親要素を持つ場合に二つ目の要素を指定します。隣接兄弟結合子に対し複数の子要素を指定することができます。では一般兄弟結合子を使って次のスタイルを当ててみます。

style.css

.section_03 h2~p:nth-child(odd)::after {
    content: "★";
}

最後は複数のセレクタを組み合わせて少し難しくしてみました。まず一般兄弟結合子の部分を見ると、"section_03"クラスの子要素にあるh2タグについて、h2タグの後ろにありかつ同じ親要素を持つpタグを指定しています。次にnth-child(odd)疑似クラスで、"section_03"の子要素の中で奇数番目のものを指定しています。つまりh2タグも子要素の一つなので２番目のpタグと４番目のpタグが対象です。さらにafter疑似要素でその後ろに要素を追加しています。

一般兄弟結合子のスタイルを当てた画面 "section_03"クラスの子要素にあるh2タグの後ろの、２番目と４番目のpタグに★がついています。

セレクタの種類と使い方を理解できましたか。セレクタを理解することでどこにスタイルを適用させるかを考える際に効率的にコードを書くことができます。次のチャプターでは今回学んだセレクタの優先度について解説します。

セレクタ	記号	特徴
要素セレクタ	タグ名	リセットや初期設定、子孫結合子と併せて使用される。
全称セレクタ	*	リセット、子孫結合子と併せて使用される。
クラスセレクタ	クラス名	任意のタグにクラス属性を追記して使用される。同じクラスを何度でも使用できる。
IDセレクタ	ID名	任意のタグにID属性を追記して使用される。同じIDは一度しか使用できない。クラスよりも優先度が高い。
属性セレクタ	[]	任意の属性を持つ場合やその値から判断して指定できる。一定のルールがあるクラス名などに有効。
疑似クラスセレクタ	:	要素の特定の状態を指定できる。
疑似要素セレクタ	::	要素の一部や前後に要素を追加して指定できる。
子孫結合子	半角スペース	一つ目の要素の子孫要素にあたる要素を指定できる。最もよく使われる結合子。
子結合子	>	一つ目の要素の直接の子要素にあたる要素を指定できる。子孫結合子より限定的。
隣接兄弟結合子	~	一つ目の要素の兄弟要素（同じ親要素）にあたり、かつ直後にある要素を指定できる。一般兄弟結合子より限定的。
一般兄弟結合子	~	一つ目の要素の兄弟要素（同じ親要素）にあたり、かつ後ろにある要素を指定できる。

Lesson 2 Chapter 8

セレクタの優先度

このチャプターでは前回学習したセレクタについてそれぞれの優先度を解説します。CSSのセレクタには詳細度という点数があり、この点数が高いほど優先順位が高いという仕組みになっています。各セレクタの点数を確認しましょう。

名称	例	点数
全称セレクタ	*	0.0.0.0
要素セレクタ	p	0.0.0.1
疑似要素セレクタ	::first-letter	0.0.0.1
クラスセレクタ	.header	0.0.1.0
属性セレクタ	[class="text"]	0.0.1.0
疑似クラスセレクタ	:link	0.0.1.0
IDセレクタ	#user	0.1.0.0
インラインスタイル	<style="...">	1.0.0.0

点数は左の桁が大きいほど点数が高いので、表では上から優先度が低い順となっています。前回のチャプターで結合子についても学習しましたね。セレクタは結合子によって詳細化することで点数が加算されます。例えば子孫結合子で要素セレクタ同士を結合した場合（div p）、点数は0.0.0.2となります。もし加算されて10になっても桁は繰り上がらず0.0.0.10となるので、0.0.1.0より点数が低いということに注意してください。
では実際の例で確認してみましょう。

index.html

<div class="header">
  <div>
    <p class="header-text">サンプル</p>
  </div>
</div>

style.css

.header div p {
  color: yellow;
}

.header .header-text {
  color: green;
}

.header-text {
  color: blue;
}

p {
  color: red;
}

このCSSファイルでは各宣言がすべて"header-text"というクラスを持つpタグを指定していますが、どの宣言が優先されるのでしょうか。上から点数を確認していくと次のようになります。

セレクタ	点数
.header div p	0.0.1.2
.header .header-text	0.0.2.0
.header-text	0.0.1.0
p	0.0.0.1

この中で最も点数が高いのは点数が0.0.2.0の.header .header-textというセレクタですね。したがって宣言の順番に関係なく二つ目のcolor: greenという宣言が優先されます。またもし点数が同じ場合は後に記述されたほうが優先されるという基本ルールに準じるということも覚えておきましょう。

!important

最優先でスタイルを指定したい場合に「!important」という記述をすることができます。例えば先ほどの例で次のように!importantという記述を追加すると、点数の大小に関係なくこのプロパティを優先させることができます。これは便利ですが多用しすぎると混乱を招いてしまうので、どうしても必要な時に使うという認識でいましょう。

p {
  color: yellow !important;
}

セレクタの優先度について理解できたでしょうか。次回はCSS宣言ブロックについて改めて詳細に解説します。

Lesson 2 Chapter 9

CSS宣言・宣言ブロック

前回まではCSSのセレクタについて学習しました。今回は改めてCSSの基本構造について解説します。CSSではセレクタに対してブレース{}の中にプロパティと値を記述すると説明しました。プロパティと値の組をCSS宣言と呼び、CSS宣言を順番に集めたものを宣言ブロックと呼びます。ブレース{}で囲われた部分が宣言ブロックです。

CSS基本書式 CSSの基本構造です。セレクタと宣言ブロックで構成されます。

宣言ブロックの中には宣言をいくつ記述しても問題ありません。複数の宣言をする場合はセミコロン;で区切って記述しますが、コードを見やすくするためにセミコロン;で改行するのが一般的です。また同じ宣言ブロック内では後に記述された宣言が優先されます。

コメントアウト

コメントアウトとはソース内にメモを残す記述のことです。CSSではどこにスタイルを適用させているかを一目で分かりやすくするために適宜コメントを残すと良いです。CSSでは/**/を使ってコメントアウトすることができます。

style.css

/*
この部分がコメントです。
*/
p {
    font-size: 1rem;    /*この部分がコメントです*/
}

CSSの基本構造についてCSS宣言と宣言ブロックを学習しました。次のチャプターではCSS宣言におけるプロパティと値について詳しく解説します。

Lesson 2 Chapter 10

プロパティと値

前回はCSS宣言・宣言ブロックについて学習しました。今回は宣言におけるプロパティと値について詳しく解説します。プロパティはどんなスタイルかを指定し、値でそのスタイルの具体的な数値などを決定します。プロパティと値は宣言ブロックの中に記述し、プロパティに続けてコロン:で値と結びつけます。複数記述する場合はセミコロン;で区切ります。

CSS基本書式 CSSの基本構造です。宣言ブロックの中にプロパティと値を記述します。

ではよく使用されるプロパティと値の例を紹介します。

プロパティ	用途	値
font-size	文字のサイズを指定	1rem, 50%など。数値と単位で指定。
font-family	フォントの種類を指定	'游ゴシック', "Noto Sans JP"など。フォント名をシングルまたはダブルクオーテーションで囲って指定。
font-bold	文字の太さを指定	bold, 600など。キーワードまたは数値で指定。
color	文字の色を指定	red, rgb(255,0,0), #fffなど。キーワード、rgb値またはHEX値で指定。透明度を指定する場合はrgbの4つ目の値にalpha値を指定。
text-align	テキストを揃える位置を指定	left, centerなど。キーワードで指定。
text-decoration	テキストに下線をつけたり、リストのマークを消したりする	underline, noneなど。キーワードで指定。
background-color	背景色を指定	colorプロパティと同様に指定。
background-image	背景の画像を指定	urlまたはファイルパスで指定。
width	横幅を指定	300px, 10%など。数値と単位で指定。指定しない場合は初期値がautoなので自動的に指定される。
height	高さを指定	300px, 10%など。数値と単位で指定。指定しない場合は初期値がautoなので自動的に指定される。
margin	マージン（要素の外側の余白）を指定	10px, 10%など。数値と単位で指定。autoと記述すると親要素の幅から自動で余白を算出する。
padding	パディング（要素の内側の余白）を指定	10px, 10%など。数値と単位で指定。autoと記述すると親要素の幅から自動で余白を算出する。
border-width	枠線の太さを指定	2px, thickなど。数値と単位またはキーワードで指定。
border-style	枠線のスタイルを指定	solid, dottedなど。キーワードで指定。初期値はnone。
border-color	枠線の色を指定	colorプロパティと同様に指定。

単位について

ここまでフォントの大きさを指定するのにremという単位を使用していましたが初めて聞く方がほとんどだと思います。 CSSにはサイズを指定するのに使用する単位がいくつかあるので紹介します。まず絶対長さとして用いられるものにpxがあります。余白やヘッダーの高さなどサイズを固定したい箇所に有効です。一方で相対高さとして用いられるものには%、em、remなどがあります。これらは他の要素を基準とした際の大きさを指定するためメンテナンスがしやすいというメリットがあります。それぞれの単位を使い分けることが重要です。よく用いられる単位をまとめるので参考にしてください。

単位	説明
px	絶対長さ。1ピクセル = 1/96インチ
%	使用するプロパティによって基準が異なる。 font-size: 親要素のフォントサイズ margin, padding: 親要素の幅　　など。
em	親要素のフォントサイズを基準（=1em）とした時の相対的なサイズ。
rem	ルート要素（html要素）のフォントサイズを基準（=1rem）とした時の相対的なサイズ。
vw	ビューポート（ブラウザのウィンドウサイズ）の幅に対するパーセント長さ。
vh	ビューポートの高さに対するパーセント長さ。

CSSのプロパティと値についてよく使われるものを学習しました。Chapter14では実践編としてより実用的な使い方を紹介します。次のチャプターではカスタムプロパティと呼ばれる変数ついて解説します。

Lesson 2 Chapter 11

カスタムプロパティ

前回はプロパティと値についてよく使用されるものを紹介しました。今回はカスタムプロパティと呼ばれる変数について解説します。まず変数とは文字列や数値を入れておける箱のようなもので、自由に値を出し入れできます。 CSSにおける変数はカスタムプロパティ（またはCSS変数）と呼ばれ、数値やカラーコードなどを変数として定義することで効率よく管理することができます。

カスタムプロパティには任意の名前をつけることができます。宣言する方法はハイフン二つ--で始まるカスタムプロパティ名に対して値を指定することによって宣言することができます。そしてカスタムプロパティを呼び出したい時は、var()関数を使用します。var()関数はカスタムプロパティ名を引数とすることで、替わりにそのカスタムプロパティの値を挿入することができます。参考例を見てみましょう。

ボタンの背景色を管理する

同じデザインのボタンなどを複数使用する場合、カラーコードや余白の大きさをカスタムプロパティによって統一しておくと、後から修正する際に管理しやすくなります。例としてボタンの背景色についてスタイルを当ててみます。

index.html

<p>
  <a href="#" class="button">Primary</a>
</p>
<p>
  <a href="#" class="button button-gradation">Secondary</a>
</p>

style.css

:root {
  --color-primary: 43, 223, 27;
  --color-secondary: 255, 186, 58;
}                  
.button {
  display: block;
  text-decoration: none;
  color: #fff;
  background-color: rgb(var(--color-primary));
  width: 80px;
  text-align: center;
  padding: 10px 20px;
  border-radius: 10px;
}
.button:hover {
  background-color: rgba(var(--color-primary), .5);
}
.button-gradation {
  background: linear-gradient(to right, rgb(var(--color-primary)), rgb(var(--color-secondary)));
}
.button-gradation:hover {
  background: radial-gradient(rgba(var(--color-primary)), rgba(var(--color-secondary)));
}

sample_gradation ボタンの背景色にスタイルを当てています。マウスが当たった時にスタイルが変化しています。

まず:rootという疑似クラスを使いカスタムプロパティでカラーコード（RGB値）を宣言しています。カスタムプロパティはどのセレクタにも記述できますが、:root疑似クラスをセレクタにすることでグローバル変数のように使用することができます。そして"button"クラスでbackground-colorに対してカスタムプロパティを呼び出しています。今回は数値だけを変数として宣言しているので、呼び出すときはrgb(var(...))と指定する必要があります。

カラーコードはキーワードやHEX値で指定することもできますが、数値だけを変数とすることで便利な使い方ができます。.button:hover疑似クラスを見ていただくと、今度はRGBA値の中でカスタムプロパティを呼び出しています。A（Alpha）は透明度を示すもので、マウスカーソルが当たった時に少し透けて見えるようにしています。

またbackgroundプロパティのlinear-gradientまたはradial-gradientを使うことで背景色のグラデーションを作ることができます。二つ目のボタンについて、カスタムプロパティで宣言した --color-primaryと--color-secondaryを使ってグラデーションをつけています。このように繰り返し使用するカラーコードを一つの変数として宣言することで管理しやすくなっていることが分かります。

カスタムプロパティの注意

値としてカスタムプロパティを呼び出すことはできますが、カスタムプロパティをプロパティ名で指定することはできません。例えば--size: margin;のように--sizeの値には数値を入れる必要があります。また、カスタムプロパティの命名についても既存のプロパティ名と被らないように注意しましょう。

SVGを使う

SVGとは画像フォーマットの一種で、CSSやJavascriptで画像を作ることができます。そのためCSSと相性がよくダウンロードしたSVGの編集も比較的容易に可能です。カスタムプロパティを用いてSVGのスタイルを変更してみます。

index.html

<svg class="icon-accessible icon01" stroke="var(--icon-color)">
  <use href="#icon-accessible"></use>
</svg>              
<svg class="icon-accessible icon02" stroke="var(--icon-color)">
  <use href="#icon-accessible"></use>
</svg>              
<svg class="icon-accessible icon03" stroke="var(--icon-color)">
  <use href="#icon-accessible"></use>
</svg>

style.css

:root {
  --size: 75px;
  --icon-color: black;
}

.icon-accessible {
  width: var(--size);
  height: var(--size);
  transform: rotate(var(--angle));
}
.icon01 {
  --angle: -45deg;
}
.icon02 {
  --size: 100px;
}
.icon03 {
  --angle: 180deg;
  --icon-color: green;
}

sample_icon アイコンの大きさ角度、色を変更しています。

まず:root疑似クラスで--sizeと--icon-colorを宣言しています。そして "icon-accessible"という共通のクラスにwidth、height、transformプロパティを用意し、値にカスタムプロパティを指定しています。transformはrotate()を決めることで回転させることができます。共通のスタイルを当てておくことで、アイコンを編集したい際は、各アイコンのクラスにおいてカスタムプロパティの値を上書きするだけでそれぞれのスタイルを変更できるようにしています。

今回はカスタムプロパティについて学習しました。複雑なWebページでは膨大な量のCSSがあり、同じ値が何度も使われていることがあります。カスタムプロパティを用いることで何度でも呼び出し、かつこれらの値を一か所で管理することができます。またカスタムプロパティ名を任意の名称とできるため、参照する際に意味が分かりやすくなるというメリットもあります。変数を使うことで効率的に記述できる部分もあるので意識しながら制作できると良いでしょう。次のチャプターではアットルールについて解説します。

Sass

SassとはCSSの拡張言語で、より直感的な記述ができたり便利な変数や関数を使うことも可能です。CSSを理解していれば比較的学習しやすい言語なので、このLessonを終えてから挑戦してみるのも良いでしょう。

Lesson 2 Chapter 12

アットルール

今回はアットルールと呼ばれる書式について解説します。アットルールとはセレクタとプロパティだけでは指定できない動作を定義するために用意されているものです。アットマーク@から始まり、識別子を指定する箇所から、セミコロン;または次のCSS宣言ブロックまでの部分からなります。それでは代表的なアットルールの種類と使い方について紹介します。

@charset

@charsetはブラウザにおける文字化けを防ぐためにスタイルシートで使用する文字コードを指定します。例えば日本語のフォントを指定する際に日本語の部分が文字化けをしてブラウザがフォントを認識してくれないといった事態を避ける必要があります。ブラウザは基本的に"UTF-8" で書かれているものだと認識しますが、@charsetが無いよりはあるほうが安全なので記述するべきということです。ちなみに日本語の文字コードには"Shift_JIS"、"EUC-JP"、"UTF-8"などがあります。 @charsetルールはCSSファイルの中でのみ記述することができ、スタイルシートの中で一番最初に記述する必要があります。

style.css

@charset "UTF-8";

文字コードに"UTF-8"を指定しています。

@import

@importは別の外部スタイルシートを呼び出すことができます。記述する場所はスタイルシートの中で@charsetを除き一番最初に記述します。@importを使えばスタイルシートを分割して作業することができますが、ファイルを一つずつ読み込んでいくため処理に時間がかかってしまうという問題から現在は非推奨とされています。

style.css

@import ("header.css");
@import ("main.css");

"style.css"の中で"header.css"と"main.css"というファイルを読み込んでいます。

@media

@mediaはメディアクエリに基づいてスタイルを適用させることができます。メディアクエリとは使用される媒体の特性を判断するもので、例えば端末の画面の大きさによって表示を変えるレスポンシブデザインを作成できます。メディアクエリは@mediaに続けてメディアタイプとメディア特性を記述します。メディアタイプではどのメディアにスタイルを適用させるかを指定し、メディア特性で適用させる条件を指定します。メディアタイプには現在次の4つが推奨されています。

メディアタイプ	適用されるデバイス
all	すべてのデバイス
print	プリンター
screen	プリンター以外のデバイス（PC、スマートフォンなど）
speech	音声合成向け

メディア特性にも種類がありますが、レスポンシブデザインによりスマートフォン対応をさせるために必要になる、width（デバイス表示領域の幅を指定する）を覚えておきましょう。

style.css

@media screen and (min-width: 600px) {
  body {
    margin-top: 10px;
  }
}

メディアタイプにscreen、メディア特性にmin-widthを指定しています。

@supports

@supportsは特定の宣言が対応されているかどうかで、スタイルを指定することができます。これは機能クエリと呼ばれ、ブラウザごとの互換性に対応するために用いられます。ブラウザの互換性についてはChapter13でさらに解説します。@supportsに続く括弧()内の宣言が対応されているかによって、ブレース{}内のスタイルを指定します。またandやnotなどの演算子を使うことで条件を結合することもできます。

style.css

@supports (display: grid) {
  .photo {
    display: grid;
    padding-left: 10px;
  }
}

display: gridが対応されている場合の.photoのスタイルを指定しています。

今回はアットルールについて代表的なものを学習しました。特にレスポンシブデザインの対応などはWebサイトの制作において必須の知識となります。次のチャプターでは今回も少し触れたブラウザの互換性について解説します。

Lesson 2 Chapter 13

ブラウザの互換性

前回はアットルールについて代表的なものを学習しました。今回はブラウザの互換性について解説します。

現在使用されているブラウザにはGoogle Chrome、Safari、IEなど複数ありますが、それぞれのブラウザでWebサイトの見え方が変わってしまうことがあります。これはブラウザ毎にCSSの解釈が違うことが主な原因です。したがってブラウザ間で互換性を持たせ同じ見え方にする必要があり、これをクロスブラウザ対応と言います。

クロスブラウザ対応させるためには、基本的に各ブラウザで表示を確認しバグに対して一つず修正していくことが必要になりますが、バグを最小限に抑えるテクニックがいくつかあるので紹介します。

リセットCSS

Chapter7でも触れましたが、各ブラウザは要素ごとにデフォルトのCSSが適用されているため、最初にリセットをすることで予期せぬバグを防ぐことができます。要素セレクタや全称セレクタ*を用いてCSSファイルの最初でリセットをするか、オープンソースで公開されているリセットCSSをHTMLファイルで出すことでリセットをかけることができます。次の例ではダウンロードした"Normalize.css"というリセットCSSを呼び出しています。この時、自分で作成したCSSファイルより先に呼び出さなければいけないことに注意しましょう。

index.html

<head>

  <link rel="stylesheet" href="Normalize.css">
  <link rel="stylesheet" href="style.css">

</head>

"Normalize.css"というリセットCSSを呼び出しています。

ベンダープレフィックス

CSSがバージョンアップされていく中でまだ仕様確定されていない新機能やベンダーが開発した独自の拡張機能が存在します。このような機能を使いたい時、ベンダープレフィックスを使うことでクロスブラウザ対応のまま実装することができます。ベンダープレフィックスとはプロパティまたは値の前に記述するベンダー接頭辞のことで、ブラウザごとに種類があります。

ベンダープレフィックス	対応ブラウザ
-webkit-	Google Chrome、Safari、iOSブラウザ
-moz-	Firefox
-os-	Internet Explorer、Microsoft Edge

style.css

div {
  -webkit-transform: translateX(50%);
  -ms-transform: tarnslate(50%);
  transform: tarnslate(50%);
}

transformというプロパティにベンダープレフィックスを指定しています。

ブラウザ仕様の変化に備えてベンダープレフィックスがない宣言も一緒に記述します。最近ではブラウザのアップデートが素早いためベンダープレフィックスが必要な場面が少ないかもしれませんが、拡張機能などを使いたい場合のために覚えておきましょう。

@supports

前回学習したアットルールの@supportsもクロスブラウザ対応に効果的です。特定の宣言が対応しているかどうかによってスタイルを指定することができ、ブラウザ毎の違いに対応することができます。

style.css

@supports (display: grid) {
  .photo {
    display: grid;
    padding-left: 10px;
  }
}

display: gridが対応されている場合の.photoのスタイルを指定しています。

クロスブラウザ対応のための便利ツール

クロスブラウザ対応に役立つツールが多く存在します。ブラウザで使用することができ無料のものも多いので、効率的な開発のためにも活用することをお勧めします。いくつか紹介します。

ツール	内容
Can I Use	あるプロパティがどのブラウザに対応しているかを確認できるWebサービスです。調べたいプロパティを入力するだけでどのブラウザのどのバージョンに対応しているかが一目でわかる仕様になっています。
Lambda Test	Google Chrome、Safari、IE、Firefox、Microsoft Edge、Operaなどの主要なブラウザをクラウド利用することでクロスブラウザテストを行えるWebサービスです。 Windows/MacのOSの切り替えも可能です。

今回はクロスブラウザ対応について学習しました。ユーザーに寄り添ったWebサイトを制作するために常に意識したい内容です。次のチャプターではいよいよ実践編として実用的なスキルを解説します。

Lesson 2 Chapter 14

実践編

このチャプターではここまでに学習した内容を踏まえてより実践的な内容について解説します。次のようなウェブページを作ってみましょう。
サンプルページ（スタイルを当てる前）
サンプルページ
 cssファイル

最初に要素セレクタを用いてフォントや余白などにリセットをかけましょう。ブラウザにデフォルトで用意されているCSSを打ち消して予期せぬバグを避ける必要があります。今回は使用するタグにのみ余白を0にリセットしています。

style.css

body {
  font-family: "Noto Sans JP", sans-serif;
  background-color: rgb(227, 241, 255, 0.55);
  color: #333;
}
p, h1, h2, div, ul, tr, th, td, button {
  margin: 0;
  padding: 0;
}

余白をつくる

要素を配置してページデザインを整えるためには余白をつくることが必要になります。CSSでは各要素に対してマージンとパディングという二つの余白を指定することができると説明しましたね。余白を指定する marginとpaddingのプロパティには値の書き方にルールがあります。値には1~4つの数値を半角スペースを開けて記述し、その数によって上下左右どこの余白を指定するかが決まります。0pxは0と省略でき、autoは親要素の幅と指定する要素の幅の差を自動で算出することができます。また上下左右の一か所だけ指定したい場合はmargin-topのように記述することで可能となります。今回のサンプルページの作成でも常に登場するので最初に理解しておきましょう。

余白の構文です。値の数によって指定場所が変化します。これはpaddingでも同様です。

では実際にサンプルページに次のスタイルを当てて余白を指定してみましょう。

index.html

<header class="header">
  <h1>SAMPLE PAGE</h1>
</header>
<div class="container"></div>

style.css

.header {
  margin: 30px 0 40px;
  text-align: center;
}
.container {
  width: 75%;
  margin: auto;
  padding: 10px 0;
  background-color: #fff;
}

samplepage_2 ヘッダー部分とコンテナ部分に余白がついて中央に揃っています。

このページではヘッダー部分と文章が入るコンテナ部分に分けているので、それぞれに余白をつけます。コンテナ部分には幅と背景色を指定しています。またヘッダー部分にtext-align: center;とありますがこれによりheaderタグ内の要素を中央揃えにすることができます。またコンテナ部分については幅を指定しmargin: auto;とすることで余白が自動で算出され、中央に揃えることができます。

テキストを装飾する

次にテキストを装飾してみましょう。テキストを装飾するプロパティにはfont-size、font-weight、colorなどがありましたね。コンテナ部分にh2タグとpタグを用意しました。次のスタイルを当ててh2タグとpタグのテキストを装飾してみます。

index.html

<header class="header">
  <h1>SAMPLE PAGE</h1>
</header>
<div class="container">
  <div class="section">
    <h2>About</h2>
    <p>
      sample sample sample sample sample sample <span class="fontbold">sample sample</span> sample sample sample sample sample sample sample sample sample <span class="fontbold">sample sample</span> sample sample sample sample sample sample..
    </p>
  </div>
</div>

style.css

h2 {
  margin: 10px 0;
  padding-left: 12px;
}
h2::first-letter {
  color: rgb(20, 150, 255);
}
h2 ~ p {
  margin: 0 20px;
}
.fontbold {
  font-weight: bold;
  text-decoration: underline;
}

samplepage_3 h2タグとpタグの一部が装飾されています。

h2タグについては::first-letter疑似要素を使うことで一文字目だけ色を変えています。またpタグの中のspanタグに対して"fontbold"というクラスをつけてスタイルを指定しています。 font-weight: bold;で太文字にし、text-decolation: underline;で下線を引いています。

ここで一般兄弟結合子を使ったh2 ~ pというセレクタに対してマージンを指定していますね。この後で同じようにh2タグとpタグを使う部分を想定しているため、このように結合子を使ってスタイルを共通にしておくと便利です。

背景・枠線を装飾する

背景については既にbackground-colorプロパティを使ってbodyタグと"container"クラスに背景色を当てていますが、画像を背景に指定することもできるので紹介します。同時に枠線も装飾します。枠線の装飾にはborderプロパティを使います。次のスタイルを当ててみましょう。

style.css

body {
  /*background-color: rgb(227, 241, 255, 0.55);*/
  back-ground-image: url(../image/whole-bg.jpg);
  color: #333;
}
.container{
  border-radius: 15px;
}
h2 {
  border-left: 4px solid rgb(20, 150, 255);
}

samplepage_4 サンプルの画像が背景になっています。またコンテナ部分とh2タグの枠線が装飾されています。

画像はbackground-image: url();で指定することができます。今回は"whole-bg.jpg"という名前の画像を指定しています。このように背景に画像や動画を指定するとインパクトの与えられるページになります。

枠線について、まず"container"クラスに対してborder-radiusプロパティを指定してコンテナ部分の角を丸くしています。要素に丸みをつける非常によく用いられるプロパティなので覚えておきましょう。またh2タグに対して左側の枠線を装飾しています。borderプロパティは枠線の太さ、種類、色をまとめて指定できます。

リストを装飾する・要素を横並びにする

次はリスト要素を装飾してみましょう。リスト要素はlist-style-typeというプロパティで先頭に付くマーカーの種類を指定できます。デフォルトはdisc（黒丸）で、他にはsquare（黒四角）や decimel（数字）、またクオーテーション'',""で囲むことで特定の文字列を付けることもできます。

またリスト要素などを横並びにする方法も紹介します。ブロック要素は縦に並ぶことが基本ですが、display: flex;を使ってフレックスボックスに指定することで横並びにすることができます。では次のスタイルを当ててリスト要素を横並びに配置してみましょう。ulタグを"section"クラスの中に追加し、リストの要素には画像とその説明文をまとめています。

index.html

<ul class="grid">
  <li class="grid-items">
    <div class="block-img">
      <img src="https://placehold.jp/250x200.png">
    </div>
    <p>sample sample sample sample sample sample sample</p>                                
  </li>
  <li class="grid-items">
    <div class="block-img">
      <img src="https://placehold.jp/250x200.png">
    </div>
    <p>sample sample sample sample sample sample sample</p>                
  </li>
  <li class="grid-items">
    <div class="block-img">
      <img src="https://placehold.jp/250x200.png">
    </div>
    <p>sample sample sample sample sample sample sample</p>                
  </li>
</ul>

style.css

.grid {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.grid-items {
  list-style-type: none;
}
.block-img {
  text-align: center;
}
.block-img + p {
  padding: 0 25px;
}

samplepage_5 リスト要素が横並びに配置されています。

リストの装飾について、今回はlist-style-type: none;とすることでデフォルトのマーカーを消しています。そして"grid"クラスに display: flex;とすることでリスト要素をフレックスボックスに指定し横並びにしています。フレックスボックスに対するプロパティは色々ありますが、今回はjustify-content: space-between; によって各要素が均等な間隔で配置されるように指定しています。このようにフレックスボックスは要素を横並びにする際に非常に便利です。

テーブルを装飾する

ユーザーを配慮したページを作るためにはテーブルを見やすくすることも重要です。CSSにはテーブルのために用意されているプロパティがあります。例えばtable-layoutプロパティはセルの幅を決めることができ、値をfixed とすることでセルの幅を固定することができます。（デフォルトはautoで要素の長さに合わせてセルの幅が自動で決まります。）今回はセルの幅をwidthプロパティで調整してみます。では次のスタイルを当ててみましょう。

index.html

<div class="section">
  <h2>Information</h2>
  <p>
    sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample..
  </p>
  <div class="table-window">
    <table>
      <tr>
        <th>Sample</th>
        <td>sample sample sample sample</td>
      </tr>
      <tr>
        <th>Sample</th>
        <td>
            sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample
        </td>
      </tr>
      <tr>
        <th>Sample</th>
        <td>sample sample sample sample sample sample sample sample</td>
      </tr>
      <tr>
        <th>Sample</th>
        <td>
          sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample
        </td>
      </tr>
      <tr>
        <th>Sample</th>
        <td>sample sample sample sample</td>
      </tr>
    </table>
  </div>
</div>

style.css

.table-window {
  width: 70%;
  height: 300px;
  margin: 20px auto 10px;
  overflow: auto;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table tr {
  border-bottom: 1.5px solid rgba(20, 150, 255, 0.3);
  height: 100px;
}
table tr:last-child {
  border-bottom: none;
}
table th {
  width: 30%;
  margin: auto;
  vertical-align: top;
  padding-top: 10px;
}
table td {
  width: 70%;
  vertical-align: top;
  padding: 10px 0;
}

samplepage_6 テーブルが見やすく装飾されています。またテーブル全体にスクロールバーがついています。

HTMLファイルでは新しいセクションを用意してh2タグとpタグを追加しました。ちなみにこのように内容のかたまりごとにセクションを分けておくと余白など管理するのに便利です。その後ろに"table-window"クラスを用意し、テーブルを作りました。

まず"table-window"クラスに幅・高さと余白を指定しています。ここでoverflow: auto;という記述があります。これはブロック要素からはみ出したテキストをどう表示させるかを決めるプロパティで、 scrollまたはautoとすることでスクロールバーをつけて表示させることができます。

次にtableタグにborder-collapseとborder-spacingというプロパティを指定しています。これらもCSSでテーブルのために用意されているプロパティです。border-collapse: collapse; とすることでセルの枠線を重ねて表示させます。border-spacingはセルの間隔を指定するもので、今回は枠線を重ねて表示させているので0としています。テーブルでは枠線も必ずと言っていいほど装飾するので覚えておきましょう。

samplepage_7 セルの下に枠線がついています。一番下のセルだけ表示が無くなっています。

では枠線を装飾してみます。trタグにborder-bottomでセルの下に青い枠線を引いています。この時点ではすべてのセルの下に枠線が入りますが、一番下のセルだけ枠線がないようにしたいので:last-child疑似クラスを使って最後の要素だけborder-bottom: none;で枠線を消しましょう。

最後にセルの幅やテキストの配置を整えます。セルの幅はwidthプロパティで指定できます。なおセルのテキストを中央寄せしたい場合はmargin: auto;とすればよいです。垂直方向の配置を変えたい場合は vertical-alignプロパティを使います。値にtopと指定すればセルの中でテキストを上端に揃えることができます。

操作イベントを扱う

CSSでアニメーションを追加することもできます。ボタンを押すなどの操作イベントやアニメーションを実装することでページに動きが出てより見やすくなります。新たにコンタクトのセクションを用意してスタイルを当ててみます。

index.html

<div class="section">
  <h2>Contact</h2>
  <p>
    sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample..
  </p>
  <form class="form" action="">
    <div class="section-input" alt="Name">
      <input type="text" class="input" id="name" placeholder="Name">
    </div>
    <div class="section-input" alt="Detail">
      <textarea class="textarea" id="detail" cols="30" rows="10" placeholder="Detail"></textarea>
    </div>
    <div class="section-button">
      <button type="submit" class="button">Submit</button>
    </div>
  </form>
<div>

style.css

input, textarea{
  font-family: inherit;
}
.section-input {
  margin: 10px 0;
  text-align: center;
}
.input, .textarea {
  width: 60%;
  border-radius: 5px;
  padding: 10px;
  border: 1px solid #ccc;
}
.input:focus, .textarea:focus {
  outline: none;
  border: solid rgb(20, 150, 255);
}
.section-button {
  text-align: center;
  margin-top: 20px;
}
.button {
  padding: 8px 25px;
  border: solid #000;
  border-radius: 5px;
  background-color: #333;
  text-decoration: none;
  font-weight: bold;
  color: #fff;
  box-shadow: 0 5px 0 #bbb;
}
.button:hover {
  transform: translateY(5px);
  box-shadow: 0 0 0 #bbb;
}

samplepage_8 フォーム欄と送信ボタンが装飾されています。

同様にh2タグとpタグを用意した後、formタグでNameとDetailのフォーム欄および送信ボタンを用意しました。まずは:focus疑似クラスを使ってフォーム欄を選択したときに青い枠線が出るようにしています。なおinputタグやtextareaタグにはデフォルトで輪郭線がついているので、それを非表示にしてからborderを指定しています。

Submitボタンには:hover疑似クラスを使ってカーソルが当たっているときにボタンが押し込まれているようにスタイルを当てています。box-shadowを使ってボタンに影をつけます。そしてカーソルが当たったら影を消し、ボタンを少し下に移動させるとこのデザインが可能です。transformプロパティはアニメーションで頻繁に使われるプロパティで、要素の移動や回転、大きさを変えたりできます。

samplepage_9 フォーム欄がフォーカスされると枠線が青いつきます。Submitボタンはカーソルが当たると押し込まれて見えます。

CSSでは扱えませんが、テキストなどの情報をデータとして扱う場合はJavescriptなどの言語により実装することができます。

アニメーションを扱う

アニメーションについてさらに解説します。先ほどボタンを動かしたtransformプロパティは単体で使うだけでなくアニメーションの機能と併用することで効果を発揮します。CSSでアニメーションを扱うためにはanimationプロパティと @keyframesを使います。では最初のAboutのセクションにアニメーションを実装してみます。

style.css

.grid-items {
  animation: Slidin 2s 1 forwards;
  opacity: 0;
}
.item01 {
  animation-delay: 0s;
}
.item02 {
  animation-delay: .25s;
}
.item03 {
  animation-delay: .5s;
}
@keyframes Slidin {
0% {
  transform: translateX(-50px);
  opacity: 0;
}
100% {
  transform: translateX(0);
  opacity: 1;
}

要素がスライドしながら表示されるようになりました。

animation-nameでアニメーション名を指定して、それに対して@keyframesで動きの変化を指定することがアニメーションの基本となります。animationプロパティではアニメーション名とその他の種類をまとめて指定できます。この例では"Slidein"というアニメーション名、変化時間が2秒、繰り返し回数が1回、変化後の状態を維持するように指定しています。@keyframesではアニメーションの時間をパーセント表示で指定できます。 translate(X)はx方向の位置を決め、opacityは不透明度を決めることができます。また各要素にanimation-delayを使って遅延をかけることで左から順番に表示されるようにしています。

レスポンシブデザインに対応させる

最後に端末の幅に合わせて表示を変えるレスポンシブデザインに対応させてみます。レスポンシブデザインに対応させるためにはviewportの指定とメディアクエリが必要です。viewportとはWebページの表示領域のことでHTMLファイルmetaタグで指定します。メディアクエリは@mediaを使って画面の幅に応じたスタイルを適用させることができます。では次のスタイルを当ててみましょう。

index.html

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<head>

style.css

.table-window {
  min-width: 300px;
}
.input, .textarea {
  min-width: 300px;
}

@media screen and (max-width: 600px) {
    
  .container {
      width: 98%;
  }
  .section {
      padding: 10px 15px;
  }
  
  h2 ~ p {
      margin: 0 10px;
  }
  .grid {
      display: block;
  }
  .grid-items {
      margin-bottom: 5px;
  }
  .block-img + p {
      padding: 0 calc((100% - 250px) / 2);
  }
}

samplepage_11 レスポンシブデザインに対応して表示が変化しています。

レスポンシブデザインでは主に要素の大きさや余白を調整する必要があります。まずテーブルとフォーム欄に対して、幅を%で指定していたので小さくなりすぎないようにmin-width: 300px;を追加しています。そして@mediaで端末の表示幅が 600px以下の時に適用されるスタイルを指定しています。特にフレックスボックスとして表示していたリスト要素をdisplay: block;とすることでブロック要素に戻しています。

端末の幅に対応する時にcalc()関数が便利になります。calc()関数はCSS単位をまたいで簡単な計算ができます。今回のサンプルページではリスト要素の画像の幅にpタグの幅を合わせたいので、パディングを調整しています。この時左右のパディングに calc((100% - 250px) / 2)と指定しているのに注目してください。これは親要素（100%）から250pxを引き2で割った値を指定しているのですが、%の相対長さとpxの絶対長さを同じ式で使っています。このようにCSS単位をまたいだ計算にcalc()関数は有効です。

デベロッパーツール

デベロッパーツールとはGoogle Chromeに標準搭載されているデバッグツールで、現在のページのHTML/CSSの状態を確認したり、ブラウザの表示幅を変化させてレスポンシブデザインの状態を確認したりすることができます。他にも通信速度の調整やコンソールでのJavascriptの実行など多くの機能があります。ブラウザで利用できる非常に便利なツールなのでぜひ使いこなせるようになりましょう。WindowsであればF12キー、MacOSではCommand+Option+Iキー、もしくは右クリック→「検証」でデベロッパーツールを開くことができます。

今回はサンプルページを作る流れに沿ってCSSの実践的なスキルを紹介しました。学習の際は実際に手を動かした方が理解が深まると思うので、是非皆さんには自分でもスタイルシートを用意してコーディングしていただきたいです。最後に今回使用したプロパティなどをまとめるので復習に活用してください。次回はCSSテンプレートについて紹介します。

プロパティなど	説明
margin, padding	上下左右の余白を指定する。
text-align	水平方向のテキスト位置を指定する。
font-weight	テキストの太さを指定する。
text-decolation	テキストの下線を装飾する。
::first-letter	最初の文字を指定する疑似要素。
background-image	`url()`により背景に画像を挿入する。
border-radius	枠線の角に丸みをつける。
list-style-type	リスト要素の接頭マーカーを装飾する。
display	`flex`を指定することで要素を横並びにする。
justify-content	`space-between`を指定することで要素の間隔を均等にする。
overflow	`auto`と指定することで要素をはみ出るテキストをスクロール表示させる。
border-collapse	`collapse`と指定することで表セルの枠線を重ねる。
border-spacing	表セルの枠線どうしの間隔を指定する。
vertical-align	垂直方向のテキスト位置を指定する。
:last-child	最後の要素を指定する疑似クラス。
:focus	アクティブな要素を指定する疑似クラス。
:hover	マウスカーソルが当たっている要素を指定する疑似クラス。
transform	要素を回転、移動、拡大縮小などをすることができる。
animation	アニメーションの一括指定プロパティ。アニメーション名、変化時間、繰り返し回数などを指定する。
@keyframes	アニメーション名に対して制御を加えるアットルール。
@media	レスポンシブデザインに対応させるアットルール。
calc()	CSS単位をまたいで計算を行える関数。

Lesson 2 Chapter 15

CSSテンプレートの紹介

このチャプターではCSSテンプレートについて紹介します。Webサイトを制作する際に一から全部手がけるのではなく、テンプレートを活用して部分的に編集して制作することもできます。テンプレートを使うことででおしゃれなレイアウトをベースにすることができ、開発工数も短くなることが期待されます。テンプレートは基本的にHTMLやCSSなどのファイルのセットをダウンロードして利用できます。現在商用利用が可能なテンプレートを提供しているサイトが様々あるのでいくつか紹介したいと思います。

HTML5 UP

まず紹介するのは海外サイトの「HTML5 UP」です。非常にスタイリッシュなデザインで豊富な種類のテンプレートがあります。すべてのテンプレートにライブデモがついているので用途に応じて選びやすいという部分も特徴です。すべて無料でダウンロードでき、クレジットを残せば商用利用できます。また有料プランでクレジット表記を消すこともできます。

デモページ：https://html5up.net/highlights

FreeHTML5.Co

次は「FreeHTML5.Co」です。こちらも海外サイトで、細部まで作りこまれていたり見栄えの良いアニメーションが多いという印象があります。BootstrapというCSSフレームワークをベースにしているためカスタマイズやメンテナンスがしやすいという特徴があります。有料プランでしか利用できないテンプレートもありますが、無料のものでもクオリティの高い素材が多いです。有料プランではクレジット表記を消すこともできます。

デモページ：https://demos.freehtml5.co/multipurpose/

W3Layouts

次も海外サイトの「W3Layouts」です。こちらのサイトはテンプレートの数が豊富で2022年12月時点で4500を超える数のテンプレートが用意されています。カテゴリも充実しているため色々なデザインを眺めているだけでもイメージが広がり面白いと思います。有料プランではより細かくデザインされたテンプレートを利用できたりクレジット表記を消すことができます。

デモページ：https://p.w3layouts.com/demos/july-2016/07-07-2016/catchy_carz/

無料ホームページテンプレート.com

最後に紹介するのは日本サイトの「無料ホームページテンプレート.com」です。シンプルで見やすいデザインが多く、日本語表記なので比較的安心して利用できます。クレジット表記を消す場合は有料のシリアルキーを購入しましょう。

デモページ：https://f-tpl.com/sample/tpl_024_rwd/index.html

無料でテンプレートを利用できるサイトをいくつか紹介しました。他にもあるので皆さんが好みのデザインをぜひ探してみてください。ただし商用利用する際にはクレジットの表記や使用方法をよく確認しましょう。最後にテンプレートのメリットデメリットをまとめるので参考にしてください。次回はテンプレートに対してWebページのパーツごとにデザインを利用できるフレームワークについて紹介します。

メリット	デメリット
初心者でも利用できるおしゃれなデザインを最初から利用できる開発工数/コストを削減できる	差別化が図りづらい自由度が低いものもある仮に不具合が起きた時に原因を見つけるのが難しい可能性がある

Lesson 2 Chapter 16

CSSフレームワークの紹介

今回はCSSフレームワークについて紹介します。CSSフレームワークとはWebページを制作するためのパーツが集められたパッケージのことで、ボタンやナビゲーション、ドロップダウンメニューなどあらかじめデザインされたものをそのまま使うことができます。またパーツだけでなくグリッド表示やレスポンシブデザインにも対応しているものが多いのでフレームワークを活用することで作業を効率よく行えます。フレームワークについて使い方などを紹介したいと思います。

まず紹介するBootstrapは世界中で高いシェアを誇るフレームワークです。豊富なアイコンやテンプレートが扱え、グリッドシステムにより横並びの段組みが効率的に作れます。またBootstrap5よりカスタムプロパティを利用できるようになったためより効率的な製作が可能となっています。使い方としてはHPから必要なライブラリをダウンロードして利用したいデザインをclass名で呼び出します。例えばボタンのデザインを使いたい場合は "btn"クラスによってスタイルを当てることができます。Bootstrap公式HPのドキュメントに掲載されている例がこちらです。

Bootstrapによるボタンのデザイン例(https://getbootstrap.jp/docs/5.0/components/buttons/)

<button type="button" class="btn btn-primary">Primary
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
                      
<button type="button" class="btn btn-link">Link</button>

このようにクラス名ごとにデザインが用意されているので簡単にスタイルを編集できます。なお用意されているすべてのクラスを覚えなければいけないわけではなく、公式HPのドキュメントを参照すれば必要なクラスを知ることができます。シェアが高く導入されている事例が多いため学習しやすいという点もBootstrapのメリットとして挙げられます。

他にも様々なフレームワークがあるので特徴をふまえていくつか紹介します。

フレームワーク	特徴
Bootstrap	高いシェアを誇るアイコン、テンプレートが豊富グリッドシステムが扱えるカスタムプロパティを使うことができるレスポンシブデザイン対応
Foundation	Bootstrapに次ぐ人気カスタマイズ性が高い「facebook」や「Yahoo!」などの企業で利用されており、大規模なプロジェクトにも対応できる
Bulma	CSSのみで構成されているため処理が速く、軽量モダンなデザインが豊富 Saasによるカスタマイズができるレスポンシブデザイン対応
Tailwind CSS	ユーティリティファーストなデザイン class名にコードを入力することができるためクラス設計が不要 HTMLファイルローカルで安全にスタイル編集できる
Pure.css	最小限のデザインしかされていないため軽量独自性が出しやすい

フレームワークを利用するためにデメリットについても説明します。まず誰でも利用できるデザインなので独自性が出しづらいという点があります。次に使いたいデザイン以外のコンポーネントも読み込んでしまうため、モノによってはページが重くなってしまうことがあります。また既存のサイトへの導入ではデザインが混在してしまうので利用する場合は最初から方針を決めるという点も注意しましょう。

メリット	デメリット
手軽に利用でき、デザインを統一できる様々なフレームワークが存在する開発工数を削減できるチームでの開発がやりやすい	差別化が図りづらい使わないコンポーネントも読み込むためページが重くなる可能性がある既存のサイトへの導入が難しい場合もある

今回のチャプターでCSS学習のLessonは終了です。学習を通して皆さんのWebサイト制作への意欲を高めることができていたら幸いです。実践編でもお伝えしましたが実際に自分で手を動かして学習することでコーディングの理解が深まり技術が定着すると個人的には思っております。このLessonでお伝えしきれなかった知識も含めて今後も学習を深めていただき、テンプレートやフレームワークを活用してぜひ思い通りのWebサイトを制作してください。

Chapter1 CSSとは
Chapter2 CSSの適用方法
Chapter3 ボックスモデル
Chapter4 外部スタイルシート
Chapter5 内部スタイルシート
Chapter6 インラインスタイル
Chapter7 セレクタ
Chapter8 セレクタの優先度
Chapter9 CSS宣言・宣言ブロック
Chapter10 プロパティと値
Chapter11 カスタムプロパティ
Chapter12 アットルール
Chapter13 ブラウザの互換性
Chapter14 実践編
Chapter15 CSSテンプレートの紹介
Chapter16 CSSフレームワークの紹介

CSS

目次

Lesson 2 Chapter 1 CSS とは

Lesson 2 Chapter 2 CSSの適用方法

linkタグで外部CSSファイルを呼び出す方法

index.html

style.css

styleタグでHTMLファイル内に直接記述する方法

index.html

Lesson 2 Chapter 3 ボックスモデル

content（コンテンツ）

padding（パディング）

border（ボーダー）

margin（マージン）

ボックスの種類

ブロックボックス

インラインボックス

Lesson 2 Chapter 4 外部スタイルシート

index.html

style.css

Lesson 2 Chapter 5 内部スタイルシート

index.html

Lesson 2 Chapter 6 インラインスタイル

index.html

スタイルシートの優先度

Lesson 2 Chapter 7 セレクタ

index.html

要素セレクタ

style.css

全称セレクタ

style.css

クラスセレクタ

style.css

IDセレクタ

style.css

属性セレクタ

style.css

疑似クラスセレクタ

style.css

疑似要素セレクタ

style.css

子孫結合子

style.css

子結合子

style.css

隣接兄弟結合子

style.css

一般兄弟結合子

style.css

Lesson 2 Chapter 8 セレクタの優先度

index.html

style.css

Lesson 2 Chapter 9 CSS宣言・宣言ブロック

style.css

Lesson 2 Chapter 10 プロパティと値

Lesson 2 Chapter 11 カスタムプロパティ

ボタンの背景色を管理する

index.html

style.css

SVGを使う

index.html

style.css

Lesson 2 Chapter 12 アットルール

@charset

style.css

@import

style.css

@media

style.css

@supports

style.css

Lesson 2 Chapter 13 ブラウザの互換性

リセットCSS

index.html

ベンダープレフィックス

style.css

@supports

style.css

Lesson 2 Chapter 14 実践編

style.css

Lesson 2 Chapter 1

CSS とは

Lesson 2 Chapter 2

CSSの適用方法

Lesson 2 Chapter 3

ボックスモデル

Lesson 2 Chapter 4

外部スタイルシート

Lesson 2 Chapter 5

内部スタイルシート

Lesson 2 Chapter 6

インラインスタイル

Lesson 2 Chapter 7

セレクタ

Lesson 2 Chapter 8

セレクタの優先度

Lesson 2 Chapter 9

CSS宣言・宣言ブロック

Lesson 2 Chapter 10

プロパティと値

Lesson 2 Chapter 11

カスタムプロパティ

Lesson 2 Chapter 12

アットルール

Lesson 2 Chapter 13

ブラウザの互換性

Lesson 2 Chapter 14

実践編

Lesson 2 Chapter 15

CSSテンプレートの紹介

Lesson 2 Chapter 16

CSSフレームワークの紹介