過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li><strong>CSS</strong>（Cascading Style Sheets）は HTML の見た目（レイアウト・色・タイポグラフィ）を制御するスタイルシート言語</li><li>セレクタ: 要素（<code>p</code>）/ クラス（<code>.btn</code>）/ ID（<code>#main</code>）/ 属性（<code>[type=text]</code>）/ 疑似クラス（<code>:hover</code>）/ 子孫・子・兄弟</li><li><strong>レイアウト</strong>: 古い <code>float</code> から <strong>Flexbox</strong>（1 次元）/ <strong>Grid</strong>（2 次元）へ移行。両者ともすべての主要ブラウザで利用可</li><li><strong>レスポンシブデザイン</strong>: メディアクエリ（<code>@media</code>）+ <code>rem/em/%</code> + <code>vw/vh</code> + コンテナクエリ</li><li>エコシステム: <strong>Sass / SCSS</strong>（プリプロセッサ）/ <strong>Tailwind CSS</strong>（ユーティリティファースト）/ <strong>CSS-in-JS</strong>（styled-components 等）</li></ul></td></tr></table>
<h2>CSS とは</h2>

<p><strong>CSS</strong>（Cascading Style Sheets）は、HTML 要素の<strong>見た目・レイアウト</strong>を指定するためのスタイルシート言語です。1996 年に W3C で最初の仕様 CSS1 が勧告されました。</p>

<p>「Cascading」は<strong>カスケード（連鎖適用）</strong>の意味。複数のスタイル指定があるとき、<strong>詳細度・記述順・継承</strong>のルールで優先順位が決まります。</p>

<h2>適用方法</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 1. 外部スタイルシート（推奨） -->
<link rel="stylesheet" href="style.css">

<!-- 2. 内部スタイル -->
<style>
    h1 { color: blue; }
</style>

<!-- 3. インライン（非推奨、特殊用途のみ） -->
<p style="color: red;">赤いテキスト</p></code></pre>
<h2>セレクタ</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>種類</th><th>記法</th><th>意味</th></tr></thead>
<tbody>
<tr><td>要素</td><td><code>p</code></td><td>すべての <code><p></code></td></tr>
<tr><td>クラス</td><td><code>.btn</code></td><td><code>class="btn"</code> を持つ要素</td></tr>
<tr><td>ID</td><td><code>#main</code></td><td><code>id="main"</code> を持つ要素（ページ内一意）</td></tr>
<tr><td>属性</td><td><code>[type="text"]</code></td><td>属性で絞り込み</td></tr>
<tr><td>子孫</td><td><code>nav a</code></td><td><code>nav</code> 配下のすべての <code>a</code></td></tr>
<tr><td>子</td><td><code>ul > li</code></td><td><code>ul</code> の直接の子の <code>li</code></td></tr>
<tr><td>隣接兄弟</td><td><code>h2 + p</code></td><td><code>h2</code> の直後の <code>p</code></td></tr>
<tr><td>疑似クラス</td><td><code>a:hover</code></td><td>マウスホバー時</td></tr>
<tr><td>疑似要素</td><td><code>p::before</code></td><td>要素の前後に擬似的にコンテンツ追加</td></tr>
<tr><td>論理演算</td><td><code>:is() :where() :not() :has()</code></td><td>柔軟な条件指定（モダン）</td></tr>
</tbody>
</table>

<h2>ボックスモデル</h2>

<p>すべての要素は <strong>content → padding → border → margin</strong> の 4 層の箱で構成されます:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">.box {
    width: 300px;
    height: 200px;
    padding: 20px;        /* 内側の余白 */
    border: 2px solid #333;
    margin: 16px auto;    /* 外側の余白、中央寄せ */

    /* box-sizing で計算方法を変更（推奨） */
    box-sizing: border-box;  /* width に padding+border 含む */
}

/* グローバルに border-box を適用するのが現代の定番 */
*, *::before, *::after {
    box-sizing: border-box;
}</code></pre>
<h2>Flexbox（1 次元レイアウト）</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">.container {
    display: flex;
    flex-direction: row;          /* row / column */
    justify-content: space-between; /* 主軸方向の配置 */
    align-items: center;           /* 交差軸方向の配置 */
    gap: 16px;                     /* 子要素間の余白 */
    flex-wrap: wrap;               /* 折り返し */
}

.item {
    flex: 1;              /* 等分で伸縮 */
    flex: 0 0 200px;      /* 固定幅 200px */
    flex: 1 1 300px;      /* 最低 300px、可能なら伸縮 */
}</code></pre>
<h2>Grid（2 次元レイアウト）</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 等分 */
    grid-template-columns: 200px 1fr 100px; /* 固定 + 可変 + 固定 */
    grid-template-rows: auto;
    gap: 20px;
}

/* レスポンシブグリッド（minmax + auto-fit） */
.responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

