補講4.主要なCSSのセレクタとプロパティ

第1章: CSSセレクタの概要

1.1 セレクタとは

CSSセレクタは、HTML要素を選択してスタイルを適用するためのパターンです。セレクタを使うことで、特定の要素やグループにスタイルを設定できます。

1.2 セレクタの基本構文

CSSセレクタの基本構文は次のようになります。

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

例:

p {
  color: blue;
}

第2章: 基本的なセレクタ

2.1 タグセレクタ

タグ名を使ってHTML要素を選択します。例のリンク

p {
  color: red;
}

上記の例では、すべての<p>要素のテキストを赤色にします。

2.2 クラスセレクタ

クラス名を使って要素を選択します。クラス名の前にドット（.）を付けます。例のリンク

.example {
  font-size: 20px;
}

HTML:

<p class="example">これはクラスセレクタの例です。</p>

2.3 IDセレクタ

IDを使って要素を選択します。IDの前にハッシュ（#）を付けます。例のリンク

#unique {
  background-color: yellow;
}

HTML:

<p id="unique">これはIDセレクタの例です。</p>

上記の例では、IDuniqueを持つ要素の背景色を黄色にします。

第3章: 結合セレクタ

3.1 子セレクタ

ある要素の直接の子要素を選択します。>を使います。例のリンク

div > p {
  color: green;
}

HTML:

<div>
  <p>この段落は緑色になります。</p>
  <span><p>この段落はスタイルが適用されません。</p></span>
</div>

上記の例では、<div>の直接の子である<p>要素のテキストを緑色にします。

3.2 子孫セレクタ

ある要素の全ての子孫要素を選択します。スペースを使います。例のリンク

div p {
  color: blue;
}

HTML:

<div>
  <p>この段落は青色になります。</p>
  <span><p>この段落も青色になります。</p></span>
</div>

上記の例では、<div>内のすべての<p>要素のテキストを青色にします。

3.3 隣接兄弟セレクタ

ある要素の直後にある兄弟要素を選択します。+を使います。例のリンク

h1 + p {
  font-weight: bold;
}

HTML:

<h1>見出し</h1>
<p>この段落は太字になります。</p>
<p>この段落はスタイルが適用されません。</p>

上記の例では、<h1>の直後にある<p>要素のフォントを太字にします。

第4章: 擬似クラスと擬似要素

4.1 擬似クラス

疑似クラス（Pseudo-class）とは、実際のクラスとは異なり、特定の状態や動作に対してスタイルを適用するために使用されます。擬似クラスはコロン（:）を一つ使用します。

例として、リンクのホバー状態に対してスタイルを適用します。

a:hover {
  color: red;
}

上記の例では、リンクにマウスを重ねたときにテキストの色が赤色に変わります。

疑似クラスのnth-child

n-th child は CSS セレクターの一つで、親要素の中で特定の位置にある子要素を選択するために使用されます。このセレクターは、nth-child として表現され、括弧の中に位置を指定するパラメータを持ちます。

基本的な使い方と例を見ていきましょう。

基本構文

element:nth-child(n)

element はターゲットとする要素のタイプです（例えば div、p など）。
n は対象となる子要素の位置を指定する数値、キーワード、または式です。

パラメータの種類

数値: 固定の位置を指定します。 p:nth-child(3) これは、親要素の3番目の子要素である p 要素を選択します。
キーワード: odd や even を使用して、奇数番目や偶数番目の子要素を選択します。 p:nth-child(odd) これは、親要素の奇数番目のすべての p 要素を選択します。

例

次のHTML構造を例に取ります。

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

3番目の li 要素を選択する場合: li:nth-child(3) { color: red; } 結果: "Item 3" が赤色になります。
偶数番目の li 要素を選択する場合: li:nth-child(even) { background-color: lightgray; } 結果: "Item 2" と "Item 4" の背景が灰色になります。

注意点

nth-child セレクターは、親要素内の全ての子要素を対象に位置を考慮します。同じタイプの子要素だけをカウントするわけではありません。
例えば、li:nth-child(3) は親要素の3番目の子要素が li である場合にのみスタイルを適用します。

4.2 擬似要素

要素の特定の部分に対してスタイルを適用します。擬似要素はダブルコロン（::）を使用します。

例として、要素の前にコンテンツを追加します。

p::before {
  content: "注: ";
  font-weight: bold;
}

記の例では、すべての<p>要素の前に「注: 」というテキストが太字で追加されます。

第5章: 属性セレクタ

5.1 基本属性セレクタ

特定の属性を持つ要素を選択します。

input[type="text"] {
  border: 1px solid black;
}

HTML:

<input type="text" />
<input type="password" />

上記の例では、type属性がtextの<input>要素に黒色の境界線を適用します。

5.2 部分一致属性セレクタ

属性の値が特定の部分と一致する要素を選択します。

a[href*="example"] {
  color: green;
}

HTML:

<a href="https://www.example.com">リンク</a>
<a href="https://www.test.com">他のリンク</a>

上記の例では、href属性にexampleが含まれるすべての<a>要素のテキストを緑色にします。

第6章: テキストプロパティ

6.1 `color`

テキストの色を指定します。色は名前、16進数、rgb、rgbaなどで指定できます。

p {
  color: blue; /* 色名 */
  color: #0000ff; /* 16進数 */
  color: rgb(0, 0, 255); /* RGB値 */
  color: rgba(0, 0, 255, 0.5); /* RGBA値（透明度） */
}

