CSSに関連する用語集300

2024年9月1日 2024年9月1日山崎講師

山崎講師

CSSに関連する300の用語集を日本語と英語を併記し、アルファベット順に並べて解説しています。

A

Absolute Positioning (絶対配置): 絶対配置 - 要素を親要素の基準に対して、ページの特定の位置に配置する方法です。position: absolute;を使用します。
Accessibility (アクセシビリティ): アクセシビリティ - すべてのユーザーがウェブコンテンツを利用できるようにするための設計手法です。CSSは視覚的な支援を提供する役割を持ちます。
Adjacent Sibling Selector (隣接兄弟セレクタ): 隣接兄弟セレクタ - 特定の要素の次に隣接する兄弟要素を選択するセレクタです。例: h1 + p。
Align-items (アラインアイテムズ): アラインアイテムズ - Flexboxのプロパティで、コンテナ内のアイテムの垂直方向の配置を制御します。
Animation (アニメーション): アニメーション - CSSのプロパティを使って、要素に動きを付ける技術です。@keyframesを使用して定義します。
Aspect Ratio (アスペクト比): アスペクト比 - 要素の幅と高さの比率を指定するためのプロパティです。

B

Background (背景): 背景 - 要素の背景に色、画像、グラデーションなどを適用するためのプロパティです。
Background-color (背景色): 背景色 - 要素の背景色を設定するプロパティです。
Background-image (背景画像): 背景画像 - 要素の背景に画像を表示するプロパティです。
Baseline (ベースライン): ベースライン - 要素のテキストの基準線で、他の要素と整列するときに使用されます。
Block-level Element (ブロックレベル要素): ブロックレベル要素 - 画面全体の幅を占有し、新しい行から始まる要素です。例: div, p。
Border (ボーダー): ボーダー - 要素の境界を定義するプロパティで、幅、スタイル、色を設定します。
Box Model (ボックスモデル): ボックスモデル - CSSで要素のレイアウトを定義するための概念で、コンテンツ、パディング、ボーダー、マージンの4つの部分から構成されます。
Box-shadow (ボックスシャドウ): ボックスシャドウ - 要素に影を付けるためのプロパティです。

C

Calc() (計算): 計算 - CSSで数値を動的に計算するための関数です。例: width: calc(100% - 50px);。
Cascade (カスケード): カスケード - CSSにおいて、複数のスタイルが適用された場合に、最も適切なスタイルを選択するためのルールです。
Clearfix (クリアフィックス): クリアフィックス - 浮動要素が親要素の高さを崩さないようにするための技法です。
Clipping (クリッピング): クリッピング - 要素の一部を隠すために、クリップ領域を定義する技術です。
Color (色): 色 - テキストや背景などの色を指定するプロパティです。
Column (列): 列 - グリッドレイアウトやフレックスボックスで使用される概念で、要素を縦方向に配置します。
Content-box (コンテントボックス): コンテントボックス - ボックスモデルにおいて、パディングとボーダーを含まない、要素の実際の内容部分です。
Cursor (カーソル): カーソル - 要素にマウスカーソルを重ねたときに表示されるカーソルの形状を指定するプロパティです。

D

Default Styles (デフォルトスタイル): デフォルトスタイル - ブラウザが自動的に適用する、何も指定しない場合の標準スタイルです。
Descendant Selector (子孫セレクタ): 子孫セレクタ - 特定の要素の全ての子孫要素を選択するセレクタです。例: div p。
Display (ディスプレイ): ディスプレイ - 要素の表示形式を設定するプロパティで、block, inline, flex などがあります。
Drop Shadow (ドロップシャドウ): ドロップシャドウ - 要素に影を付けることによって、要素が浮かび上がって見えるようにする効果です。

E

Element Selector (要素セレクタ): 要素セレクタ - 特定のHTMLタグの要素全てを選択するセレクタです。例: p, h1。
Em (エム): エム - 相対的な単位で、親要素のフォントサイズに基づいてサイズを指定します。
Flexbox (フレックスボックス): フレックスボックス - 要素を効率的に配置、整列、分配するためのレイアウトモデルです。
Float (フロート): フロート - 要素を左または右に配置し、他の要素をその周りに回り込ませるプロパティです。
Font-family (フォントファミリー): フォントファミリー - テキストの表示に使用するフォントの種類を指定するプロパティです。
Font-size (フォントサイズ): フォントサイズ - テキストのサイズを指定するプロパティです。
Font-style (フォントスタイル): フォントスタイル - テキストのスタイルを斜体にするなど、テキストの見た目を変更するプロパティです。
Font-weight (フォントウェイト): フォントウェイト - テキストの太さを指定するプロパティです。例: normal, bold, 100, 700。

G

