CSS

概要

CSS（Cascading Style Sheets）は、Webページの見た目を整えるための言語です。 HTMLで作った文書構造に対して、色、サイズ、配置、余白などのデザインを指定することで、美しく読みやすいWebページを作ります。

CSSとは何か？

CSSは「スタイルシート言語」と呼ばれ、HTMLと組み合わせて使われます。HTMLが「何を表示するか」を定義するのに対し、CSSは「どのように表示するか」を定義します。

CSSの特徴

• デザインと構造の分離: HTMLは内容、CSSは見た目を担当
• 再利用性: 一つのCSSファイルで複数のページのデザインを統一可能
• 柔軟なレイアウト: Flexbox、Gridなどで自在にレイアウトを構築
• レスポンシブ対応: スマホ、タブレット、PCなど画面サイズに応じたデザインが可能

CSSの基本構文

CSSは「セレクタ」「プロパティ」「値」の3つで構成されます：

/* セレクタ { プロパティ: 値; } */
h1 {
    color: blue;           /* 文字色を青に */
    font-size: 24px;       /* フォントサイズを24pxに */
    text-align: center;    /* 中央揃え */
}

p {
    color: #333;           /* 文字色をダークグレーに */
    line-height: 1.6;      /* 行間を1.6倍に */
    margin: 20px 0;        /* 上下に20pxの余白 */
}

各部分の説明

• セレクタ: スタイルを適用する対象（h1、pなど）
• プロパティ: 変更したい項目（color、font-sizeなど）
• 値: 具体的な設定内容（blue、24pxなど）

CSSの書き方

CSSをHTMLに適用する方法は3つあります：

よく使うCSSプロパティ

CSS3とは？

CSS3は、CSSの最新バージョンで、以下のような機能が追加されました：

• 角丸: border-radiusで簡単に角丸ボタンが作れる
• 影: box-shadowで立体的な表現が可能
• グラデーション: linear-gradientで美しいグラデーション
• アニメーション: @keyframesで動きのある表現
• Flexbox・Grid: 柔軟なレイアウトシステム

レスポンシブデザイン

メディアクエリを使うことで、画面サイズに応じたデザインを実現できます：

/* スマホ向け（デフォルト） */
.container {
    width: 100%;
    padding: 10px;
}

/* タブレット以上 */
@media (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* PC向け */
@media (min-width: 1024px) {
    .container {
        width: 1000px;
    }
}

実際にやってみよう：CSSスタイルエディタ

下のエディタでCSSを編集して、テキストのスタイルをリアルタイムで変更できます！