tkrd-stack

学習ノート

自分の理解を深めるための技術メモ

← 一覧に戻る

CSS

CSS とは

CSS（Cascading Style Sheets）は、ウェブページの見た目やレイアウトを設定するための言語です。HTML がページの構造を定義するのに対し、CSS はその構造にスタイルを付けて装飾や配置を行います。CSS を使えば、文字の色やフォント、背景色、レイアウト、アニメーションなどを指定できます。

基本構文

CSS は、セレクタと宣言ブロックで構成されています。

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

1. セレクタ

  • タグセレクタ：
    h1
    などのタグ名を使って、HTML 要素全体にスタイルを適用します。
  • クラスセレクタ： 
    .class-name
    で指定し、特定のクラスにスタイルを適用します。
  • ID セレクタ：
    #id-name
    で指定し、一意の ID にスタイルを適用します。

2. プロパティと値

  • CSS のプロパティは、例えば
    color
    や
    font-size
    といった装飾の対象を意味します。
  • 値はそのプロパティにどのようなスタイルを当てるかを指定するものです。
h1 {
  color: blue;
  font-size: 24px;
}

CSS の適用方法

CSS は以下の 3 つの方法で HTML に適用できます：

  1. インラインスタイル：HTML 要素の
    style
    属性に直接記述します。
  2. 内部スタイルシート：HTML ファイル内の
    <style>
    タグに直接記述します。
  3. 外部スタイルシート：CSS ファイルを HTML と分けて管理します。例：
    <link rel="stylesheet" href="style.css">
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>カスケードの例</title>
    <link rel="stylesheet" href="styles.css" />
    <!-- 外部スタイルシート -->
    <style>
      h1 {
        color: blue; /* 内部スタイルシートでの定義 */
      }
    </style>
  </head>
  <body>
    <h1 style="color: red;">Hello, World!</h1>
    <!-- インラインスタイル -->
  </body>
</html>

h1 {
  color: red;
}

カスケード

「何かが連なっている状態」、「連続して起こっている状態」などを意味する表現。

  • インラインスタイル（
    color: red;
    ）が最優先で適用されます。
  • 内部スタイルシート（
    color: blue;
    ）が次に適用されますが、インラインスタイルに覆されます。
  • 外部スタイルシートのスタイルは、この例では適用されませんが、もしあった場合も特異性によって最も優先されるのはインラインスタイルです。
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>カスケードの例</title>
    <link rel="stylesheet" href="styles.css" />
    <!-- 外部スタイルシート -->
    <style>
      h1 {
        color: blue; /* 内部スタイルシートでの定義 */
      }
    </style>
  </head>
  <body>
    <h1 style="color: red;">Hello, World!</h1>
    <!-- インラインスタイル -->
  </body>
</html>

CSS の具体的なプロパティ例

  • 色指定：
    color
    , 
    background-color
  • テキストスタイル：
    font-size
    , 
    font-family
    , 
    font-weight
  • レイアウト：
    display
    , 
    margin
    , 
    padding
    , 
    position
  • アニメーション：
    transition
    , 
    animation

ボックスモデル

ウェブページ上の各要素がボックスとして扱われ、そのサイズや配置を制御するための基本的な概念です。このモデルにより、要素間のスペースやレイアウトの構築が可能になります。

ボックスモデルの構成

CSS ボックスモデルは、主に以下の 4 つの要素から構成されています：

  1. コンテンツ (
    content
    )：
    • 実際に要素の中身（テキストや画像など）が表示される部分です。
    • width
      や 
      height
      プロパティでサイズを調整できます。
  2. パディング (
    padding
    )：
    • コンテンツとボーダーの間にある内側の余白です。背景色はコンテンツだけでなくパディング部分にも適用されます。
    • padding-top
      , 
      padding-right
      , 
      padding-bottom
      , 
      padding-left
      のように個別に指定したり、
      padding
      プロパティで一括指定できます。
  3. ボーダー (
    border
    )：
    • 要素の周囲にある枠線で、
      border-width
      , 
      border-style
      , 
      border-color
      でカスタマイズできます。
    • 例：
      border: 2px solid black;
      のように、幅・スタイル・色を指定してボーダーを設定します。
  4. マージン (
    margin
    )：
    • 要素の外側の余白で、他の要素とのスペースを調整します。パディングとは異なり、背景色は適用されません。
    • margin-top
      , 
      margin-right
      , 
      margin-bottom
      , 
      margin-left
      のように個別に指定したり、
      margin
      プロパティで一括指定できます。
    • margin
      の一部は、「マージンの相殺」機能により、上下のマージンが重なることがあります。

