CSS（Cascading Style Sheets）
CSSはウェブページの視覚的プレゼンテーションを制御する言語で、レイアウト、色、フォント、スペーシング、アニメーション、レスポンシブデザインを担当します。すべてのウェブサイトがHTMLと共にCSSを使用しており、モダンでアクセシブル、視覚的に魅力的なユーザーインターフェースの作成に不可欠です。
MIMEタイプ
text/css
種類
テキスト
圧縮
無劣化
メリット
- + Separates presentation from content (HTML)
- + Powerful layout systems: Flexbox, Grid, and container queries
- + Custom properties enable theming and dynamic values
- + Media queries enable responsive design for all screen sizes
デメリット
- − Global scope can cause unintended style conflicts
- − Browser compatibility differences require testing
- − No native variables before custom properties (pre-2017)
.CSSを使うタイミング
シンプルなタイポグラフィから複雑なレイアウトやアニメーションまで、すべてのウェブページのスタイリングにCSSを使用してください。
技術的詳細
CSSはセレクタを使用してHTML要素をターゲットにし、宣言ブロックでスタイルを適用します。カスケード、詳細度、継承のルールがどのスタイルが優先されるかを決定します。モダンCSSにはFlexbox、Grid、カスタムプロパティ（変数）、コンテナクエリが含まれます。
歴史
Hakon Wium Lieは1994年にCERNでCSSを提案しました。CSS1は1996年、CSS2は1998年に公開され、CSS3は1999年からモジュール式仕様として導入されました。Grid、Flexbox、カスタムプロパティなどのモダンCSS機能は進化を続けています。
.CSSから変換
.CSSに変換
関連フォーマット
関連用語
Learn More
CSS Units Explained: px, em, rem, vh, and When to Use Each
CSS offers over a dozen length units, each suited to different situations. Understanding the differences between absolute and relative units …
JSON vs YAML vs TOML: Choosing a Configuration Format
Configuration files are the backbone of modern applications. JSON, YAML, and TOML each offer different trade-offs between readability, complexity, and …
Flexbox vs CSS Grid: A Practical Comparison
Flexbox and CSS Grid are complementary layout systems, not competitors. This guide clarifies when to reach for each one and …
How to Format and Validate JSON Data
Malformed JSON causes silent failures in APIs and configuration files. Learn how to format, validate, and debug JSON documents to …
Base64 Encoding: How It Works and When to Use It
Base64 converts binary data into ASCII text, making it safe for transmission through text-based systems. Learn when Base64 is the …
How to Create CSS Gradients: Linear, Radial, and Conic
CSS gradients create smooth color transitions without image files. Learn to build linear, radial, and conic gradients with precise control …