ホームページ > ウェブフロントエンド > CSSチュートリアル > 誰でも使える決定版 CSS ガイドで CSS をマスターする |パート2

誰でも使える決定版 CSS ガイドで CSS をマスターする |パート2

Mary-Kate Olsen
リリース: 2025-01-03 15:09:41
オリジナル
990 人が閲覧しました

Mastering CSS in The Definitive CSS Guide for Everyone | Part-2

目次

No. Section Link
1 Responsive Design Principles Link
2 CSS Variables and Custom Properties Link
3 Animations and Transitions Link
4 Best Practices and Organization Link

レスポンシブデザインの原則

今日のマルチデバイスの世界では、レスポンシブ デザインはオプションではなく、不可欠です。あなたのウェブサイトは、スマートフォンで見ても、デスクトップの大きなモニターで見ても、見栄えが良くなければなりません。

メディアクエリ

メディア クエリはレスポンシブ デザインのスーパーパワーです:

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

対応ユニット

相対単位を使用すると、デザインが自然に応答性の高いものになります:

  • rem: ルート要素のフォント サイズとの相対値
  • em: 親要素のフォント サイズを基準
  • vw/vh: ビューポートの寸法を基準
  • %: 親要素のサイズに対する相対値

実践演習: レスポンシブ サービス セクション

メディア クエリと柔軟なユニットを使用して、さまざまな画面サイズにシームレスに適応する応答性の高いサービス セクションを作成します。

HTML:

<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

CSS: サービス セクションのより具体的なブレークポイントを見てみましょう。