ボックスモデルの計算方法

CSS ボックスモデルでは、要素の総幅と総高さが以下のように計算されます。

  • 幅: 
    width + padding-left + padding-right + border-left + border-right
  • 高さ: 
    height + padding-top + padding-bottom + border-top + border-bottom

デフォルトでは、

width
や 
height
プロパティはコンテンツ部分のサイズのみを指定しており、パディングやボーダーのサイズは含みません。しかし、
box-sizing
プロパティを使ってボックスの計算方法を変更できます。

/* コンテンツ、パディング、ボーダーを含んだ幅・高さの計算に変更 */
.box {
  box-sizing: border-box;
}

この

border-box
を設定することで、パディングやボーダーを含めた幅・高さとして扱われるため、レイアウトを管理しやすくなります。

ボックスモデルの活用

ボックスモデルは、要素間のスペースや全体のレイアウトの設計に役立ちます。例えば：

.container {
  width: 300px;
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
}

上記の例では、

.container
の最終的な幅は以下のように計算されます（
box-sizing: content-box
の場合）：

  • 総幅 = 300px (コンテンツ) + 10px (左右のパディング) + 2px (左右のボーダー) = 324px

まとめ

CSS ボックスモデルは、ウェブページの要素のサイズとスペースを調整するための重要な概念です。これを理解することで、レイアウトのコントロールがしやすくなり、意図通りのデザインを実現できます。

セレクタの種類

基本セレクタ

  • タイプセレクタ（Type Selector）

    • 要素名で指定。

    • 例: 

      p { color: red; }

    • p
      タグのすべての要素に適用。

      p {
  color: red;
}

  • クラスセレクタ（Class Selector）: クラス名で指定。

    • 例: 

      .class-name { color: blue; }

    • .class-name
      というクラスが指定された要素に適用。

      .classs-name {
  color: blue;
}

  • ID セレクタ（ID Selector）: ID で指定。

    • 例: 

      #id-name { color: green; }

    • id-name
      という ID が指定された要素に適用。

      #id-name {
  color: green;
}

グループ化セレクタ（Grouping Selector）

  • 複数のセレクタをまとめて一度に指定。

  • 構文: 

    selector1, selector2, selector3 { ... }

    h1,
h2,
p {
  color: black;
}

子孫系セレクタ

親要素や兄弟要素に基づいてスタイルを適用するためのさまざまなセレクタがあります。

子孫セレクタ（Descendant Selector）

  • 親要素の中にある子要素（直子またはさらに深い階層の子孫）にスタイルを適用します。

  • 例:

    div
    の中のすべての
    p
    タグに青色が適用されます。

    div p {
  color: blue;
}

子セレクタ（Child Selector）

  • 親要素の直下の子要素のみを選択します。深い階層の子要素には適用されません。

  • 例:

    div
    の直下にある
    p
    タグに赤色が適用されます。

    div > p {
  color: red;
}

隣接兄弟セレクタ（Adjacent Sibling Selector）

  • 前の要素のすぐ後ろにある兄弟要素にスタイルを適用します。

  • 例:

    h1
    タグの直後にある
    p
    タグに適用されます。

    h1 + p {
  margin-top: 0;
}

一般兄弟セレクタ（General Sibling Selector）

  • 構文: 

    前の要素 ~ 次の要素

  • 特定の要素の後ろにあるすべての兄弟要素にスタイルを適用します。

  • 例:

    h1
    タグの後にあるすべての
    p
    タグに緑色が適用されます。

    h1 ~ p {
  color: green;
}

擬似クラス（Pseudo-class）

要素の特定の状態に基づいてスタイルを適用するセレクタです。

  • hover: マウスオーバー時に適用。

    a:hover {
  color: red;
}

  • first-child: 親要素内で最初の子要素に適用。

    p:first-child {
  color: blue;
}

  • last-cihld: 親要素内で最後の子要素に適用。

    p:last-child {
  color: green;
}

  • nth-child(n): 親要素内で特定の順番の子要素に適用。

    li:nth-child(2) {
  color: orange;
}

  • not(): 特定の条件に合わない要素に適用。

    p:not(.highlight) {
  color: gray;
}

擬似要素（Pseudo-element）

要素の一部にスタイルを適用するセレクタです。

その要素の特定の部分に対してスタイルを付与することができるものです。

  • ::before: 要素の内容の前にコンテンツを挿入。

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

  • ::after: 要素の内容の後にコンテンツを挿入。

    p::after {
  content: ";";
}

  • ::first-letter: 要素内の最初の文字に適用。

    p::first-letter {
  font-size: 2em;
}

  • ::first-line: 要素内の最初の行に適用。

    p::first-line {
  font-weight: bold;
}

属性セレクタ（Attribute Selector）

要素の属性値に基づいてスタイルを適用します。

  • [属性]: 属性を持つ要素に適用。
    • 例: 
      [type="text"] { background-color: yellow; }
  • [属性^="値"]: 属性値が指定された値で始まる要素に適用。
    • 例: 
      [name^="prefix"] { color: red; }
  • [属性$="値"]: 属性値が指定された値で終わる要素に適用。
    • 例: 
      [href$=".jpg"] { border: 1px solid black; }
  • [属性="値"]**: 属性値に指定された値を含む要素に適用。
    • 例: 
      [class*="button"] { background-color: blue; }

ユニークセレクタ（Universal Selector）

  • 構文: ``

  • すべての要素にスタイルを適用します。

  • 例:

    * {
  margin: 0;
  padding: 0;
}

グループ化と階層セレクタの組み合わせ

  • 親要素のクラスと子要素のタグを指定:
    • 例: 
      .parent div { color: red; }
    • .parent
      クラス内の
      div
      タグにスタイルが適用されます。

カスタム属性セレクタ（Custom Attribute Selector）

  • CSS カスタムプロパティ（変数）を使用して要素を選択。
  • 例: 
    div[data-theme="dark"] { background-color: black; }
  • data-theme="dark"
    を持つ
    div
    要素に適用。

カスケードと継承

CSS の「Cascading（カスケード）」は、複数のスタイルが競合する場合、優先度に従ってどのスタイルが適用されるかを決定する仕組みです。また、いくつかのプロパティは「継承」され、親要素のスタイルが子要素にも適用されます。

カスケード（Cascading）

カスケードは、複数のスタイルルールが競合する場合に、どのルールが優先されるかを決定する仕組みです。以下の 3 つの原則によって、優先度が決まります。

  1. ソース順序：

    • 同じセレクタが複数回定義されている場合、後に定義されたものが優先されます。

    • 例：

      p {
  color: red;
}
p {
  color: blue; /* こちらが適用される */
}

  2. 特異性（Specificity）：

    • セレクタの特異性によって優先度が決まります。特異性は、以下のルールに従って計算されます。

      • インラインスタイル（例：
        <div style="color: red;">
        ）は、特異性が最も高いです。
      • ID セレクタ（例：
        #id
        ）は、クラスセレクタ（例：
        .class
        ）よりも高い特異性を持ちます。
      • タグセレクタ（例：
        h1
        ）は、最も特異性が低いです。

    • 具体例：

      .class {
  color: green; /* 特異性: 1 */
}
#id {
  color: yellow; /* 特異性: 10 */
}
h1 {
  color: blue; /* 特異性: 0 */
}
      • この場合、
        #id
        が最も高い特異性を持つため、ID が適用された要素は黄色になります。

  3. 重要度（!important）：

    • 特異性に関係なく、

      !important
      を付けたスタイルが優先されます。使い方は以下の通りですが、通常は避けるべきです。

    • 例：

      p {
  color: blue !important; /* 他のすべてのルールよりも優先される */
}

継承（Inheritance）

継承は、親要素から子要素にスタイルが引き継がれる仕組みです。全ての CSS プロパティが継承されるわけではなく、いくつかのプロパティは継承可能です。

継承されるプロパティの例

  • color
  • font-family
  • font-size
  • line-height

継承されないプロパティの例

  • margin
  • padding
  • border
  • background

継承の具体例

body {
  font-family: Arial, sans-serif; /* このフォントがすべての子要素に適用される */
}

h1 {
  color: blue; /* h1は青色 */
}

p {
  /* pは親からフォントファミリーを継承するが、色はデフォルト */
}

継承の制御

  • 継承を制御するには、
    inherit
    、
    initial
    、
    unset
    などのキーワードを使用します。 
    • inherit
      ：強制的に親のプロパティを継承させる。
    • initial
      ：プロパティをデフォルト値に戻す。
    • unset
      ：プロパティを親から継承させるか、初期値を適用する。

まとめと結論

カスケードと継承は、CSS の動作を理解する上で非常に重要です。カスケードはスタイルの競合を解決するメカニズムであり、継承は親要素から子要素へのスタイルの伝播を制御します。これらを上手に活用することで、効率的で整理された CSS を書くことができます。

メディアクエリ

メディアクエリは、CSS の強力な機能の一つで、特定の条件（画面の幅、高さ、解像度、デバイスの向きなど）に基づいて異なるスタイルを適用します。これにより、レスポンシブデザインを実現し、様々なデバイスで最適な表示を可能にします。

メディアクエリの基本

メディアクエリは、

@media
ルールを使用して定義します。基本的な構文は以下の通りです：

@media media_type and (condition) {
  /* CSSルール */
}
  • media_type：
    screen
    （画面）、
    print
    （印刷）、
    all
    （全デバイス）など、適用するメディアのタイプを指定します。
  • condition：デバイスの特性（幅、高さ、解像度など）に基づく条件を指定します。

例

  1. 画面幅に基づくメディアクエリ：
/* 画面幅が600px以下の場合 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue; /* 背景色をライトブルーに変更 */
  }
}

この例では、画面幅が 600 ピクセル以下のデバイスで、

body
の背景色をライトブルーに変更します。

  1. 複数の条件を組み合わせたメディアクエリ：
/* 画面幅が600px以上800px以下の場合 */
@media screen and (min-width: 600px) and (max-width: 800px) {
  h1 {
    font-size: 2em; /* 見出しのフォントサイズを変更 */
  }
}

この例では、画面幅が 600px 以上 800px 以下のデバイスで、

h1
要素のフォントサイズを 2em に変更します。

  1. デバイスの向きに基づくメディアクエリ：
/* デバイスが横向きの場合 */
@media screen and (orientation: landscape) {
  .container {
    flex-direction: row; /* フレックスボックスの方向を横に変更 */
  }
}

この例では、デバイスが横向きの場合、

.container
クラスのフレックスボックスの方向を横に変更します。

メディアクエリの活用

メディアクエリは、特にレスポンシブデザインの実現に非常に有効です。以下のような場面で活用できます：

  • レイアウトの変更：デバイスの幅に応じて、カラム数の変更や要素の配置調整ができます。
  • フォントサイズの調整：画面サイズに応じてフォントサイズを変更し、可読性を向上させられます。
  • 画像の最適化：異なるデバイスで適切な画像を表示し、ロード時間を短縮できます。

まとめ

メディアクエリは、CSS を使って異なるデバイスや画面サイズに応じたスタイルを適用する強力なツールです。これにより、ウェブサイトやアプリケーションを多様な環境で最適に表示できるため、ユーザーエクスペリエンスが向上します。レスポンシブデザインを実現する重要な技術として、現代のウェブ開発に欠かせない存在となっています。

アニメーション

CSS アニメーションは、ウェブページ上で要素のスタイルを時間をかけて変化させるための機能です。これにより、動きのあるインタラクティブなユーザー体験を提供できます。CSS アニメーションを使用するための基本的な概念やプロパティについて詳しく見ていきましょう。

CSS アニメーションの基本

CSS アニメーションは主に 2 つの部分で構成されています：

  1. @keyframes ルール：アニメーションの各ステップを定義します。
  2. アニメーションプロパティ：アニメーションを実際に適用するためのスタイルプロパティです。

1. @keyframes ルール

@keyframes
を使用して、アニメーションの変化を定義します。各ステップをパーセンテージで指定し、そのステップで要素がどのように変化するかを決めます。

例

@keyframes example {
  0% {
    transform: translateX(0); /* 初期位置 */
    opacity: 1; /* 完全に表示 */
  }
  50% {
    transform: translateX(100px); /* 右に100px移動 */
    opacity: 0.5; /* 半透明 */
  }
  100% {
    transform: translateX(0); /* 元の位置に戻る */
    opacity: 1; /* 完全に表示 */
  }
}

2. アニメーションプロパティ

アニメーションを実際に適用するために、以下のプロパティを使用します。

  • animation-name：適用するアニメーションの名前（
    @keyframes
    で定義したもの）を指定します。
  • animation-duration：アニメーションが完了するまでの時間を指定します。
  • animation-timing-function：アニメーションの速度の変化を指定します（例えば、linear、ease、ease-in-out など）。
  • animation-delay：アニメーションが始まるまでの遅延時間を指定します。
  • animation-iteration-count：アニメーションを繰り返す回数を指定します（
    infinite
    を使うと無限に繰り返します）。
  • animation-fill-mode：アニメーションが終了したときのスタイルを指定します（
    forwards
    、
    backwards
    など）。

例

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example; /* 定義したアニメーション名 */
  animation-duration: 2s; /* アニメーションの長さ */
  animation-timing-function: ease; /* アニメーションの速度 */
  animation-iteration-count: infinite; /* 無限に繰り返す */
}

アニメーションの実装例

以下は、実際にアニメーションを適用する HTML と CSS の例です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSSアニメーションの例</title>
    <style>
      @keyframes example {
        0% {
          transform: translateX(0);
          opacity: 1;
        }
        50% {
          transform: translateX(100px);
          opacity: 0.5;
        }
        100% {
          transform: translateX(0);
          opacity: 1;
        }
      }

      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name: example;
        animation-duration: 2s;
        animation-timing-function: ease;
        animation-iteration-count: infinite;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

まとめ

CSS アニメーションを使うことで、要素のスタイルを動的に変化させることができます。

@keyframes
を利用してアニメーションのステップを定義し、アニメーションプロパティでそれを適用します。これにより、視覚的に魅力的なウェブページを作成することができます。アニメーションを適切に使用することで、ユーザー体験を向上させることができますが、過度に使用すると逆効果になる場合があるため、注意が必要です。

設計思想

CSS でセマンティックなアプローチを取ることは重要ですが、「通常」と言えるかどうかはプロジェクトや開発者のスタイルに依存します。ただし、モダンなフロントエンド開発では、セマンティックなアプローチが推奨されるベストプラクティスとなっています。

以下に、CSS におけるセマンティックなアプローチの特徴や、なぜそれが重要視されるのかを説明します。

CSS におけるセマンティックなアプローチとは？

1. 意味のあるクラス名を使う

セマンティックなアプローチでは、クラス名を要素の「見た目」ではなく、「意味」や「役割」に基づいて命名します。

  • 非セマンティックな例（見た目を示す命名）

    <div class="red-text bold"></div>
    • 問題点: クラス名がスタイルに依存しているため、デザイン変更時にクラス名も変更が必要。

  • セマンティックな例（意味に基づく命名）

    <div class="error-message"></div>
    • メリット: クラス名が「要素の役割」を表しているため、見た目が変わってもクラス名を変更する必要がない。

2. HTML と CSS の責務を分離する

セマンティックな HTML を使用することで、CSS はスタイリングに集中し、HTML は意味や構造に専念します。

  • セマンティックな HTML と CSS の例

    <article class="blog-post">
  <h1 class="blog-post__title">記事のタイトル</h1>
  <p class="blog-post__content">この記事は...</p>
</article>

    .blog-post__title {
  font-size: 24px;
  color: #333;
}

  • メリット: HTML の構造が意味を伝えるため、アクセシビリティが向上し、CSS が見た目を一元管理できる。

3. 役割に基づく CSS の設計

CSS フレームワークや設計手法（BEM、SMACSS、OOCSS など）では、セマンティックなアプローチを重視しています。これにより、再利用性や保守性を高められます。

例: BEM でセマンティックな CSS を設計

<div class="navigation">
  <ul class="navigation__list">
    <li class="navigation__item">Home</li>
    <li class="navigation__item">About</li>
    <li class="navigation__item navigation__item--active">Contact</li>
  </ul>
</div>

セマンティックなアプローチのメリット

1. 保守性の向上

  • クラス名が意味を持つため、どの CSS ルールがどの HTML 要素に関連しているかが明確。
  • チーム開発やプロジェクトの長期運用に適している。

2. 再利用性

  • スタイルを再利用しやすく、異なるプロジェクトやページでも柔軟に適応可能。

3. アクセシビリティの向上

  • HTML のセマンティクス（例: 
    <header>
    , 
    <main>
    , 
    <article>
    ）と整合性の取れた CSS 設計により、スクリーンリーダーや検索エンジンにとって解釈しやすいコードが作れる。

4. デザインの変更に強い

  • デザインやテーマが変わっても、クラス名はそのままで、CSS だけを更新すれば良い。

セマンティックなアプローチが取られないケース

以下のような場合には、セマンティックなアプローチが必ずしも優先されないことがあります。

1. プロトタイピング

  • 短時間で動作する UI を作る必要がある場合、見た目に基づくクラス名を利用することもあります。

    <div class="blue-box"></div>

2. 既存のプロジェクトやレガシーコード

  • レガシープロジェクトでは、過去のルールに従う必要があり、セマンティックなクラス命名を適用しにくい場合があります。

3. CSS フレームワークの利用

  • Bootstrap や Tailwind CSS など、ユーティリティクラスを多用するフレームワークでは、セマンティックな命名があまり重視されません。 例:

    ```html
<div class="text-center bg-blue-500"></div>

```

セマンティックなアプローチを取るべきか？

可能な限りセマンティックなアプローチを取ることが推奨されます。ただし、状況やプロジェクトの性質に応じて柔軟に対応することが重要です。たとえば、短期プロジェクトではスピード優先でクラス命名をシンプルにしたり、フレームワークを活用することも有効です。

セマンティックな設計を基本にしつつ、実用性や効率を考えてバランスを取る