上記の例では、すべての<p>要素のテキストが青色になります。

6.2 `font-family`

フォントファミリを指定します。複数のフォントを指定することで、フォールバックを設定できます。

p {
  font-family: Arial, sans-serif; /* Arialが利用できない場合、sans-serifが使用される */
}

上記の例では、<body>内のテキストがArialフォントで表示されます。

6.3 `font-size`

フォントサイズを指定します。単位にはpx、em、rem、%などがあります。（第13章参照）

p {
  font-size: 16px; /* ピクセル */
  font-size: 1em; /* 親要素のフォントサイズに対する相対値 */
  font-size: 100%; /* 親要素のフォントサイズに対する百分率 */
}

上記の例では、すべての<p>要素のフォントサイズが親要素のフォントサイズと同じになります。

6.4 `font-weight`

フォントの太さを指定します。値はnormal、bold、bolder、lighter、数値（100～900）があります。

p {
  font-weight: bold; /* 太字 */
  font-weight: 700; /* 数値での指定 */
}

上記の例では、すべての<p>要素のテキストが太字になります。

6.5 `font-style`

テキストのスタイルを指定します。値はnormal、italic、obliqueがあります。

em {
    font-style: italic;
}

上記の例では、すべての<em>要素のテキストが斜体になります。

6.6 `text-align`

テキストの水平配置を指定します。値はleft、right、center、justifyがあります。

h1 {
    text-align: center;
}

上記の例では、すべての<h1>要素のテキストが中央揃えになります。

6.7 `text-decoration`

テキストの装飾を指定します。値はnone、underline、overline、line-throughがあります。

a {
    text-decoration: none;
}

上記の例では、すべてのリンクの下線が消えます。

6.8 `line-height`

テキストの行の高さを指定します。単位にはpx、em、%、数値（倍数）があります。

p {
    line-height: 1.5;
}

上記の例では、すべての<p>要素の行間が1.5倍になります。

6.9 `letter-spacing`

文字間のスペースを指定します。

h1 {
    letter-spacing: 2px;
}

上記の例では、すべての<h1>要素の文字間が2px広がります。

6.10 `text-transform`

テキストの変換（uppercase, lowercase, capitalize）を指定します。

p {
    text-transform: uppercase;
}

6.11 `text-shadow`

テキストの影を指定します。

h1 {
    text-shadow: 2px 2px 4px #000000;
}

上記の例では、すべての<h1>要素のテキストに影がつきます。

それぞれのパラメータの意味は以下の通りです。

box-shadow: [①水平オフセット] [②垂直オフセット] [③ぼかしの半径] [④拡散の半径] [⑤色];

水平オフセット: 影を水平方向にどれだけずらすかを指定します。正の値は右方向、負の値は左方向に影を移動させます。
垂直オフセット: 影を垂直方向にどれだけずらすかを指定します。正の値は下方向、負の値は上方向に影を移動させます。
ぼかしの半径: 影のぼかし具合を指定します。値が大きいほど影がぼやけます。省略するとぼかしはなしになります。
拡散の半径: 影の広がり具合を指定します。正の値は影を広げ、負の値は影を縮めます。省略可能です。
色: 影の色を指定します。色は#で始まる16進数表記、rgb()、rgba()、色名などで指定できます。

第7章: ボックスモデルプロパティ

7.1 `width`と`height`

要素の幅と高さを指定します。単位にはpx、%、em、remなどがあります。

div {
    width: 200px;
    height: 100px;
}

上記の例では、すべての<div>要素の幅が200px、高さが100pxになります。

7.2 `margin`

外側の余白を指定します。単位にはpx、%、emなどがあります。個別の辺に対しても設定できます。

div {
    margin: 20px;
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 10px;
    margin-left: 5px;
}

上記の例では、<div>要素に全体的な余白と各辺の余白が設定されています。

7.3 `padding`

内側の余白を指定します。個別の辺に対しても設定できます。

上記の例では、<div>要素に全体的な内側の余白と各辺の内側の余白が設定されています。

7.4 `border`

境界線を指定します。個別の辺に対しても設定できます。

div {
    border: 1px solid black;
    border-top: 2px dashed red;
}

上記の例では、<div>要素に全体的な境界線と上辺の特定の境界線が設定されています。

7.5 `border-radius`

角の丸みを指定します。

div {
    border-radius: 10px;
}

上記の例では、<div>要素の角が10pxの半径で丸くなります。

7.6 `box-shadow`

ボックスの影を指定します。

div {
    box-shadow: 5px 5px 10px #888888;
}

上記の例では、<div>要素に影がつきます。

`box-sizing`プロパティ

CSSのbox-sizingプロパティは、要素の幅と高さの計算方法を指定します。box-sizingには2つの主要な値があります:

content-box（デフォルト）
- 幅と高さはコンテンツエリアのみを対象とし、パディングやボーダーは含みません。
- 例えば、幅が100pxでパディングが10px、ボーダーが5pxの場合、要素の全体の幅は100px + 10px + 10px（左右のパディング）+ 5px + 5px（左右のボーダー） = 130pxとなります。
border-box
- 幅と高さはコンテンツエリア、パディング、およびボーダーを含みます。
- 例えば、幅が100pxでパディングが10px、ボーダーが5pxの場合、要素の全体の幅は100pxに収まり、コンテンツエリアの幅は100px - 10px - 10px - 5px - 5px = 70pxとなります。

