この用語をシェア
概要
CSS（Cascading Style Sheets）は、HTMLで作成されたWebページの見た目やレイアウトを制御するスタイルシート言語です。1996年にW3Cによって標準化され、Webデザインの分野で不可欠な技術として発展を続けています。
CSSを使用することで、HTMLの構造と見た目を分離でき、メンテナンスしやすく再利用可能なWebサイトを構築できます。現在の最新バージョンはCSS3で、アニメーション、グラデーション、フレックスボックス、グリッドレイアウトなど豊富な機能が追加されています。
基本的な使い方
CSSはセレクタとプロパティを使ってスタイルを定義します。以下が基本的な記述方法です：
/* 基本的なセレクタとスタイル */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
h1 {
color: #333;
text-align: center;
margin-bottom: 2rem;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 2rem;
margin-bottom: 1rem;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
/* レスポンシブデザイン */
@media (max-width: 768px) {
.container {
padding: 0 10px;
}
.card {
padding: 1rem;
}
}主な機能
- レイアウト制御：Flexbox、CSS Grid、Floatを使った多様なレイアウト手法
- レスポンシブデザイン：メディアクエリによるデバイス対応
- アニメーション：transition、animationプロパティによる動的効果
- 視覚効果：グラデーション、シャドウ、ボーダー、変形処理
- タイポグラフィ：フォント制御、文字間隔、行間の調整
- カラーマネジメント：RGB、HEX、HSL、CSS変数によるカラー制御
- 擬似クラス・擬似要素：:hover、:before、:afterなどの特殊セレクタ
メリット
- 構造と見た目の分離：HTMLは構造、CSSは見た目に集中でき、保守性が向上
- 再利用性：一つのCSSファイルで複数のHTMLページをスタイリング可能
- 効率的な開発：デザインの一括変更やメンテナンスが容易
- パフォーマンス向上：外部CSSファイルはブラウザにキャッシュされ読み込み速度が向上
- アクセシビリティ：適切なCSSによりユーザビリティが向上
- SEO効果：構造化されたHTMLとCSSの分離は検索エンジンに評価される
- クロスブラウザ対応：ベンダープレフィックスにより各ブラウザで一貫した表示が可能
関連技術
CSSは以下の技術と密接に連携してWebサイトを構築します：
- HTML：CSSのスタイリング対象となるマークアップ言語
- Sass/SCSS：変数や関数機能を持つCSSプリプロセッサ
- PostCSS：CSSを変換・最適化するツール
- Bootstrap：CSSフレームワークによる高速開発
- Tailwind CSS：ユーティリティファーストのCSSフレームワーク
- CSS-in-JS：ReactやVue.jsでのJavaScript内CSS記述
- CSS Custom Properties：CSS変数による動的スタイル制御