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; } }
相対単位を使用すると、デザインが自然に応答性の高いものになります:
メディア クエリと柔軟なユニットを使用して、さまざまな画面サイズにシームレスに適応する応答性の高いサービス セクションを作成します。
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; } }
CSS 変数 (カスタム プロパティ) は、スタイルシートにプログラミングのような柔軟性をもたらします。メンテナンスが容易になり、ダイナミックなスタイリングが可能になります。
:root { --primary-color: #007bff; --secondary-color: #6c757d; --spacing-unit: 1rem; } .button { background-color: var(--primary-color); padding: var(--spacing-unit); }
<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; }
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; } }
<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; } }
<!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>
今度はあなたが学んだことを実践する番です!あなたの課題は次のとおりです:
ボーナスポイント: デザインに独自のクリエイティブなひねりを加えましょう!コメントで共有されたすべての CodePen を個人的に確認して返信します。
? プロのヒント: 自分の考えを説明するために、CSS にコメントを忘れずに追加してください。他の人があなたのコードから学ぶのに役立ちます!
これは CSS Zero to Hero シリーズのパート 2 です。今後の投稿では、さらにエキサイティングな CSS の概念をさらに詳しく掘り下げていきます。お見逃しのないようにご注意ください:
エクササイズは試しましたか?ご質問がありますか?コメントであなたの経験を共有してください!私はすべてのコメントに返信し、あなたの進歩を見るのが大好きです。
パート 3 でお会いしましょう!コーディングを楽しんでください! ????
以上が誰でも使える決定版 CSS ガイドで CSS をマスターする |パート2の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。