CSS チュートリアル

CSS（Cascading Style Sheets、層積スタイルシート）は、HTML 文書や XML アプリケーションなどの構造化文書にスタイル（フォント、間隔、色など）を追加するためのコンピュータ言語です。CSS ファイルの拡張子は .css です。

CSS を使用することで、ウェブページの開発効率を大幅に向上させることができます！

この CSS チュートリアルでは、複数のウェブページのスタイルとレイアウトを同時に制御する方法を学ぶことができます。

CSS3 は現在、大部分の現代ブラウザでサポートされていますが、次のバージョンである CSS4 はまだ開発中です。

各章の例

この CSS チュートリアルには数百の CSS オンライン例が含まれています。サイトのオンラインエディターを使用して、CSS をオンラインで編集し、変更後の結果を即座に確認することができます。

例1：基本スタイル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本スタイル</title>
    <style>
        body {
            background-color: #d0e4fe; /* 背景色を設定 */
        }

        h1 {
            color: orange; /* 文字色を設定 */
            text-align: center; /* 文字を中央揃え */
        }

        p {
            font-family: "Times New Roman"; /* フォントを設定 */
            font-size: 20px; /* フォントサイズを設定 */
        }
    </style>
</head>
<body>
    <h1>見出し</h1>
    <p>これは段落です。</p>
</body>
</html>