/* 領域指定 */
.layout {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 200px 1fr;
}
header { grid-area: header; }
main { grid-area: main; }</code></pre>
<h2>レスポンシブデザイン（メディアクエリ）</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">/* モバイルファースト（デフォルトはモバイル） */
.container {
    padding: 16px;
}

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

/* デスクトップ以上 */
@media (min-width: 1200px) {
    .container { padding: 32px; max-width: 1200px; margin: 0 auto; }
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
    body { background: #1a1a1a; color: #eee; }
}

/* モーション減らす */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}</code></pre>
<h2>CSS 変数（カスタムプロパティ）</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-css">:root {
    --primary: #3b82f6;
    --primary-dark: #1e40af;
    --text: #1f2937;
    --bg: #ffffff;
    --radius: 8px;
    --shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn {
    background: var(--primary);
    color: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.btn:hover {
    background: var(--primary-dark);
}

/* ダークモードで上書き */
[data-theme="dark"] {
    --text: #f3f4f6;
    --bg: #111827;
}</code></pre>
<h2>CSS 関連エコシステム</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>カテゴリ</th><th>代表ツール</th><th>特徴</th></tr></thead>
<tbody>
<tr><td>プリプロセッサ</td><td><strong>Sass / SCSS</strong>、Less、Stylus</td><td>変数、ネスト、ミックスイン、関数</td></tr>
<tr><td>ユーティリティ</td><td><strong>Tailwind CSS</strong></td><td>HTML 内でクラス指定、PurgeCSS でビルド時除去</td></tr>
<tr><td>CSS フレームワーク</td><td>Bootstrap、Bulma、Foundation</td><td>UI コンポーネント・グリッド済</td></tr>
<tr><td>CSS-in-JS</td><td>styled-components、Emotion</td><td>JS で書く、React と相性◎</td></tr>
<tr><td>後処理</td><td><strong>PostCSS</strong>、Autoprefixer</td><td>ベンダープレフィックス自動付与</td></tr>
</tbody>
</table>

<h2>CSS3 の主な新機能</h2>

<ul>
<li><strong>Flexbox / Grid</strong>: モダンレイアウト</li>
<li><strong>カスタムプロパティ</strong>: <code>--var</code> による動的変数</li>
<li><strong>アニメーション</strong>: <code>@keyframes</code>、<code>transition</code>、<code>transform</code></li>
<li><strong>angle / 単位</strong>: <code>rem</code>、<code>vw</code>、<code>vh</code>、<code>vmin</code>、<code>ch</code>、<code>%</code></li>
<li><strong>角丸 / 影</strong>: <code>border-radius</code>、<code>box-shadow</code>、<code>filter: drop-shadow()</code></li>
<li><strong>グラデーション</strong>: <code>linear-gradient()</code>、<code>radial-gradient()</code></li>
<li><strong>コンテナクエリ</strong>: <code>@container</code> で親サイズに応じたスタイル（2023〜）</li>
<li><strong>ネスト</strong>: SCSS のようなネスト記法をネイティブ対応（2023〜）</li>
</ul>

<h2>ブラウザ対応の確認: caniuse.com</h2>

<p>新しい CSS 機能を使うときは <strong>https://caniuse.com/</strong> でブラウザ対応状況を確認します。例: 「container query」「has selector」と検索すると、各ブラウザのバージョン別対応表が出ます。</p>

<h2>FAQ</h2>

<p><strong>Q: Flexbox と Grid どちらを使う？</strong><br />
A: <strong>1 次元の整列</strong>（ナビ、カード横並び）は Flexbox、<strong>2 次元のレイアウト</strong>（ページ全体の格子）は Grid。組み合わせて使うのが普通です。</p>

<p><strong>Q: <code>!important</code> は使うべき？</strong><br />
A: 原則<strong>避ける</strong>。詳細度の戦いになり保守困難に。ユーティリティクラス（Tailwind 等）や、サードパーティ CSS の上書きが必要なときだけ。</p>

<p><strong>Q: Tailwind は CSS の知識なしで使える？</strong><br />
A: 内部はただの CSS（<code>flex justify-between p-4</code>）なので、CSS の概念（フレックス、パディング）の理解は必要。むしろ Tailwind を学ぶ過程で CSS も身に付きます。</p>

<p><strong>Q: モバイルファーストとデスクトップファーストどちら？</strong><br />
A: <strong>モバイルファースト推奨</strong>。<code>min-width</code> を使い、デフォルトをモバイル用に書き、画面が大きくなるにつれて拡張するのが今の主流です。</p>

<!-- @RESTORED_IMG_v1 -->
<h2>📸 参考画像</h2>
<p style="color:#666;font-size:0.85em;margin-bottom:1em">※ 旧バージョンから引き継いだ参考画像です。手順・図解の補助としてご覧ください。</p>
<p style="text-align:center;margin:1em 0"><img alt="参考画像" src="/uploadImage/20170918005728_4353742.png" style="max-width:640px;width:100%;height:auto;border:1px solid #ccc;border-radius:4px" /></p>