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

美しくデザインされた Web サイトを見て、「どうやって作ったんだろう?」と疑問に思ったことはありませんか?さて、あなたは CSS の初心者からスタイリングのスーパーヒーローに変わる旅に出ようとしています。

CSS を Web 世界のファッション デザイナーとして考えてください。HTML が構造を提供する一方で、CSS は見た目を素晴らしいものにします。

目次

No.	Section	Link
1	Understanding CSS Fundamentals	Understanding CSS Fundamentals
2	Selectors and Specificity	Selectors and Specificity
3	The Box Model Explained	The Box Model Explained
4	Flexbox: Layout Made Easy	Flexbox: Layout Made Easy
5	CSS Grid: Two-Dimensional Layouts	CSS Grid: Two-Dimensional Layouts

---

CSS の基礎を理解する

基本から始めましょう。 CSS (Cascading Style Sheets) は、Web に命を吹き込む言語です。画家のパレットのように、Web ページに色、形、視覚効果を追加するツールを提供します。

構文の基本

基本的な CSS 構文は次のもので構成されます:

• セレクター: ターゲット HTML 要素
• プロパティ: スタイルを設定する内容を指定します
• 値: スタイルの設定方法を定義します

selector {
    property: value;
}

CSS を含める方法

HTML に CSS を追加するには 3 つの方法があります:

• インライン CSS: HTML 要素内で直接
• 内部 CSS:
• 外部 CSS: 別の .css ファイル内 (推奨)

実践的な演習: ブログ投稿のスタイルを設定する

基本的な CSS を練習するには、この実践演習を試してください:

<!-- HTML Structure -->
<article>





<pre class="brush:php;toolbar:false">/* Your task: Style this blog post */
.blog-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Arial', sans-serif;
}

.title {
    color: #2c3e50;
    border-bottom: 2px solid #eee;
}

.meta {
    color: #666;
    font-style: italic;
}

.content p {
    line-height: 1.6;
    margin-bottom: 1.5em;
}

---

セレクターと特異性

セレクターを理解することは、適切な要素をターゲットにするために非常に重要です。セレクターは、スタイル設定のための GPS 座標と考えてください。セレクターは、変更したい適切な要素に正確に移動するのに役立ちます。

高度なセレクターの例

/* Attribute selector with partial match */
[class*="btn-"] {
    padding: 10px 20px;
    border-radius: 4px;
}

/* Nth-child selections */
li:nth-child(odd) {
    background-color: #f5f5f5;
}

/* Combining multiple selectors */
input[type="text"]:focus,
input[type="email"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0,123,255,0.5);
}

実践的な演習: 特異性チャレンジ

さまざまな状態と具体性レベルを持つナビゲーション メニューを作成します:

<nav>





<pre class="brush:php;toolbar:false">/* Challenge: Style these with increasing specificity */
.nav-link { /* Base styles */ }
.nav-item .nav-link { /* More specific */ }
#main-nav .nav-list .nav-item .nav-link { /* Most specific */ }

参考文献:

• MDN Web ドキュメント - CSS 構文とセレクター - CSS 構文、構造、ルールをわかりやすく紹介します。
• W3Schools CSS Basic - テストと練習のための簡単な例とライブ コード エディターを備えた視覚的な学習者に最適です。
• CSS Diner - CSS セレクターを学ぶための楽しくてインタラクティブなゲーム。

---

ボックスモデルの説明

Web デザインのすべての要素は CSS ボックス モデルに従います。CSS ボックス モデルは、要素がページ上のスペースを占める方法の青写真と考えてください。物理的なパッケージにコンテンツ、パディング、外箱があるのと同じように、Web 要素も同じ原則に従います。

ボックスモデルのコンポーネント

• コンテンツ: 要素
の実際のコンテンツ領域
• パディング: コンテンツと境界線の間のスペース
• 境界線: パディング
を囲む線
• マージン: 要素間のスペース

.box {
    width: 300px;
    padding: 20px;
    border: 2px solid #333;
    margin: 10px;
}

ボックス サイズ設定プロパティ

デフォルトでは、要素の幅/高さにパディングとボーダーが追加されます。 box-sizing: border-box を使用すると、幅/高さにパディングとボーダーが含まれるようになり、多くの場合、より直感的になります:

selector {
    property: value;
}

ボックスモデルの例: テキストカード

<!-- HTML Structure -->
<article>





<pre class="brush:php;toolbar:false">/* Your task: Style this blog post */
.blog-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Arial', sans-serif;
}

.title {
    color: #2c3e50;
    border-bottom: 2px solid #eee;
}

.meta {
    color: #666;
    font-style: italic;
}

.content p {
    line-height: 1.6;
    margin-bottom: 1.5em;
}

実践的な演習: プロファイル ボックスを作成する

/* Attribute selector with partial match */
[class*="btn-"] {
    padding: 10px 20px;
    border-radius: 4px;
}

/* Nth-child selections */
li:nth-child(odd) {
    background-color: #f5f5f5;
}

/* Combining multiple selectors */
input[type="text"]:focus,
input[type="email"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0,123,255,0.5);
}

参考文献:

• MDN Web Docs - CSS ボックス モデル - ボックス モデルの図による説明。マージン、境界線、パディング、コンテンツをカバーします。
• W3Schools - CSS ボックス モデル - シンプルなビジュアルで初心者に優しい。
• Web 開発の簡略化 - 初心者向けのボックス モデルの短く明確な視覚的な説明。
• CSS のトリック - 実際の使用例とヒントを含む、ボックス モデルについての十分に文書化された高度な説明。

---

Flexbox: レイアウトを簡単に

Flexbox は、コンテンツを可能な限り最も効率的な方法で自動的に配置する魔法のコンテナのようなものです。最小限の労力でレスポンシブなレイアウトを作成するのに最適です。

主要なフレックスボックスのプロパティ

• display: flex: Flexbox
をアクティブ化します。
• flex-direction: 主軸 (行/列) を決定します
• justify-content: 主軸に沿って項目を配置します
• align-items: 項目を交差軸に沿って配置します
• flex-wrap: 項目を新しい行に折り返すことができるかどうかを制御します

<nav>





<pre class="brush:php;toolbar:false">/* Challenge: Style these with increasing specificity */
.nav-link { /* Base styles */ }
.nav-item .nav-link { /* More specific */ }
#main-nav .nav-list .nav-item .nav-link { /* Most specific */ }

複雑なフレックスボックスのレイアウト

.box {
    width: 300px;
    padding: 20px;
    border: 2px solid #333;
    margin: 10px;
}

実践的な演習: フレキシブル ダッシュボード

レスポンシブなダッシュボード レイアウトを作成します:

* {
    box-sizing: border-box;
}

参考文献:

• MDN Web ドキュメント - Flexbox - 明確なビジュアルと実用的な例を備えた優れた出発点です。すべてのフレックスボックスのプロパティを段階的に説明します。
• W3Schools - CSS Flexbox - ライブ デモとフレックスボックス プロパティのわかりやすい説明を含む簡潔なガイド。
• Flexbox Froggy - カエルをスイレンの葉に誘導して、フレックスボックスの概念を練習する楽しくインタラクティブなゲームです。
• CSS トリック - フレックスボックス完全ガイド - 最も広く参照されているガイドの 1 つで、フレックスボックスのすべてのプロパティに関するインタラクティブなビジュアルチートシートを備えています。
• FreeCodeCamp - Flexbox フルガイド - プロパティから実際のアプリケーションまで、初心者向けに Flexbox を徹底解説します。
• Smashing Magazine - Flexbox を理解する - レスポンシブ デザインの配置、順序、実践例など、Flexbox について詳しく説明します。
• Flexbox Playground - インタラクティブな環境で Flexbox プロパティを試してみましょう。

---

CSS グリッド: 2 次元レイアウト

CSS グリッドは、2 次元システムを提供することで、レイアウト制御を次のレベルに引き上げます。これは、要素を行と列に正確に配置できるスプレッドシートと考えてください。
グリッドの基礎

• 表示: グリッド: グリッド
をアクティブ化します
• grid-template-columns: 列のサイズを定義します
• grid-template-rows: 行サイズを定義します
• gap: グリッド項目間の間隔を設定します

selector {
    property: value;
}

高度な CSS グリッドテクニック

CSS グリッド テンプレート領域を使用すると、グリッド コンテナー内に名前付きグリッド領域を定義できるため、わかりやすい名前を使用して要素を特定の領域に割り当てることで、複雑なレイアウトを簡単に作成できます。

<!-- HTML Structure -->
<article>





<pre class="brush:php;toolbar:false">/* Your task: Style this blog post */
.blog-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Arial', sans-serif;
}

.title {
    color: #2c3e50;
    border-bottom: 2px solid #eee;
}

.meta {
    color: #666;
    font-style: italic;
}

.content p {
    line-height: 1.6;
    margin-bottom: 1.5em;
}

実践演習 #4: 雑誌のレイアウト

CSS グリッドを使用して雑誌スタイルのレイアウトを作成します:

/* Attribute selector with partial match */
[class*="btn-"] {
    padding: 10px 20px;
    border-radius: 4px;
}

/* Nth-child selections */
li:nth-child(odd) {
    background-color: #f5f5f5;
}

/* Combining multiple selectors */
input[type="text"]:focus,
input[type="email"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0,123,255,0.5);
}

参考文献:

• MDN Web ドキュメント - CSS グリッド - CSS グリッドの基本概念を説明する初心者向けガイド。
• W3Schools - CSS グリッド レイアウト - グリッドの概念を練習するための、インタラクティブなコード エディターを備えたシンプルでわかりやすい例。
• Grid Garden - CSS グリッド プロパティを練習して庭を育てる、楽しくて魅力的なゲームです。
• CSS トリック - グリッドの完全ガイド - すべての CSS グリッド プロパティの優れた視覚的なリファレンスであり、例も含まれています。
• Kevin Powell - CSS グリッドを簡単に学ぶ - 初心者向けの CSS グリッドに関する簡単で視覚的な集中コース。
• Developedbyed - CSS Grid クラッシュ コース - CSS Grid のあらゆる側面をカバーする詳細で初心者向けのチュートリアル。
• 例によるグリッド - 各ユースケースの説明を含む実際のグリッド レイアウトの例のコレクション。

---

構築する時間です! ?

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

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

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

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

---

次は何ですか？ ?

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

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

つながろう！ ?

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

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

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