Grid (グリッド): グリッド - CSSグリッドレイアウトを使用して、要素を行と列に分けて配置するレイアウトモデルです。
Grid-template-columns (グリッドテンプレートカラムズ): グリッドテンプレートカラムズ - グリッドの列の幅を指定するプロパティです。
Grid-template-rows (グリッドテンプレートローズ): グリッドテンプレートローズ - グリッドの行の高さを指定するプロパティです。
Gradient (グラデーション): グラデーション - CSSで色の変化を滑らかに表現する技術で、線形（リニア）と放射状（ラディアル）の2種類があります。
Grid-area (グリッドエリア): グリッドエリア - グリッドレイアウトで要素を配置する特定のエリアを指定するプロパティです。
Grid-column (グリッドカラム): グリッドカラム - 要素がグリッドレイアウト内でどの列に配置されるかを指定するプロパティです。
Grid-row (グリッドロー): グリッドロー - 要素がグリッドレイアウト内でどの行に配置されるかを指定するプロパティです。

H

Hover (ホバー): ホバー - マウスカーソルが要素の上にあるときに適用される状態で、:hover疑似クラスを使用してスタイルを指定します。
Height (高さ): 高さ - 要素の高さを指定するプロパティです。
Hidden (隠し): 隠し - 要素を表示しない状態にするためのプロパティで、display: none;やvisibility: hidden;が使用されます。

I

ID Selector (IDセレクタ): IDセレクタ - 特定のIDを持つ要素を選択するセレクタです。例: #header。
Inline Element (インライン要素): インライン要素 - 画面の幅全体を占有せず、他の要素と同じ行に配置される要素です。例: span, a。
Inline-block (インラインブロック): インラインブロック - インライン要素のように配置されるが、ブロック要素のように幅や高さを指定できる表示形式です。
Inheritance (継承): 継承 - 親要素のスタイルが子要素に自動的に適用される特性です。
Important (インポート): インポート - CSSの特定のルールに優先順位を付けるためのキーワードで、通常のカスケードルールを無視します。例: !important。
Initial (イニシャル): イニシャル - CSSプロパティの値をブラウザの初期値にリセットするためのキーワードです。
Inherit (インヘリット): インヘリット - CSSプロパティの値を親要素から継承するためのキーワードです。

J

Justify-content (ジャスティファイコンテンツ): ジャスティファイコンテンツ - Flexboxまたはグリッドレイアウトで、コンテナ内のアイテムを水平方向に整列させるプロパティです。

K

Keyframes (キーフレーム): キーフレーム - CSSアニメーションで使用され、アニメーションの途中の状態を定義するために使用されるルールです。

L

Layout (レイアウト): レイアウト - ページ内の要素を配置するための全体的なデザインや配置方法です。
Letter-spacing (文字間隔): 文字間隔 - テキストの各文字間のスペースを調整するプロパティです。
Line-height (行間): 行間 - テキストの行の高さを指定するプロパティで、行間を調整するのに使用します。
Linear Gradient (線形グラデーション): 線形グラデーション - 直線的に色が変化するグラデーション効果を適用するプロパティです。
List-style (リストスタイル): リストスタイル - リストアイテムのマーカーやナンバリングをカスタマイズするプロパティです。

M

Margin (マージン): マージン - 要素の外側にある空白領域を指定するプロパティです。
Max-height (最大高さ): 最大高さ - 要素が取りうる最大の高さを指定するプロパティです。
Max-width (最大幅): 最大幅 - 要素が取りうる最大の幅を指定するプロパティです。
Media Query (メディアクエリ): メディアクエリ - 異なるデバイスや画面サイズに応じてスタイルを適用するための条件を指定する機能です。
Min-height (最小高さ): 最小高さ - 要素が取りうる最小の高さを指定するプロパティです。
Min-width (最小幅): 最小幅 - 要素が取りうる最小の幅を指定するプロパティです。

N

Nested Selector (ネストセレクタ): ネストセレクタ - 一つのセレクタが他のセレクタの内側にネストされているセレクタです。
None (なし): なし - 要素が表示されないことを示すプロパティ値です。例: display: none;。
Nth-child (n番目の子): N番目の子 - 特定の位置にある子要素を選択するためのCSS疑似クラスです。例: li:nth-child(2)。
Nth-of-type (n番目のタイプ): N番目のタイプ - 特定のタイプのn番目の子要素を選択するためのCSS疑似クラスです。例: p:nth-of-type(3)。

O

Opacity (不透明度): 不透明度 - 要素の透明度を指定するプロパティで、0（完全に透明）から1（完全に不透明）までの値を取ります。
Overflow (オーバーフロー): オーバーフロー - 要素のコンテンツが指定された幅や高さを超えた場合に、どのように処理するかを指定するプロパティです。
Outline (アウトライン): アウトライン - 要素の外側に描かれる線で、ボーダーとは異なり、要素のサイズには影響を与えません。

P

Padding (パディング): パディング - 要素の内容と境界の間の内側の余白を指定するプロパティです。
Pseudo-class (擬似クラス): 擬似クラス - 要素の特定の状態に対してスタイルを適用するためのセレクタです。例: :hover, :focus。
Pseudo-element (擬似要素): 擬似要素 - 要素の特定の部分に対してスタイルを適用するためのセレクタです。例: ::before, ::after。
Position (ポジション): ポジション - 要素の配置方法を指定するプロパティです。例: static, relative, absolute, fixed, sticky。