/* Base styles - Mobile First (320px and up) */
.services {
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.service-card {
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* Smooth transitions for responsive changes */
}

button {
    width: 100%;
    padding: 8px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* Small phones (375px and up) */
@media (min-width: 375px) {
    .services {
        padding: 20px;
    }

    .service-card {
        padding: 20px;
    }
}

/* Large phones (480px and up) */
@media (min-width: 480px) {
    .services-container {
        gap: 20px;
    }

    button {
        padding: 10px;
        font-size: 16px;
    }
}

/* Small tablets (600px and up) */
@media (min-width: 600px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 10px); /* Two cards per row with gap consideration */
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .services {
        padding: 30px;
    }

    .service-card {
        padding: 25px; /* Improved spacing for larger screens */
    }

    button: hover {
        /* Add hover effect for non-touch devices */
        background: #0056b3;
        transform: translateY(-2px);
    }
}

/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
    .service-card {
        flex: 1; /* Three cards per row */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add subtle hover effect */
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    button {
        /* Change to inline button */
        width: auto;
        padding: 10px 20px;
    }
}

/* Desktops (1200px and up) */
@media (min-width: 1200px) {
    .services {
        padding: 40px;
    }

    .services-container {
        gap: 30px;
    }

    .service-card {
        padding: 30px;
    }
}

/* Extra large screens (1440px and up) */
@media (min-width: 1440px) {
    .services {
        max-width: 1400px; /* Max width to maintain readability */
    }

    .service-card {
        padding: 35px; /* Larger padding for extra large screens */
    }
}

/* Print styles */
@media print {
    .services {
        padding: 0;
    }

    .service-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    button {
        display: none;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    button {
        transition: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .service-card {
        background: #2a2a2a;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    h2 {
        color: #fff;
    }
}
ログイン後にコピー
ログイン後にコピー

参考文献:

  • MDN Web ドキュメント - レスポンシブ デザインの基礎 - ビューポート、ブレークポイント、柔軟なレイアウトをカバーする、レスポンシブ デザインの概念への優れた入門書です。
  • FreeCodeCamp - レスポンシブ Web デザイン認定資格 - レスポンシブ デザインの原則、グリッド、メディア クエリ、アクセシビリティをカバーする完全なコース。
  • 使用できますか - メディア クエリやフレックスボックスなどのレスポンシブ デザイン機能に対するブラウザの互換性を確認します。
  • レスポンシブ デザインのチートシート - レスポンシブ デザインの主要なプロパティとテクニックを理解しやすい形式でカバーしています。

CSS 変数とカスタム プロパティ

CSS 変数 (カスタム プロパティ) は、スタイルシートにプログラミングのような柔軟性をもたらします。メンテナンスが容易になり、ダイナミックなスタイリングが可能になります。

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --spacing-unit: 1rem;
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing-unit);
}
ログイン後にコピー
ログイン後にコピー

実践的な演習: テーマと再利用性のための CSS 変数

<body>
    <header>
        <h1>CSS Variables & Custom Properties</h1>
    </header>

    <main>
        <section>





<pre class="brush:php;toolbar:false">/* Define CSS variables (custom properties) in the :root selector */
        :root {
            --primary-color: #3498db; /* Main theme color */
            --secondary-color: #2ecc71; /* Accent color */
            --text-color: #333; /* Default text color */
            --font-size: 16px; /* Base font size */
            --padding: 10px; /* Base padding */
        }

        /* General styles using variables */
        body {
            font-family: Arial, sans-serif;
            font-size: var(--font-size);
            color: var(--text-color);
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }

        header {
            background-color: var(--primary-color);
            color: white;
            text-align: center;
            padding: var(--padding);
        }

        .card {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin: 20px;
            padding: var(--padding);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .card h2 {
            color: var(--primary-color);
        }

        .card p {
            color: var(--text-color);
        }

        button {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            border-radius: 5px;
            padding: calc(var(--padding) / 2) calc(var(--padding) * 2);
            cursor: pointer;
            font-size: var(--font-size);
        }

        button:hover {
            background-color: var(--primary-color);
        }

        /* Dark mode example by overriding variables */
        body.dark-mode {
            --primary-color: #1abc9c;
            --secondary-color: #e74c3c;
            --text-color: #f9f9f9;
            background-color: #333;
        }
ログイン後にコピー

参考文献:

  • MDN Web ドキュメント - CSS カスタム プロパティ (変数) の使用 - CSS 変数の定義、使用、更新に関する例を示した、初心者向けの徹底した説明です。
  • W3Schools - CSS 変数 - 簡単な練習用のライブ コード例を使用して CSS 変数の基本をカバーします。
  • CSS のトリック - カスタム プロパティの完全ガイド - 実際の使用例と高度な変数の使用に関するヒントを紹介する包括的なガイドです。
  • Freecodecamp - CSS 変数フル ハンドブック - カスケード効果、メディア クエリベースの変数、スコープ管理などの強力なテクニックを探ります。

アニメーションとトランジション

Web サイトに動きを加えると、魅力的なユーザー エクスペリエンスが生まれます。 CSS では、アニメーションを作成する主な方法が 2 つあります:

トランジション

単純な状態変更に最適:

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

キーフレームアニメーション

より複雑な複数ステップのアニメーションの場合:

<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

高度なアニメーション技術

アニメーションの CSS カスタム プロパティ:

/* Base styles - Mobile First (320px and up) */
.services {
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.service-card {
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* Smooth transitions for responsive changes */
}

button {
    width: 100%;
    padding: 8px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* Small phones (375px and up) */
@media (min-width: 375px) {
    .services {
        padding: 20px;
    }

    .service-card {
        padding: 20px;
    }
}

/* Large phones (480px and up) */
@media (min-width: 480px) {
    .services-container {
        gap: 20px;
    }

    button {
        padding: 10px;
        font-size: 16px;
    }
}

/* Small tablets (600px and up) */
@media (min-width: 600px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 10px); /* Two cards per row with gap consideration */
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .services {
        padding: 30px;
    }

    .service-card {
        padding: 25px; /* Improved spacing for larger screens */
    }

    button: hover {
        /* Add hover effect for non-touch devices */
        background: #0056b3;
        transform: translateY(-2px);
    }
}

/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
    .service-card {
        flex: 1; /* Three cards per row */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add subtle hover effect */
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    button {
        /* Change to inline button */
        width: auto;
        padding: 10px 20px;
    }
}

/* Desktops (1200px and up) */
@media (min-width: 1200px) {
    .services {
        padding: 40px;
    }

    .services-container {
        gap: 30px;
    }

    .service-card {
        padding: 30px;
    }
}

/* Extra large screens (1440px and up) */
@media (min-width: 1440px) {
    .services {
        max-width: 1400px; /* Max width to maintain readability */
    }

    .service-card {
        padding: 35px; /* Larger padding for extra large screens */
    }
}

/* Print styles */
@media print {
    .services {
        padding: 0;
    }

    .service-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    button {
        display: none;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    button {
        transition: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .service-card {
        background: #2a2a2a;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    h2 {
        color: #fff;
    }
}
ログイン後にコピー
ログイン後にコピー

高度なキーフレーム アニメーション:

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --spacing-unit: 1rem;
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing-unit);
}
ログイン後にコピー
ログイン後にコピー

実践演習: インタラクティブカード

ホバー効果のあるインタラクティブなカードを作成します:

HTML:

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

参考文献:

  • MDN Web ドキュメント - CSS トランジション - CSS トランジションの明確な入門書であり、スタイルを変更するときにスムーズな効果を作成する方法を説明しています。
  • MDN Web ドキュメント - CSS アニメーション - キーフレーム、アニメーション プロパティ、複雑なアニメーションの作成に関するステップバイステップ ガイド。
  • W3Schools - CSS トランジション - トランジションとアニメーションをインタラクティブに練習できるライブ コード エディターを備えた初心者向け。
  • W3Schools - CSS アニメーション - キーフレームとトランジションを使用して Web サイトにアニメーションを追加するためのわかりやすいガイドです。
  • CSS トリック - アニメーション - 応答性の高いアニメーション、アクセシビリティのためのモーションの削減、メディア クエリの統合について説明します。
  • Animate.css - プロジェクトに簡単に追加できる、事前に構築されたアニメーションを提供する人気の CSS ライブラリです。

ベストプラクティスと組織

CSS アーキテクチャ

  • 一貫した命名規則を使用する
  • コンポーネント/機能ごとに CSS ファイルを整理します
  • 可能な限り特異性を低く保ちます
  • コードを効果的にコメント化する
<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

実践的な演習: CSS アーキテクチャのベスト プラクティス

<!DOCTYPE html>
<html lang="ja">

    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=device-width、initial-scale=1.0">
    <title>CSS アーキテクチャ演習</title>
    <リンク rel="スタイルシート" href="styles/reset.css"> <!-- デフォルトのブラウザスタイルをリセットします -->
    <リンク rel="スタイルシート" href="styles/layout.css"> <!-- レイアウト関連のスタイル -->
    <リンク rel="スタイルシート" href="styles/components/header.css"> <!-- ヘッダーコンポーネントのスタイル -->
    <リンク rel="スタイルシート" href="styles/components/card.css"> <!-- カード コンポーネント スタイル -->
    <リンク rel="スタイルシート" href="styles/utilities.css"> <!-- クイックフィックス用のユーティリティ クラス -->
</head>

    



<h3>
  
  
  参考文献:
</h3>

ログイン後にコピー
  • BEM - Block Element Modifier - CSS クラスに名前を付け、スタイルを構築して再利用性と保守性を向上させるための一般的な方法論。
  • SMACSS - CSS のスケーラブルなモジュラー アーキテクチャ - CSS を論理的で保守可能なカテゴリに編成するための詳細なフレームワーク。
  • CSS ガイドライン (Harry Roberts 著) - 論理ファイル構造と命名規則を備えた、スケーラブルで保守可能な CSS を作成するための高品質なガイド。

構築する時間です! ?

今度はあなたが学んだことを実践する番です!あなたの課題は次のとおりです:

  • 新しい CodePen を作成します (codepen.io で無料です)
  • これまでに取り上げた例と演習を構築します
  • あなたの作品を共有してください! 以下のコメントに CodePen のリンクをドロップしてください

ボーナスポイント: デザインに独自のクリエイティブなひねりを加えましょう!コメントで共有されたすべての CodePen を個人的に確認して返信します。

? プロのヒント: 自分の考えを説明するために、CSS にコメントを忘れずに追加してください。他の人があなたのコードから学ぶのに役立ちます!


次は何ですか? ?

これは CSS Zero to Hero シリーズのパート 2 です。今後の投稿では、さらにエキサイティングな CSS の概念をさらに詳しく掘り下げていきます。お見逃しのないようにご注意ください:

  1. ? この投稿をブックマークすると、コーディング時にすぐに参照できます
  2. ❤️ 役に立ったと思ったら、この記事にいいね! (他の人も見つけやすくなります!)
  3. ? フォローしてください シリーズの次の部分をご覧ください

つながろう! ?

エクササイズは試しましたか?ご質問がありますか?コメントであなたの経験を共有してください!私はすべてのコメントに返信し、あなたの進歩を見るのが大好きです。

パート 3 でお会いしましょう!コーディングを楽しんでください! ?‍??‍?

以上が誰でも使える決定版 CSS ガイドで CSS をマスターする |パート2の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート