CSS

Cascading Style Sheets.

CSS とは
ボックスモデル
Vendor prefix: ベンダープレフィックスとは、各ブラウザが新しい CSS機能を正式にサポートする前に、それらを試験的に適用できるようにするためのブラウザ固有の接頭辞です。
色の指定方法（単位）
CSSの単位: CSSの単位は、要素のサイズや位置を指定するためのもので、固定された値を持つ絶対単位と、他の要素や画面サイズに応じて変動する相対単位に分かれています。

Selectors 「セレクタ」

属性セレクタ

pseudo-class（疑似クラス）

HTML要素に特定の状態がある場合にスタイルを適用するためのものです。

:after: 要素の直後に内容を挿入する。
:before: 要素の直前に内容を挿入する。
:focus: フォーカスが当たった要素にスタイルを指定するための CSSの擬似クラスで、アクセシビリティの向上に役立ちます。

pseudo-element（擬似要素）

コンテンツ内に生成された仮想的な要素を指定するための仕組みです。

::first-letter: 要素の最初の文字にスタイルを適用する。
::focus-within: フォーカスを持っているか、フォーカスを持った要素を含む要素を表します。

nth selectors（n番目系セレクタ）

特定の順番に位置する子要素を指定して選択するためのセレクタです。

viewport units: ビューポート単位。画面いっぱいに要素を表示する方法。

Horizontal list: CSSを使用して横並びリストを作成するには、ul要素にdisplay: flex;とflex-wrap: wrap;を設定し、li要素に適切なマージンを追加します。
Flexbox: コンテナ内のアイテムの配置、方向、順序を柔軟に管理できるレイアウトモデルです。
Grid layout: グリッドレイアウトは、Webページのコンテンツを行と列に分割して配置するための強力かつ柔軟なレイアウトシステムです。
Dark mode: CSS で Web サイトをダークモードに対応させる方法
CSS変数

グローバル値

inherit: 要素のプロパティの計算値を親要素から取得するよう指定します。
initial: 要素にプロパティの初期値 (または既定値) を設定します。
unset: プロパティをリセットし、親から自然に継承された場合は継承値、そうでなければ初期値を設定します。

点滅する CSS: animation と @keyframes を使って、文字や要素を点滅させてみます。
Custom properties（カスタムプロパティ）: 再利用可能な変数として機能し、スタイルの一貫性と柔軟性を提供します。
3D effect: 3D効果とは、要素に奥行きを持たせ、視点やパースペクティブを設定することで、ウェブページ上で立体的に見せる技術です。

Properties

/* 〜 */ comment

align-content: コンテナ内全体の交差軸方向（初期値では縦方向）の揃え位置を指定する。
align-items: フレックスボックスやグリッドコンテナ内の要素の垂直方向（縦方向）の配置を制御する。
align-self: コンテナ内の個別アイテムの縦方向の揃え位置を指定する。
alignment-adjust: テキストの垂直位置を微調整するために使用されます。
alignment-baseline: ベースラインを調整する。
animation: アニメーションについてまとめて指定する。
animation-delay: アニメーションがいつ始まるかを指定する。
animation-direction: アニメーションが正方向、逆方向、または交互に再生されるかどうかを指定するために使用されます。
animation-duration: アニメーション１回分の時間の長さを指定する。
animation-fill-mode: アニメーションの実行の前後にどう対象にスタイルを適用するかを設定します。
animation-iteration-count: アニメーションの繰り返し回数を指定する。
animation-name: 要素に適用するアニメーションの名前を指定し、その名前は同じ CSSファイル内で定義された @keyframesルールと一致させる必要があります。
animation-play-state: 再生中か一時停止かを指定する。
animation-timing-function: アニメーションのタイミング・進行割合を指定する。
appearance: プラットフォームにおける標準的な UI の外観にする。
aspect-ratio: アスペクト比を定義する。
attr() [function]: HTML要素の属性値をスタイルシート内で利用できるようにする機能です。

backface-visibility: 3D空間で変形する要素の背面の表示方法を指定する。
background: 背景に関するすべてのプロパティをまとめて一括指定できる。
background-attachment: 背景画像の固定・移動を指定する。
~~background-break~~ [廃止]: インライン要素の背景画像の繰り返し方法を指定する。
background-clip: 背景の適用範囲を指定する。
background-color: 要素の背景色を指定するために使用されます。
background-image: 背景画像を指定する際に使用します。
background-origin: 背景の基準位置を指定する。
background-position: 背景画像の表示開始位置を指定する。
background-repeat: 背景画像のリピートの仕方を指定する。
background-size: 背景画像のサイズを指定する際に使用します。
baseline-shift: テキストの特定範囲のベースラインを指定し直す。
binding: 結合するスタイル規則の参照。
bookmark-label: ブックマークのラベル（名前）の指定。
bookmark-level: 階層構造のブックマークのレベル指定。
bookmark-target: ブックマークのリンク先の指定。
border: ボックスの上下左右のボーダー（境界）のスタイル・太さ・色に対して同じ値をまとめて指定することができます。
border-block-end-width: 要素の論理的なブロックの終端側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。
border-block-start-color: 要素の上側にあるボーダーの色を指定する。
border-block-start-width: 要素の始点側に配置されるボーダーの幅を設定する。
border-bottom: 要素の下端に線（ボーダー）を指定して、色・太さ・線の種類などを設定できるプロパティです。
border-bottom-color: 下側のボーダーの色を指定する。
border-bottom-left-radius: ボックスの左下の角丸を指定する。
border-bottom-right-radius: ボックスの右下の角丸を指定する。
border-bottom-style: 下側のボーダーのスタイルを指定する。
border-bottom-width: 下側のボーダーラインの太さを指定する。
border-collapse: セルの枠線（ボーダー）の表示の仕方を指定する。
border-color: ボーダー色の一括指定。
border-image: 画像ボーダーを指定する。
border-image-outset: ボーダーイメージ領域がボーダーボックスを超えて拡がる量を指定する。
border-image-repeat: 画像ボーダーの繰り返し方法を指定する。
border-image-slice: ボーダー画像の使用範囲を指定する。
border-image-source: 画像ボーダーに使用する画像ファイルを指定する。
border-image-width: 画像ボーダーの太さを指定する。
border-inline-end-width
border-inline-start-width
border-left: 左側のボーダーのみの色・太さ・スタイル
border-left-color: 左側のボーダーの色を指定する。
border-left-style: 左側のボーダーのスタイルを指定する。
border-left-width: 左側のボーダーラインの太さを指定する。
border-radius: ボックスの角丸をまとめて指定する。
border-right: 右側のボーダーのみの色・太さ・スタイル
border-right-color: 右側のボーダーの色を指定する。
border-right-style: 右側のボーダーのスタイルを指定する。
border-right-width: 右側のボーダーラインの太さを指定する。
border-spacing: セルのボーダーの間隔を指定する。
border-style: ボーダーのスタイルを一括指定する。
border-top: 上側のボーダーのみの色・太さ・スタイル
border-top-color: 上側のボーダーの色を指定する。
border-top-left-radius: ボックスの左上の角丸を指定する。
border-top-right-radius: ボックスの右上の角丸を指定する。
border-top-style: 上側のボーダーのスタイルを指定する。
border-top-width: 上側の境界線（border）の幅（width）を指定する。
border-width: ボーダーの太さを一括指定する。
bottom: 要素の下端を基準にして、指定された距離分だけ上に位置を調整するプロパティです。
box-decoration-break: ボックスが改行する際の表示形式を指定する。
box-shadow: ボックスに影をつける。
box-sizing: ボックスサイズの算出方法を指定する。
break-after: ボックス後でのカラムの区切り方法を指定する。
break-before: ボックス前でのカラムの区切り方法を指定する。
break-inside: ボックス途中でのカラムの区切り方法を指定する。

calc(): calc()関数は算術演算を行い、その結果を要素のサイズやマージン、パディングなどに指定することができます。
caption-side: テーブル（表）のキャプションの位置を指定する
clear: 回り込みを解除する
clip: ボックスを切り抜き表示（クリッピング）する
clip-path: 指定された形状で要素を切り抜くことができる。
color: 文字の色（前景色）を設定します。
color-profile: 色の表現方法を定義する。
column-count: ブロック要素を複数の列に分割する。
column-fill: 複数の列を持つコンテンツを均等に配置するためのプロパティで、"balance"値を指定することで余白を最小限に抑えられます。
column-gap: アイテム同士の縦方向の間隔を指定する。
column-rule: マルチカラムレイアウトの境界線を設定する。
column-rule-color: 多列レイアウトで各列の境界線の色を指定する。
column-rule-style: カラムの区切り線のスタイルを指定する。
column-rule-width: 多列レイアウトで列間の縦線の太さを指定する。
column-span: 複数のカラムを持つレイアウトで、カラムの境界をまたぐ要素を指定する。
column-width: カラム幅を指定する。
columns: 要素内のテキストを複数の列に分割する。
content: 主に擬似要素を使用して、HTMLに記述されていないテキストや画像などのコンテンツをWebページに追加するために用いられます。
counter() [function]: Webページ内で項目の自動番号付けを管理するために使用されます。
counters() [function]: Webページ内のネストされた要素に自動的に階層的な番号付けを行うための関数です。
counter-increment: 要素の連番（カウンタ）の値を進める。
counter-reset: 要素の連番（カウンタ）の値をリセットする。
cursor: カーソルの形状を指定する。

direction: 文字表記の方向（左右）を指定する。
display: 要素の表示形式を指定する。

empty-cells: 空白セルのボーダーの表示・非表示を指定する。

:first-of-type: 同じ親要素内にある特定のタグタイプの最初の要素にスタイルを適用するためのCSSセレクタです。
flex: フレックスアイテムの伸縮性、縮小性、および基本的なサイズを一度に定義するためのショートハンドです。
flex-basis: Flexboxレイアウト内の要素の初期メインサイズを指定します。
flex-direction: フレックスコンテナ内のアイテムの配置方向を指定する。
flex-grow: フレックスボックス内のアイテムが利用可能な追加スペースをどのように分割して占めるかを決定するための比率を設定します。
flex-shrink: フレックスボックス内のアイテムがコンテナーの空間が不足した際にどれだけ縮小するかを定義する数値を指定します。
flex-wrap: Flexboxコンテナ内の要素の折り返し（改行）の挙動を制御します。
Flexbox: コンテナ内のアイテムの配置、方向、順序を柔軟に管理できるレイアウトモデルです。
float: 左または右に寄せて配置する。
font: フォントに関する指定をまとめて行う。
font-family: フォントの種類を指定する。
font-size: フォントのサイズを指定する。
font-size-adjust: フォントのサイズを調整する。
font-stretch: フォントの形状を幅広・幅狭にする。
font-style: フォントをイタリック体・斜体にする。
font-variant: フォントをスモールキャップにする。
font-weight: フォントの太さを指定する。

gap: グリッドやフレックスコンテナ内のアイテム間のスペースを簡単に設定するためのプロパティです。
grid-auto-flow: グリッド内の未配置アイテムを行または列方向に自動的に並べる方法を指定するためのものです。
grid-column: 列グリッドの開始と終了についてまとめて指定する。
grid-row: グリッドレイアウトにおいて要素が配置される開始行と終了行を指定するプロパティです。
grid-template-columns: グリッドトラックの横方向のサイズリストを指定する。
grid-template-rows: グリッドトラックの縦方向のサイズリストを指定する。

height: 高さを指定する。

justify-content: 要素の水平方向（横方向）の配置を調整し、余白やスペースの使い方を制御します。
justify-items: コンテナ内のアイテムの主軸方向（初期値では横方向）のデフォルト揃え位置を指定する際に使用します。
justify-self: コンテナ内の個別アイテムの横方向（主軸方向）の揃え位置を指定する。

:last-of-type: 指定された要素の兄弟要素の中で最後の特定の要素を選択するために使用されます。
left: 左からの配置位置（距離）を指定する。
letter-spacing: 文字の間隔を指定する。
line-height: 行の高さを指定する。
list-style: リストの先頭に表示するマーカーに関する指定をまとめて行う。
list-style-image: リストのマーク画像。
list-style-position: リストのマークの表示位置を指定する。
list-style-type: リストの先頭に表示するマーカー文字の種類を指定する。

margin: マージンに関する指定をまとめて行う。
margin-bottom: 下マージンを指定する。
margin-left: 左マージンを指定する。
margin-right: 右マージンを指定する。
margin-top: 上マージンを指定する。
marker-offset: リストマーカーとリスト内容の間隔を指定する。
max-height: 高さの最大値を指定する。
max-width: 要素の最大幅を指定する。
min-height: 高さの最小値を指定する。
min-width: 幅の最小値を指定する。

object-fit: 画像やビデオがそのコンテナ要素にどのように収まるか（縦横比を保つかどうかなど）を指定するプロパティです。
opacity: 要素の透明度を指定する。
orphans: テキストブロックの最後の行に少なくともいくつの単語を残すかを制御する。
outline: アウトラインのスタイル・太さ・色を指定する。
outline-color: 要素のアウトライン（輪郭）の色を指定する。
outline-offset: アウトラインの位置を指定する。
outline-style: アウトラインのスタイルを指定する。
outline-width: 要素の周囲に描かれるアウトラインの太さを指定する。
overflow: はみ出た要素の表示方法を指定する。
overflow-x: ボックスの範囲内に内容が収まらない場合に、はみ出た要素の左右の表示方法を指定する。
overflow-y: はみ出た要素の上下の表示方法を指定する。

padding: パディングに関する指定をまとめて行う。
padding-bottom: 要素の下部に余白（内側のスペース）を設定する。
padding-left: 要素の左側の余白（内側のスペース）を設定する。
padding-right: 要素の右側の余白（内側のスペース）を設定する。
padding-top: 要素の上部に余白（内側のスペース）を設定する。
~~page-break-after~~ → break-after: 印刷時の改ページ位置を指定する。
page-break-before: 印刷時の改ページ位置を指定する。
page-break-inside: 印刷やページ分割時に要素内で改ページを制御する。
perspective: 要素に3D効果を与える際の視点の距離を設定し、その要素の奥行き感を調整するためのものです。
perspective-origin: 3D変換において視点の位置を設定し、要素がどの方向から見られるかを決定するプロパティです。
position: ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する。
prefers-color-scheme

quotes: 引用符を設定する

right: 右の位置指定
row-gap: アイテム同士の横方向の間隔を指定する。

tab-size: テキスト内のタブ文字の幅を設定する。
table-layout: テーブルの幅と列の幅の調整方法を指定する。
text-align: 行揃えの位置・均等割付を指定する。
text-align-all: 全ての行の揃え位置・均等割付を指定する。
text-align-last: テキストコンテンツの最後の行の水平方向の位置を指定する。
text-decoration: テキストの下線・上線・取消線・点滅を指定する。
text-decoration-color: text-decoration-lineプロパティでテキストにつけた傍線の色を指定する。
text-decoration-line: テキストに傍線をつける。
text-decoration-skip: テキスト傍線のスキップ方法を指定する。
text-decoration-style: テキスト傍線のスタイルを指定する。
text-decoration-thickness: text-decoration-lineプロパティで指定された下線、上線、打ち消し線、または二重線の太さを変更する。
text-indent: インデント（字下げ）を制御する。
text-orientation: 縦書きを指定した場合の文字の表示方向を指定します。
text-overflow: コンテナの幅を超えたテキストを切り取るか、省略記号（…）で表示するかを指定するプロパティです。
text-shadow: テキストに影をつける。
text-size-adjust: 一部のモバイル端末で使われる、テキストの自動拡大アルゴリズムを制御します。
text-transform: 大文字・小文字・全角文字への変換を指定する。
top: 上からの配置位置（距離）を指定する。
touch-callout: 対象を長押しすることで現れるコールアウト表示を制御します。
transform: 要素に2D変形、または、3D変形を適用する。
transform-style: 要素の子要素が3D変換の影響を受けるかどうかを指定するためのもので、flatは2D平面上で描画し、preserve-3dは3D空間内で描画します。
transition: transition効果（時間的変化）をまとめて指定する。

unicode-bidi: Unicode の文字表記の方向を上書きする。
user-select: ユーザーが文章や画像などの要素を範囲選択できるかどうかを制御します。

vertical-align: インライン要素やテーブルセル内のテキストや画像を上下方向に揃えるために使います。
visibility: ボックスの表示・非表示を指定する。

white-space: 要素内の空白や改行の扱いと、テキストの折り返し方法を指定するためのものです。
widows: 改ページされる際の次ページの最低行数を指定する。
width: 要素の幅を指定する。
word-spacing: テキスト内の単語の間隔を調整する。
writing-mode: 縦書き・横書きの別と行ブロックを並べる方向を指定します。

z-index: 要素のスタッキングコンテキスト内での優先順位（重なり）を調整するために使用される。

@font-face: インターネット上のフォントを適用する。
@keyframes: アニメーションの動きを指定する。
@media: デバイスの画面サイズや特性に応じてスタイルを動的に切り替えるためのルールです。