補講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;
}

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

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

第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章: フレックスボックスプロパティ

9.1 `display: flex`

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

.container {
    display: flex;
}

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

9.2 `flex-direction`

フレックスアイテムの配置方向を指定します。値はrow、row-reverse、column、column-reverseがあります。

.container {
    flex-direction: row;
}

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

9.3 `flex-wrap`

フレックスアイテムの折り返しを指定します。値はnowrap、wrap、wrap-reverseがあります。

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

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

9.4 `justify-content`

フレックスアイテムの主軸に沿った整列方法を指定します。値は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`

複数行のフレックスアイテムの交差軸に沿った整列方法を指定します。

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

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

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

10.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%); /* 中央からのずれを補正 */
}

10.2 `top`, `right`, `bottom`, `left`

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

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

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

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

解答例

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

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

解答例

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

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

解答例

10.3 `z-index`

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

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

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

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

解答例

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

11.1 display: block;

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

11.2 display: inline;

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

11.3 display: inline-block;

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

11.4 display: flex;

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

11.5 display: grid;

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

11.6 display: none;

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

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

12.1 `opacity`

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

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

12.2 `visibility`

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

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

12.3 `overflow`

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

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

12.4 `cursor`

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

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

12.5 `transition`

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

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

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

12.6 `transform`

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

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

12.7 `animation`

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

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

.element {
  animation: example 5s infinite;
}

第13章: メディアクエリ

13.1 メディアクエリの概要

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

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

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

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

13.3 メディアタイプ

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

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

第14章: 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% */
}

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

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

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

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

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

15.3 メディアクエリ

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

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

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

15.4 フレキシブルグリッド

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

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

.item {
  flex: 1 1 200px;
}

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

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

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

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

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

16.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に設定している。

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

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

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

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

17.1 モバイルファースト

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

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

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

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

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

以上、「主要な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 擬似クラス

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の効果

第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

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

10.1 position

static

fixed

sticky

relative

absolute

relative と absolute の組み合わせ

10.2 top, right, bottom, left

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

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

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

10.3 z-index

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

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

11.1 display: block;

11.2 display: inline;

11.3 display: inline-block;

11.4 display: flex;

11.5 display: grid;

11.6 display: none;

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

12.1 opacity

12.2 visibility

12.3 overflow

12.4 cursor

12.5 transition

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`

10.1 `position`

10.2 `top`, `right`, `bottom`, `left`

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

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

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

10.3 `z-index`

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

12.1 `opacity`

12.2 `visibility`

12.3 `overflow`

12.4 `cursor`

12.5 `transition`

12.6 `transform`

12.7 `animation`

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