`box-sizing: border-box`の効果

box-sizing: border-boxを使用すると、要素の全体のサイズが設定した幅と高さに収まるため、レイアウトをより簡単に管理できます。特にレスポンシブデザインや複雑なレイアウトを作成する際に便利です。

CSSの継承とは

CSSの継承とは、ある要素に適用されたスタイルが、その子要素にも自動的に適用されることを指します。重複するスタイルの記述を減らし、コードの可読性と保守性を向上させることができます。

継承されるプロパティ

文字列に関連したプロパティは継承されることが多いです。。例えば、以下のプロパティは継承されます。

color
font-family
font-size
font-style
font-weight
line-height
text-align
visibility

継承されないプロパティ

例えば、margin、padding、borderなどのボックスモデルに関するプロパティは継承されません。

第8章: 背景プロパティ

8.1 `background-color`

要素の背景色を指定します。

div {
    background-color: lightblue;
}

上記の例では、すべての<div>要素の背景色がライトブルーになります。

8.2 `background-image`

要素の背景画像を指定します。

div {
    background-image: url('image.jpg');
}

上記の例では、すべての<div>要素の背景にimage.jpgが表示されます。

8.3 `background-repeat`

背景画像の繰り返し方法を指定します。値はrepeat、no-repeat、repeat-x、repeat-yがあります。

div {
    background-repeat: no-repeat;
}

上記の例では、背景画像が繰り返されずに1回だけ表示されます。

8.4 `background-position`

背景画像の表示位置を指定します。

div {
    background-position: center;
}

上記の例では、背景画像が要素の中央に表示されます。

8.5 `background-size`

背景画像のサイズを指定します。値はcover、contain、具体的な数値などがあります。

div {
  background-size: cover; /* 背景画像を要素のサイズに合わせてカバー */
}

上記の例では、背景画像が要素全体を覆うようにリサイズされます。

8.6 `background-attachment`

背景画像の固定方法を指定します。値はscroll、fixed、localがあります。

div {
    background-attachment: fixed;
}

上記の例では、背景画像がスクロールしても固定されます。

第9章: フレックスボックスプロパティ

Flexbox（フレックスボックス）は、要素の配置や並び方を柔軟に制御するためのレイアウトモデルです。Flexboxを使用すると、複雑なレイアウトを簡単に作成できます。

Flexboxレイアウトは、親要素（Flexコンテナ）とその子要素（Flexアイテム）で構成されます。

Flexコンテナ: display: flex; または display: inline-flex; を適用した要素。
Flexアイテム: Flexコンテナ内の直下の子要素。

フレックスボックスは、主にコンポーネントの配置や整列に使用します。次のグリッドシステムは主にページ全体のレイアウトに使用します。

9.1 `display: flex`

要素をフレックスコンテナにします。

.container {
    display: flex;
}

上記の例では、.containerクラスがフレックスコンテナになります。

9.2 `flex-direction`

フレックスアイテムの配置方向を指定します。値はrow（デフォルト）、columnなどがあります。

.container {
    flex-direction: row;
}

上記の例では、フレックスアイテムが横方向に配置されます。

9.3 `flex-wrap`

Flexアイテムがコンテナ内に収まりきらない場合の折り返し方法を指定します。値はnowrap、wrap、wrap-reverseがあります。

.container {
  flex-wrap: wrap; /* 折り返しを有効にする */
}

上記の例では、フレックスアイテムが折り返されます。

9.4 `justify-content`

フレックスアイテムの水平方向に沿った整列方法を指定します。値はflex-start、flex-end、center、space-between、space-aroundがあります。

flex-start(左寄せ)、flex-end(右寄せ)、center（中央揃え）、space-between（両端揃え）、space-around（両端にスペースのある両端揃え）という意味です。

.container {
    justify-content: center;
}

上記の例では、フレックスアイテムが中央に配置されます。

9.5 `align-items`

縦軸（垂直方向）に沿った整列方法を指定します。値はflex-start、flex-end、center、baseline、stretch（デフォルト）があります。

.container {
    align-items: center;
}

上記の例では、フレックスアイテムが上下中央に整列されます。

9.6 `align-content`

複数行のFlexアイテムを縦軸に沿って配置します（flex-wrapが有効な場合に適用されます）。
- stretch（デフォルト）、flex-start(左寄せ)、flex-end(右寄せ)、center（中央揃え）、space-between（両端揃え）、space-around（両端にスペースのある両端揃え）

.container {
    align-content: space-between;
}

上記の例では、複数行のフレックスアイテムが交差軸のスペースに均等に配置されます。

9.7 Flexアイテムに適用するプロパティ

flex-grow:
- Flexアイテムの成長割合を指定します。デフォルトは 0。1以上の数値を指定することで、残りのスペースを埋めるように成長します。

.item { flex-grow: 1; }

flex-shrink:
- Flexアイテムの縮小割合を指定します。デフォルトは 1。0を指定すると、縮小されなくなります。

.item { flex-shrink: 0; }

flex-basis:
- Flexアイテムの基本サイズを指定します。デフォルトは auto。具体的なサイズ（px, %, emなど）を指定できます。

.item { flex-basis: 100px; }

flex:
- flex-grow、flex-shrink、flex-basisを一括で指定します。flex: 1; は flex-grow: 1; flex-shrink: 1; flex-basis: 0; のショートハンドです。

