第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

フォントの太さを指定します。値はnormalboldbolderlighter、数値(100~900)があります。

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

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

6.5 font-style

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

em {
    font-style: italic;
}

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

6.6 text-align

テキストの水平配置を指定します。値はleftrightcenterjustifyがあります。

h1 {
    text-align: center;
}

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

6.7 text-decoration

テキストの装飾を指定します。値はnoneunderlineoverlineline-throughがあります。

a {
    text-decoration: none;
}

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

6.8 line-height

テキストの行の高さを指定します。単位にはpxem%、数値(倍数)があります。

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 widthheight

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

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>要素に影がつきます。

第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

背景画像の繰り返し方法を指定します。値はrepeatno-repeatrepeat-xrepeat-yがあります。

div {
    background-repeat: no-repeat;
}

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

8.4 background-position

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

div {
    background-position: center;
}

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

8.5 background-size

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

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

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

8.6 background-attachment

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

div {
    background-attachment: fixed;
}

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

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

9.1 display: flex

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

.container {
    display: flex;
}

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

9.2 flex-direction

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

.container {
    flex-direction: row;
}

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

9.3 flex-wrap

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

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

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

9.4 justify-content

フレックスアイテムの主軸に沿った整列方法を指定します。値はflex-startflex-endcenterspace-betweenspace-aroundがあります。

.container {
    justify-content: center;
}

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

9.5 align-items

フレックスアイテムの交差軸に沿った整列方法を指定します。値はflex-startflex-endcenterbaselinestretchがあります。

.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;
}

10.2 top, right, bottom, left

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

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

10.3 z-index

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

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

第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

要素の表示/非表示を指定します。値はvisiblehiddencollapseがあります。

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

12.3 overflow

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

.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

要素の変形を指定します。値はrotatescaletranslateskewなどがあります。

.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 メディアタイプ

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

@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列に分かれます。

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のセレクタとプロパティ」を解説しました。

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

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