Q

Query (クエリ): クエリ - メディアクエリの条件部分で、スタイルが適用される状況を指定します。例: @media screen and (max-width: 600px)。

R

Radial Gradient (放射状グラデーション): 放射状グラデーション - 中心から外側に向かって色が変化するグラデーション効果を適用するプロパティです。
Relative Positioning (相対配置): 相対配置 - 要素を通常の位置から相対的に移動させる配置方法です。position: relative;を使用します。
Rem (レム): レム - ルート要素（通常はhtml要素）のフォントサイズに基づく相対的な単位です。
Resize (リサイズ): リサイズ - 要素のサイズ変更を許可するかどうかを指定するプロパティです。
Responsive Design (レスポンシブデザイン): レスポンシブデザイン - 画面サイズやデバイスに応じて、レイアウトが変わるデザイン手法です。
RGB (アールジービー): RGB - 赤（Red）、緑（Green）、青（Blue）の光の三原色を組み合わせて色を指定する形式です。
RGBA (アールジービーエー): RGBA - RGBに不透明度（Alpha）を追加して色を指定する形式です。

S

Selector (セレクタ): セレクタ - CSSでスタイルを適用する要素を指定するための文字列です。
Specificity (特異性): 特異性 - CSSのセレクタに基づいて、競合するスタイルのどれが適用されるかを決定するためのルールです。
Sticky Positioning (スティッキーポジショニング): スティッキーポジショニング - 要素をページのスクロールに対して固定する配置方法です。position: sticky;を使用します。
Sibling Selector (兄弟セレクタ): 兄弟セレクタ - 同じ親要素を持つ兄弟要素を選択するセレクタです。例: h1 ~ p。
Text-align (テキストアライン): テキストアライン - テキストの水平方向の配置を指定するプロパティです。例: left, right, center, justify。
Text-decoration (テキストデコレーション): テキストデコレーション - テキストに下線や打ち消し線を追加するプロパティです。
Transform (トランスフォーム): トランスフォーム - 要素を回転、拡大、縮小、移動などするためのプロパティです。
Transition (トランジション): トランジション - 要素のプロパティが変化するときのアニメーション効果を指定するプロパティです。

T

Typography (タイポグラフィ): タイポグラフィ - フォントやテキストのレイアウトに関する設計手法で、読みやすさや美しさを追求します。
Transform-origin (トランスフォームオリジン): トランスフォームオリジン - transformプロパティが適用される際の基準点を指定するプロパティです。

U

Unordered List (順不同リスト): 順不同リスト - 番号なしでリスト項目を表示するためのHTML要素で、ulタグを使用します。
User Agent Stylesheet (ユーザーエージェントスタイルシート): ユーザーエージェントスタイルシート - ブラウザがデフォルトで適用するスタイルシートです。
Units (単位): 単位 - 長さやサイズを指定するための測定単位で、px, em, rem, %などがあります。

V

Vertical-align (垂直整列): 垂直整列 - インライン要素やテーブルセルの垂直方向の整列を指定するプロパティです。
Viewport (ビューポート): ビューポート - ユーザーがウェブページを見ることができるブラウザウィンドウの表示領域です。
Visibility (可視性): 可視性 - 要素の表示・非表示を指定するプロパティです。hiddenにすると、要素は見えなくなりますが、レイアウトは保持されます。

W

Width (幅): 幅 - 要素の幅を指定するプロパティです。
White-space (空白): 空白 - テキスト内の空白文字の処理方法を指定するプロパティです。例: normal, nowrap, pre。
Word-break (ワードブレーク): ワードブレーク - 長い単語を折り返すかどうかを指定するプロパティです。
Word-spacing (ワードスペーシング): ワードスペーシング - テキスト内の単語間のスペースを調整するプロパティです。
Wrap (ラップ): ラップ - Flexboxレイアウトにおいて、コンテナ内のアイテムを折り返すかどうかを指定するプロパティです。

X

X-axis (X軸): X軸 - 水平方向の軸で、CSSのtransformプロパティで要素を水平方向に移動または回転させる際に使用されます。

Y

Y-axis (Y軸): Y軸 - 垂直方向の軸で、CSSのtransformプロパティで要素を垂直方向に移動または回転させる際に使用されます。

Z

Z-index (Zインデックス): Zインデックス - 要素のスタッキング順序を指定するプロパティで、同じ場所に重なる要素の前後関係を決定します。

セイ・コンサルティング・グループのCSS研修

投稿者プロフィール

山崎講師代表取締役

セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。

CSSに関連する用語集300

A

B

C

D

E

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

セイ・コンサルティング・グループのCSS研修

ネットワーク基礎とWebページ作成実習

投稿者プロフィール

最新の投稿

JavaScriptに関連する300の用語集

メンタルヘルス・マネジメントに関する用語集300