.item { flex: 1; }

align-self:
- 個々のFlexアイテムの配置を指定します。デフォルトは auto（親要素のalign-itemsを継承）。flex-start、flex-end、center、baseline、stretchを指定可能。

.item { align-self: center; }

フレックスアイテムを使ってレスポンシブ対応

例えば、以下のようなCSSのクラス指定でレスポンシブ対応にできます。

親要素 .container は display: flex; と flex-wrap: wrap; によってフレックスコンテナとして設定され、子要素が複数行に折り返される。

子要素 .item は flex: 1 1 200px; によってフレックスアイテムとして設定され、成長率、縮小率、基準サイズを指定。

メディアクエリ は、画面幅が600ピクセル以下の場合に .item のフレックス基準サイズを100%に変更し、各アイテムが親要素の幅全体を占める。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Flexbox Example</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .item {
            flex: 1 1 200px;
            margin: 10px;
            background-color: #f0f0f0;
            padding: 20px;
            text-align: center;
        }
        @media (max-width: 600px) {
            .item {
                flex: 1 1 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
</body>
</html>

flex: 1 1 200px; は、Flexboxの設定を指定するためのショートハンドプロパティです。

それぞれ、要素のフレックス成長率、フレックス縮小率、およびフレックス基準サイズを指定しています。

`flex: 1 1 200px;` の意味

1 (flex-grow)
- この値は要素の拡大率を指定します。要素が親要素の余分なスペースを占有できる割合を示します。1の場合、他のフレックスアイテムと同じ割合で拡大されます。
1 (flex-shrink)
- この値は要素のフレックス縮小率を指定します。要素が親要素のスペース不足の場合に縮小される割合を示します。1の場合、他のフレックスアイテムと同じ割合で縮小されます。
200px (flex-basis)
- この値は要素が配置される前の基準サイズを示します。この場合、要素の初期サイズは200ピクセルになります。

メディアクエリの設定

@media (max-width: 600px) {
    .item {
        flex: 1 1 100%;
    }
}

画面の幅が600ピクセル以下の場合、.item のフレックス基準サイズが100%になります。つまり、各アイテムが親要素の幅全体を占めるようになります。

第10章: グリッドプロパティ

グリッド【grid】とは格子状という意味です。

将棋盤のマス目のように行と列で柔軟にレイアウトができるのがグリッドレイアウトです。先に見たフレックスボックスは、主にコンポーネントの配置や整列に使用するのに対して、グリッドは主にページ全体のレイアウトに使用します。

基本概念

GridコンテナとGridアイテム

Gridレイアウトは、親要素（Gridコンテナ）とその子要素（Gridアイテム）で構成されます。

Gridコンテナ: display: grid; または display: inline-grid; を適用した要素。
Gridアイテム: Gridコンテナ内の直下の子要素。

基本的な使い方

以下のHTMLとCSSの例で、Gridの基本的な使い方を示します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Layout Example</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            padding: 10px;
        }
        .item {
            background-color: #f0f0f0;
            padding: 20px;
            border: 1px solid #000;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>

Gridコンテナに適用するプロパティ

display:
- display: grid; または display: inline-grid; を指定すると、その要素がGridコンテナになります。
grid-template-columns:
- 列の定義を行います。例: grid-template-columns: 100px 200px 100px; は固定幅の列を定義します。repeat関数を使うことで簡潔に記述できます。例: grid-template-columns: repeat(3, 1fr);

.container { grid-template-columns: repeat(3, 1fr); /* 3列を均等に分割 */ }

grid-template-rows:
- 行の定義を行います。例: grid-template-rows: 100px 200px 100px; は固定高さの行を定義します。

.container { grid-template-rows: 100px 200px 100px; }

gap:
- グリッドアイテム間の隙間を指定します。列間、行間の隙間を個別に指定することもできます。例: gap: 10px;, row-gap: 10px;, column-gap: 20px;

.container { gap: 10px; /* 列間と行間の隙間を10pxに設定 */ }

grid-auto-rows:
- 明示的に定義されていない行の高さを指定します。

.container { grid-auto-rows: 100px; }

grid-auto-columns:
- 明示的に定義されていない列の幅を指定します。

.container { grid-auto-columns: 100px; }

justify-items:
- 各アイテムを横方向に配置します。start, end, center, stretch（デフォルト）

.container { justify-items: center; }

align-items:
- 各アイテムを縦方向に配置します。start, end, center, stretch（デフォルト）

.container { align-items: center; }

justify-content:
- グリッド全体を横方向に配置します。start, end, center, space-between, space-around, space-evenly

.container { justify-content: center; }

align-content:
- グリッド全体を縦方向に配置します。start, end, center, space-between, space-around, space-evenly

.container { align-content: center; }

Gridアイテムに適用するプロパティ

grid-column:
- アイテムの開始位置と終了位置を指定します。例: grid-column: 1 / 3; は1列目から3列目までを占めます。

.item1 { grid-column: 1 / 3; }

grid-row:
- アイテムの開始位置と終了位置を指定します。例: grid-row: 1 / 3; は1行目から3行目までを占めます。

.item1 { grid-row: 1 / 3; }

justify-self:
- アイテムを横方向に配置します。start, end, center, stretch

.item { justify-self: center; }

align-self:
- アイテムを縦方向に配置します。start, end, center, stretch

.item { align-self: center; }

Gridを使ってレスポンシブ対応

Gridを使ってレスポンシブなレイアウトを作成する例を示します。

以下の例では、.containerにdisplay: grid;を設定し、grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));で列の幅を動的に設定しています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Grid Layout Example</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 10px;
            padding: 10px;
        }
        .item {
            background-color: #f0f0f0;
            padding: 20px;
            border: 1px solid #000;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>
</body>
</html>

第11章: ポジショニングプロパティ

11.1 `position`

要素の位置を指定します。

.absolute-box {
    position: absolute; /* 他のオプション: static, relative, fixed, sticky */
    top: 20px;
    right: 20px;
}

static

staticはpositionプロパティのデフォルト値です。

要素は通常の文書フロー（上から下）に従って配置され、top、right、bottom、leftプロパティの影響を受けません。

使用例：多くのHTML要素はデフォルトでこの設定を使用しています。特に位置を変更する必要がない場合に適しています。

fixed

要素はビューポート（ブラウザウィンドウ）に対して固定され、スクロールしてもその位置に留まります。

文書フローからは除外され、他の要素と重なることがあります。

使用例: ナビゲーションバー、フィードバックボタン、ヘルプデスクアイコンなど、ページ上で常に見えている必要のある部品に使用します。

sticky

要素は通常の文書フローに従いますが、スクロールに応じてその位置がfixedのようになります。

つまり、特定のスクロール位置に到達すると、要素がビューポート内で固定されるように見えます。

使用例: ヘッダー、サイドバー、広告など、ある程度スクロールした後に画面上で固定表示させたい要素に使用します。top、bottomなどのプロパティとともに指定する必要があります。

relative

relativeを指定すると、要素は通常の文書フローに基づいて配置されますが、top、right、bottom、leftプロパティを使用して、その通常位置から相対的に移動させることができます。

元の空間（スペース）は保持されます。つまり、要素が移動しても、元の位置を占める空間は空白として残ります。

.relative-example {
  position: relative;
  top: 20px;   /* 通常位置から下に20ピクセル移動 */
  left: 50px;  /* 通常位置から右に50ピクセル移動 */
}

absolute

absoluteを指定すると、要素は文書フローから完全に切り離され、最も近い位置指定された祖先要素（relative、absolute、fixed、またはstickyが設定された要素）に対して絶対位置を指定することができます。

もしそのような祖先がない場合は、ビューポート（ブラウザウィンドウ）に対して位置が設定されます。

absoluteによって配置された要素は、ページ上の任意の位置に「浮かせる」ことができ、他の要素の配置に影響を与えません。この性質を利用して、ページ内で他の要素と重なるようなUIの部品（例えば、ポップアップ、ドロップダウンメニューなど）を作成することが可能です。

.absolute-example {
  position: absolute;
  top: 30px;   /* 祖先要素の上端から30ピクセルの位置 */
  right: 10px; /* 祖先要素の右端から10ピクセルの位置 */
}

relative と absolute の組み合わせ

relativeとabsoluteを組み合わせて使用することもあります。

通常、外側の要素（コンテナ）にrelativeを設定し、内側の要素にabsoluteを設定します。

これにより、内側の要素は外側の要素に対して絶対位置を指定できるようになります。

以下の例では、.containerがrelativeであり、.innerはその内部で絶対位置指定されています。内部要素がコンテナの中央に正確に配置されます。

モーダルウィンドウや通知ポップアップなどを画面の中央に表示する場合に非常に便利です。

.container {
  position: relative; /* コンテナは相対位置 */
  width: 200px;
  height: 200px;
}

.inner {
  position: absolute; /* 内部要素は絶対位置 */
  top: 50%;  /* コンテナの中央に配置（Y軸） */
  left: 50%; /* コンテナの中央に配置（X軸） */
  transform: translate(-50%, -50%); /* 中央からのずれを補正 */
}

11.2 `top`, `right`, `bottom`, `left`

positionプロパティで指定した位置に基づいて、要素の位置を調整します。

.element {
  position: absolute;
  top: 10px; /* 上から10pxの位置 */
  right: 20px; /* 右から20pxの位置 */
}

例題　position: relative と position: absolute の基本的な使い方を理解する

親要素を作成し、その中に子要素を配置します。
子要素を親要素の右下隅に配置します。
その際、親要素と子要素にはどのようなpositionプロパティを設定すればいいでしょうか？

解答例

例題　スクロールしても画面に固定される要素を作成する

固定ヘッダーを作成し、ページをスクロールしても常に画面の上部に表示されるようにします。
ヘッダーの下に大量のコンテンツを追加し、スクロールを確認します。

解答例

例題　上下中央揃えレイアウトを作成する

親要素を作成し、その中に1つの子要素を配置します。
子要素は親要素の上下中央に配置します。

解答例

11.3 `z-index`

要素の重なり順序を指定します。数値が大きいほど前面に表示されます。

.element {
  position: relative;
  z-index: 10; /* 他の要素より前面に表示 */
}

例題　z-indexプロパティを使って要素の重なり順を制御する

3つの重なり合うボックスを作成します。
中央のボックスを最前面に表示します。

解答例

第12章: ディスプレイプロパティ

12.1 display: block;

説明: blockプロパティを持つ要素は、常に新しい行に表示され、幅が可能な限り広がります（親要素の幅に従う）。
用途: セクション、段落、ヘッダーなど、コンテンツ全体を区切るために使用される要素。

12.2 display: inline;

説明: inlineプロパティを持つ要素は、新しい行を作らずに他の要素と同じ行に表示されます。幅は内容に合わせて決まります。
用途: 強調、リンク、アイコンなど、テキストの一部として扱う要素。

12.3 display: inline-block;

説明: inline-blockプロパティを持つ要素は、inline要素のように同じ行に表示されますが、block要素のように幅と高さを設定できます。
用途: メニュー項目、ボタン、ラベルなど、レイアウトに柔軟性を持たせたい場合に使用。

12.4 display: flex;

説明: flexプロパティを持つ要素は、柔軟なレイアウトを提供するフレックスコンテナになります。子要素（フレックスアイテム）はフレックスボックスモデルに基づいて配置されます。
用途: レスポンシブデザイン、ナビゲーションバー、カードレイアウトなど、複雑なレイアウトを簡単に管理するために使用。

12.5 display: grid;

説明: gridプロパティを持つ要素は、グリッドコンテナになります。子要素（グリッドアイテム）はグリッドレイアウトモデルに基づいて配置されます。
用途: ダッシュボード、写真ギャラリー、複雑なウェブページレイアウトなど、2次元のレイアウトを簡単に管理するために使用。

12.6 display: none;

説明: noneプロパティを持つ要素は、ページ上に表示されず、他の要素に影響を与えません。
用途: 要素を一時的に非表示にする場合（例えば、JavaScriptでの表示/非表示の切り替え）、コンテンツの管理やフィルタリングなどに使用。

第13章: その他のプロパティ

13.1 `opacity`

要素の透明度を指定します。0（完全に透明）から1（完全に不透明）の値を取ります。

.element {
  opacity: 0.5; /* 50%の透明度 */
}

13.2 `visibility`

要素の表示/非表示を指定します。値はvisible、hidden、collapseがあります。

.element {
  visibility: hidden; /* 要素を非表示にするが、レイアウトは保持 */
}

13.3 `overflow`

要素のコンテンツがはみ出した場合の表示方法を指定します。値はvisible、hidden、scroll、autoがあります。

.container {
  overflow: scroll; /* コンテンツがはみ出した場合にスクロールバーを表示 */
}

13.4 `cursor`

要素の上にマウスカーソルを置いたときのカーソルの形状を指定します。

.element {
  cursor: pointer; /* 手の形のカーソルを表示 */
}

13.5 `transition`

要素のプロパティが変更されたときのトランジション効果を指定します。

.element {
  transition: background-color 0.5s ease;
}

.element:hover {
  background-color: lightblue;
}

13.6 `transform`

要素の変形を指定します。値はrotate、scale、translate、skewなどがあります。

.element {
  transform: rotate(45deg); /* 45度回転 */
}

13.7 `animation`

アニメーション効果を指定します。@keyframesを使用してアニメーションのステップを定義します。

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

.element {
  animation: example 5s infinite;
}

`@keyframes`の詳細

CSSの@keyframesは、アニメーションの中間状態を定義するために使用されます。アニメーションは、要素のスタイルを徐々に変化させることで、動きを表現するものです。@keyframesを使うと、アニメーションの開始から終了までの間に、どのようなスタイルの変化が起こるかを指定できます。

基本構文

@keyframes animationName {
from {
/* 初期状態のスタイル */
}
to {
/* 終了状態のスタイル */
}
}

または、0%から100%までの途中の状態も指定できます。

@keyframes animationName {
0% {
/* 初期状態のスタイル */
}
50% {
/* 中間状態のスタイル */
}
100% {
/* 終了状態のスタイル */
}
}

アニメーションの使用方法

アニメーションを適用するには、要素にanimationプロパティを使用します。

.selector {
  animation: animationName 2s infinite;
}

具体例

以下は、要素の色と位置を変化させるアニメーションの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Keyframes アニメーション</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      animation: moveAndChangeColor 5s infinite;
    }

    @keyframes moveAndChangeColor {
      0% {
        background-color: red;
        left: 0;
      }
      50% {
        background-color: blue;
        left: 200px;
      }
      100% {
        background-color: green;
        left: 0;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

`animation`プロパティの詳細

animation-name: 使用する@keyframesの名前を指定します。
animation-duration: アニメーションの継続時間を指定します（例: 2s）。
animation-timing-function: アニメーションの進行速度を指定します（例: linear, ease）。
animation-delay: アニメーションが開始するまでの遅延時間を指定します（例: 1s）。
animation-iteration-count: アニメーションを繰り返す回数を指定します（例: infinite, 3）。
animation-direction: アニメーションの再生方向を指定します（例: normal, reverse, alternate）。
animation-fill-mode: アニメーションの開始前および終了後のスタイルを指定します（例: none, forwards, backwards, both）。
animation-play-state: アニメーションの再生状態を指定します（例: running, paused）。

第14章: メディアクエリ

14.1 メディアクエリの概要

メディアクエリを使用すると、デバイスの特性（画面サイズ、解像度など）に応じてスタイルを適用できます。

14.2 メディアクエリの基本構文

メディアクエリの基本構文は次の通りです。

@media (max-width: 600px) {
  .container {
    background-color: lightgreen;
  }
}

14.3 メディアタイプ

メディアクエリには、適用するメディアタイプを指定できます。例として、screen、printなどがあります。

@media print {
  body {
    font-size: 12pt;
  }
}

第15章: CSSでよく使われる単位

絶対単位

絶対単位は固定されたサイズを持ち、画面の解像度に依存しません。

px (ピクセル): 1ピクセル。

相対単位

相対単位は、他の要素や環境に依存してサイズが変わります。

em: 現在のフォントサイズに対する倍率。例えば、2emは現在のフォントサイズの2倍。
rem (ルートem): ルート要素（通常はhtml）のフォントサイズに対する倍率。
% (パーセント): 親要素に対する割合。例えば、50%は親要素のサイズの50%。
vw (ビューポート幅): ビューポート（表示領域）の幅に対する割合。1vwはビューポートの幅の1%。
vh (ビューポート高さ): ビューポートの高さに対する割合。1vhはビューポートの高さの1%。

/* 絶対単位の例 */
div {
  width: 300px;
  height: 2in;
}

/* 相対単位の例 */
p {
  font-size: 1.5em; /* 親要素のフォントサイズの1.5倍 */
  margin: 10%; /* 親要素の幅の10% */
}

.container {
  width: 80vw; /* ビューポートの幅の80% */
  height: 50vh; /* ビューポートの高さの50% */
}

第16章: レスポンシブデザインとは？

16.1 レスポンシブデザインの定義

レスポンシブデザインとは、ウェブサイトがデバイスの画面サイズに応じて柔軟にレイアウトを変更する手法です。スマートフォン、タブレット、デスクトップなど、さまざまなデバイスで快適に閲覧できるように設計します。

16.2 レスポンシブデザインの重要性

現代のユーザーは、様々なデバイスからウェブサイトにアクセスします。レスポンシブデザインを採用することで、すべてのユーザーに一貫したエクスペリエンスを提供でき、SEOの向上にも寄与します。

16.3 メディアクエリ

メディアクエリは、CSSの機能の一つで、特定の条件に応じてスタイルを適用するために使用されます。以下は基本的なメディアクエリの例です：

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

この例では、画面の幅が600ピクセル以下の場合、背景色がライトブルーに変わります。

16.4 フレキシブルグリッド

フレキシブルグリッドは、レイアウトを柔軟に調整するための手法です。CSSグリッドやFlexboxを使用して、コンテナの中の要素を配置します。

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 200px;
}

この例では、.container 内の要素が自動的に折り返され、各要素が最低200ピクセルの幅を持つように設定されています。

16.5 ビューポートとブレイクポイント

ビューポートは、ユーザーがウェブページを閲覧する際に使用する表示領域です。ブレイクポイントは、レイアウトを変更するための基準点を指します。一般的なブレイクポイントの例は次の通りです：

スマートフォン：480px 以下
タブレット：481px ～ 768px
デスクトップ：769px 以上

第17章: レスポンシブデザインの実践的な例

17.1 シンプルなレスポンシブレイアウト

以下は、シンプルなレスポンシブレイアウトの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
    }
    .item {
      flex: 1 1 100%;
    }
    @media (min-width: 600px) {
      .item {
        flex: 1 1 48%;
      }
    }
    @media (min-width: 900px) {
      .item {
        flex: 1 1 30%;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </div>
</body>
</html>

この例では、画面幅が600ピクセル未満の場合、各アイテムは全幅を占めます。600ピクセル以上の場合は2列、900ピクセル以上の場合は3列に分かれます。

なお、以下の記述は、ウェブページの表示が異なるデバイスや画面サイズに適応するように設定するためのメタタグです。

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

以下のような意味があります。

name="viewport":ビューポートに関する設定を指定している。
content="width=device-width, initial-scale=1.0":ビューポートの幅をデバイスの幅に設定。デバイスの画面幅に合わせてページがスケーリングされる。また、ページの初期ズームレベルを1.0に設定している。

17.2 画像のレスポンシブ対応

画像もレスポンシブに対応させる必要があります。次の例では、画像がコンテナの幅に合わせて自動的にサイズ変更されます。

<style>
  img {
    max-width: 100%;
    height: auto;
  }
</style>
<img src="example.jpg" alt="Example Image">

第18章: レスポンシブデザインのベストプラクティス

18.1 モバイルファースト

モバイルデバイスを優先してデザインを行い、徐々にデスクトップ向けに拡張していくアプローチです。この方法では、基本的なスタイルをモバイル向けに設定し、メディアクエリを使って画面が大きくなるにつれてスタイルを追加します。

18.2 フレキシブルなユニット

ピクセルよりもパーセントやビュー幅（vw）、ビュー高さ（vh）を使用することで、要素のサイズが柔軟に変わるようにします。

.container {
  width: 80%;
  margin: 0 auto;
}

この例では、コンテナが常にビューポートの80％の幅を持ち、中央に配置されます。

第19章: CSSの構造化の基本原則

CSSの記述に関しては、大きな項目から小さな項目へと書いていくことが一般的に推奨されます。これは、より効率的なスタイル管理や読みやすさ、維持管理の観点から有効です。

リセット/ノーマライズ
まず、ブラウザごとのデフォルトスタイルの違いをなくすためにリセットCSSやノーマライズCSSを適用します。
全体のレイアウト
次に、全体のレイアウトを定義します。これは、ページ全体の構造やメインコンテナの配置を含みます。

   body {
       font-family: Arial, sans-serif;
       margin: 0;
       padding: 0;
   }

   .container {
       width: 80%;
       margin: 0 auto;
   }

グローバルスタイル
全体に適用される基本的なスタイルを定義します。例えば、共通のフォントスタイルやリンクのスタイルなどです。

 h1, h2, h3 {
       color: #333;
   }

   a {
       color: #007BFF;
       text-decoration: none;
   }

コンポーネントのスタイル
各コンポーネント（ナビゲーションバー、フッター、カードなど）のスタイルを定義します。

.navbar {
       background-color: #f8f9fa;
       padding: 1rem;
   }

   .card {
       border: 1px solid #ddd;
       padding: 1rem;
       margin-bottom: 1rem;
   }

モジュールのスタイル
より小さなモジュールや部分のスタイルを定義します。例えば、ボタンやフォーム要素などです。

  .btn {
       background-color: #007BFF;
       color: #fff;
       padding: 0.5rem 1rem;
       border: none;
       border-radius: 4px;
   }

   .form-group {
       margin-bottom: 1rem;
   }

ユーティリティクラス
最後に、スペーシングや表示の制御など、細かい調整のためのユーティリティクラスを定義します。

.mt-1 {
       margin-top: 1rem;
   }

   .text-center {
       text-align: center;
   }

このように、大きな項目から小さな項目へと順序立ててCSSを記述することで、スタイルシートの読みやすさとメンテナンス性が向上します。また、チームでの開発時にも一貫したスタイルガイドを持つことで、共同作業がスムーズに進みます。

以上、「主要なCSSのセレクタとプロパティ」を解説しました。

最後までお読みいただきありがとうございました。

HTML講座の一覧に戻る

BootStrapで今風のデザインを実現する　最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる

第1章: CSSセレクタの概要

1.1 セレクタとは

1.2 セレクタの基本構文

第2章: 基本的なセレクタ

2.1 タグセレクタ

2.2 クラスセレクタ

2.3 IDセレクタ

第3章: 結合セレクタ

3.1 子セレクタ

3.2 子孫セレクタ

3.3 隣接兄弟セレクタ

第4章: 擬似クラスと擬似要素

4.1 擬似クラス

疑似クラスのnth-child

基本構文

パラメータの種類

例

注意点

4.2 擬似要素

第5章: 属性セレクタ

5.1 基本属性セレクタ

5.2 部分一致属性セレクタ

第6章: テキストプロパティ

6.1 color

6.2 font-family

6.3 font-size

6.4 font-weight

6.5 font-style

6.6 text-align

6.7 text-decoration

6.8 line-height

6.9 letter-spacing

6.10 text-transform

6.11 text-shadow

第7章: ボックスモデルプロパティ

7.1 widthとheight

7.2 margin

7.3 padding

7.4 border

7.5 border-radius

7.6 box-shadow

box-sizingプロパティ

box-sizing: border-boxの効果

CSSの継承とは

継承されるプロパティ

継承されないプロパティ

第8章: 背景プロパティ

8.1 background-color

8.2 background-image

8.3 background-repeat

8.4 background-position

8.5 background-size

8.6 background-attachment

第9章: フレックスボックスプロパティ

9.1 display: flex

9.2 flex-direction

9.3 flex-wrap

9.4 justify-content

9.5 align-items

9.6 align-content

9.7 Flexアイテムに適用するプロパティ

フレックスアイテムを使ってレスポンシブ対応

flex: 1 1 200px; の意味

メディアクエリの設定

第10章: グリッドプロパティ

基本概念

GridコンテナとGridアイテム

基本的な使い方

Gridコンテナに適用するプロパティ

Gridアイテムに適用するプロパティ

Gridを使ってレスポンシブ対応

第11章: ポジショニングプロパティ

11.1 position

static

fixed

sticky

relative

absolute

relative と absolute の組み合わせ

6.1 `color`

6.2 `font-family`

6.3 `font-size`

6.4 `font-weight`

6.5 `font-style`

6.6 `text-align`

6.7 `text-decoration`

6.8 `line-height`

6.9 `letter-spacing`

6.10 `text-transform`

6.11 `text-shadow`

7.1 `width`と`height`

7.2 `margin`

7.3 `padding`

7.4 `border`

7.5 `border-radius`

7.6 `box-shadow`

`box-sizing`プロパティ

`box-sizing: border-box`の効果

8.1 `background-color`

8.2 `background-image`

8.3 `background-repeat`

8.4 `background-position`

8.5 `background-size`

8.6 `background-attachment`

9.1 `display: flex`

9.2 `flex-direction`

9.3 `flex-wrap`

9.4 `justify-content`

9.5 `align-items`

9.6 `align-content`

`flex: 1 1 200px;` の意味

11.1 `position`

11.2 `top`, `right`, `bottom`, `left`

例題　position: relative と position: absolute の基本的な使い方を理解する

例題　スクロールしても画面に固定される要素を作成する

例題　上下中央揃えレイアウトを作成する

11.3 `z-index`

例題　z-indexプロパティを使って要素の重なり順を制御する

13.1 `opacity`

13.2 `visibility`

13.3 `overflow`

13.4 `cursor`

13.5 `transition`

13.6 `transform`

13.7 `animation`

`@keyframes`の詳細

`animation`プロパティの詳細

BootStrapで今風のデザインを実現する　最後までお読みいただきありがとうございます。