例 2: レイアウトとタイポグラフィー

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>レイアウトとタイポグラフィ</title>
    <style>
        .container {
            width: 80%; /* コンテナの幅をページの80%に設定 */
            margin: 0 auto; /* コンテナを水平中央揃え */
            padding: 20px; /* コンテナの内側の余白を設定 */
        }

        .header {
            background-color: #f8f9fa; /* 背景色を設定 */
            padding: 10px 0; /* 上下の余白を設定 */
            text-align: center; /* 文字を中央揃え */
        }

        .footer {
            background-color: #343a40; /* 背景色を設定 */
            color: #ffffff; /* 文字色を設定 */
            text-align: center; /* 文字を中央揃え */
            padding: 10px 0; /* 上下の余白を設定 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">ヘッダー</div>
        <p>コンテンツがここに入ります。</p>
        <div class="footer">フッター</div>
    </div>
</body>
</html>

例 3: レスポンシブデザイン

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>レスポンシブデザイン</title>
    <style>
        /* 小さなスクリーンでレイアウトを調整 */
        @media only screen and (max-width: 600px) {
            .container {
                width: 100%; /* 小さなスクリーンでは幅を100%に設定 */
                padding: 10px; /* 余白を調整 */
            }

            .header, .footer {
                padding: 5px 0; /* 余白を調整 */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">ヘッダー</div>
        <p>コンテンツがここに入ります。</p>
        <div class="footer">フッター</div>
    </div>
</body>
</html>

例 4: アニメーション効果

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>アニメーション効果</title>
    <style>
        @keyframes fadeIn {
            from {
                opacity: 0; /* 初期の透明度を0に設定 */
            }
            to {
                opacity: 1; /* 最終の透明度を1に設定 */
            }
        }

        .fade-in {
            animation: fadeIn 2s ease-in-out; /* アニメーションを適用、2秒間 */
        }
    </style>
</head>
<body>
    <div class="fade-in">アニメーションのあるテキスト</div>
</body>
</html>

例 5: カスタムフォント

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カスタムフォント</title>
    <style>
        @font-face {
            font-family: 'MyCustomFont'; /* カスタムフォント名 */
            src: url('my-custom-font.woff2') format('woff2'); /* フォントファイルのパス */
        }

        .custom-font {
            font-family: 'MyCustomFont', sans-serif; /* カスタムフォントを適用 */
        }
    </style>
</head>
<body>
    <p class="custom-font">カスタムフォントのテキスト</p>
</body>
</html>

例 6: CSS 変数の使用

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 変数の使用</title>
    <style>
        :root {
            --main-bg-color: #d0e4fe; /* CSS 変数を定義 */
            --main-text-color: #333; /* CSS 変数を定義 */
        }

        body {
            background-color: var(--main-bg-color); /* CSS 変数を使用 */
            color: var(--main-text-color); /* CSS 変数を使用 */
        }
    </style>
</head>
<body>
    <p>CSS 変数を使用したテキスト</p>
</body>
</html>

例 7: フレックスボックスのレイアウト

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox レイアウト</title>
    <style>
        .flex-container {
            display: flex; /* Flexbox レイアウトを有効にする */
            justify-content: center; /* 水平に中央揃え */
            align-items: center; /* 垂直に中央揃え */
            height: 100vh; /* ビューポートの高さに設定 */
        }

        .flex-item {
            margin: 10px; /* アイテム間のマージンを設定 */
            padding: 20px; /* 内側の余白を設定 */
            background-color: #f1f1f1; /* 背景色を設定 */
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">アイテム 1</div>
        <div class="flex-item">アイテム 2</div>
        <div class="flex-item">アイテム 3</div>
    </div>
</body>
</html>

例 8: CSS グリッドレイアウト

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid レイアウト</title>
    <style>
        .grid-container {
            display: grid; /* Grid レイアウトを有効にする */
            grid-template-columns: repeat(3, 1fr); /* 3 列レイアウトを作成 */
            gap: 10px; /* グリッドアイテム間の間隔を設定 */
        }

        .grid-item {
            background-color: #e0e0e0; /* 背景色を設定 */
            padding: 20px; /* 内側の余白を設定 */
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">アイテム 1</div>
        <div class="grid-item">アイテム 2</div>
        <div class="grid-item">アイテム 3</div>
    </div>
</body>
</html>

HTML/CSS/JS オンラインツール

HTML/CSS/JS オンラインツールでは、HTML、CSS、JS コードをオンラインで編集し、リアルタイムで結果を確認できます。優れたコードを保存して共有することもできます：オンラインツール

CSS 参考マニュアル

チュートリアルでは、より完全な CSS プロパティ、セレクタの構文、ブラウザサポートなどの資料を見つけることができます。

CSS プロパティ
CSS セレクタ参考マニュアル
CSS 音声参考マニュアル
CSS 単位
CSS 色参考マニュアル

HTML にスタイルを追加する CSS の学習

層積スタイルシート（CSS）は、HTML の次に学ぶべき第2の技術です。HTML はコンテンツの構造と意味を定義するのに対し、CSS はスタイルとレイアウトをデザインします。これには、フォント、色、サイズ、間隔、複数列の配置、アニメーションや装飾効果の追加が含まれます。

学習パス

CSS を学ぶ前に、HTML の基本知識を理解していることが推奨されます。まずは HTML 概要モジュールを学習し、その後、HTML と CSS の両方を深く学習することをお勧めします。また、コンピュータの使い方やファイル管理にも慣れておく必要があります。ウェブ開発に完全に不慣れな方は、まず「ゼロから始めるウェブ学習」を終えてからこのトピックを進めてください。

モジュール

このトピックには以下のモジュールが含まれており、順番に読むことをお勧めします：

CSS 第一歩

CSS の基本的な動作原理、構文、および HTML にスタイルを追加する方法を紹介します。このモジュールは、CSS を習得するためのスムーズなスタートを提供し、CSS の基本的な使い方を理解します。

CSS ブロックの構築

CSS 第一歩を踏まえた上で、CSS をさらに学習します。CSS の言語と構文に慣れた後、次に進むべき内容として、カスケードと継承、使用可能なすべての種類のセレクタ、単位、サイズ、背景とボーダーのスタイリング、デバッグなどが含まれます。これにより、具体的なルールに進む前に、適切な CSS を作成するためのツールキットを提供します。

テキストのスタイリング

CSS の基本的な知識を習得した後、次に集中して学ぶべきテーマはテキストのスタイリングです。これには、フォント、太さ、斜体、行間、文字間隔、影などのテキストの特徴を設定する方法が含まれます。また、カスタムフォントのページへの適用方法や、リストとリンクのスタイリングも学習します。

CSS レイアウト

これまでに CSS の基本知識、テキストスタイリング、コンテンツのボックス設計と操作を学びました。次に、ボックスをビューポート内や他のボックスの隣に適切に配置する方法を考えます。これには、display プロパティの設定、新しいレイアウトツール（flexbox、CSS グリッド、定位など）の使用、そして伝統的な技術に関する知識が含まれます。

よくある CSS の問題解決

CSS を使用してよくある問題を解決する方法を説明します。CSS の基本知識を習得すれば、さまざまなレイアウトやスタイルの問題を解決することができます。

「CSS は奇妙だ」

CSS のユニークさとその動作方式について説明し、他のプログラミング言語やデザインツールとの違いを解説します。