34 KiB

Raw Blame History Unescape Escape

テラリウムプロジェクトパート2: CSS入門

journey
    title Your CSS Styling Journey
    section Foundation
      Link CSS file: 3: Student
      Understand cascade: 4: Student
      Learn inheritance: 4: Student
    section Selectors
      Element targeting: 4: Student
      Class patterns: 5: Student
      ID specificity: 5: Student
    section Layout
      Position elements: 4: Student
      Create containers: 5: Student
      Build terrarium: 5: Student
    section Polish
      Add visual effects: 5: Student
      Responsive design: 5: Student
      Glass reflections: 5: Student

スケッチノート: Tomomi Imura

HTMLで作ったテラリウムが少しシンプルすぎると感じませんでしたか？CSSを使えば、その基本的な構造を視覚的に魅力的なものに変えることができます。

HTMLが家の骨組みを作るようなものだとしたら、CSSはその家を「住み心地の良い家」にするためのすべてです。ペンキの色、家具の配置、照明、部屋の流れなどを整える役割を果たします。ヴェルサイユ宮殿が最初はシンプルな狩猟用ロッジだったのが、装飾やレイアウトに細心の注意を払うことで世界で最も壮麗な建物の一つに変わったことを思い出してください。

今日は、あなたのテラリウムを機能的なものから洗練されたものへと変えていきます。要素を正確に配置し、レイアウトを異なる画面サイズに対応させ、ウェブサイトを魅力的にする視覚的な魅力を作り出す方法を学びます。

このレッスンの終わりには、戦略的なCSSスタイリングがプロジェクトを劇的に改善する方法がわかるでしょう。さあ、テラリウムにスタイルを加えましょう。

mindmap
  root((CSS Fundamentals))
    Cascade
      Specificity Rules
      Inheritance
      Priority Order
      Conflict Resolution
    Selectors
      Element Tags
      Classes (.class)
      IDs (#id)
      Combinators
    Box Model
      Margin
      Border
      Padding
      Content
    Layout
      Positioning
      Display Types
      Flexbox
      Grid
    Visual Effects
      Colors
      Shadows
      Transitions
      Animations
    Responsive Design
      Media Queries
      Flexible Units
      Viewport Meta
      Mobile First

レクチャー前のクイズ

CSSの基本を学ぶ

CSSは「見た目をきれいにする」だけだと思われがちですが、それ以上の役割を果たします。CSSは映画の監督のようなものです。見た目だけでなく、動き、インタラクションへの反応、さまざまな状況への適応をコントロールします。

現代のCSSは非常に高機能です。スマートフォン、タブレット、デスクトップコンピュータに合わせてレイアウトを自動調整するコードを書くことができます。スムーズなアニメーションを作成して、必要な場所にユーザーの注意を引きつけることも可能です。すべてがうまく連携すると、その結果は非常に印象的なものになります。

💡 プロのヒント: CSSは常に新しい機能や能力を進化させています。最新のCSS機能を使用する前に、CanIUse.comでブラウザの対応状況を確認してください。

このレッスンで達成すること:

モダンなCSS技術を使ってテラリウムの完全な視覚デザインを作成
カスケード、継承、CSSセレクタなどの基本概念を探求
レスポンシブな位置決めとレイアウト戦略を実装
CSSの形状とスタイリングを使ってテラリウムコンテナを構築

前提条件

前のレッスンでテラリウムのHTML構造を完成させ、それをスタイリングする準備ができていること。

📺 ビデオリソース: この役立つビデオウォークスルーをチェックしてください

CSSファイルの設定

スタイリングを始める前に、HTMLにCSSを接続する必要があります。この接続により、ブラウザはテラリウムのスタイリング指示がどこにあるかを認識します。

テラリウムフォルダ内に新しいファイルstyle.cssを作成し、それをHTMLドキュメントの<head>セクションにリンクします:

<link rel="stylesheet" href="./style.css" />

このコードが行うこと:

HTMLとCSSファイル間の接続を作成
ブラウザにstyle.cssからスタイルを読み込んで適用するよう指示
rel="stylesheet"属性を使用してCSSファイルであることを指定
href="./style.css"でファイルパスを参照

CSSカスケードの理解

CSSが「カスケーディング」スタイルシートと呼ばれる理由を考えたことはありますか？スタイルは滝のように下に流れ落ち、時には互いに衝突することもあります。

軍隊の指揮構造を考えてみてください。例えば、将軍の命令で「全兵士は緑の服を着る」と言われたとしても、特定の部隊には「式典のために青い礼服を着る」という命令が出されるかもしれません。より具体的な指示が優先されます。CSSも同様の論理に従い、この階層を理解することでデバッグがはるかに簡単になります。

カスケード優先度の実験

スタイルの衝突を作成してカスケードを確認してみましょう。まず、<h1>タグにインラインスタイルを追加します:

<h1 style="color: red">My Terrarium</h1>

このコードが行うこと:

インラインスタイリングを使用して<h1>要素に直接赤色を適用
style属性を使用してCSSをHTMLに直接埋め込む
この特定の要素に対して最も高い優先度のスタイルルールを作成

次に、style.cssファイルにこのルールを追加します:

h1 {
  color: blue;
}

上記で行ったこと:

すべての<h1>要素をターゲットにするCSSルールを定義
外部スタイルシートを使用してテキストカラーを青に設定
インラインスタイルよりも低い優先度のルールを作成

✅ 知識チェック: あなたのウェブアプリではどの色が表示されますか？なぜその色が優先されるのでしょうか？スタイルを上書きしたいシナリオを考えることができますか？

flowchart TD
    A["Browser encounters h1 element"] --> B{"Check for inline styles"}
    B -->|Found| C["style='color: red'"] 
    B -->|None| D{"Check for ID rules"}
    C --> E["Apply red color (1000 points)"]
    D -->|Found| F["#heading { color: green }"]
    D -->|None| G{"Check for class rules"}
    F --> H["Apply green color (100 points)"]
    G -->|Found| I[".title { color: blue }"]
    G -->|None| J{"Check element rules"}
    I --> K["Apply blue color (10 points)"]
    J -->|Found| L["h1 { color: purple }"]
    J -->|None| M["Use browser default"]
    L --> N["Apply purple color (1 point)"]
    
    style C fill:#ff6b6b
    style F fill:#51cf66
    style I fill:#339af0
    style L fill:#9775fa

💡 CSSの優先順位順（高い順から低い順）:

インラインスタイル（style属性）

ID（#myId）

クラス（.myClass）と属性

要素セレクタ（h1, div, p）

ブラウザのデフォルト

CSSの継承を理解する

CSSの継承は遺伝学のようなものです。要素は親要素から特定のプロパティを継承します。例えば、body要素にフォントファミリーを設定すると、その中のすべてのテキストが自動的に同じフォントを使用します。それは、ハプスブルク家の特徴的な顎のラインが、各個人に特別に指定されなくても世代を超えて現れるのと似ています。

ただし、すべてが継承されるわけではありません。フォントや色などのテキストスタイルは継承されますが、マージンやボーダーなどのレイアウトプロパティは継承されません。子供が親の身体的特徴を継承する一方で、親のファッションセンスを継承しないのと同じです。

フォント継承の観察

<body>要素にフォントファミリーを設定して継承を確認してみましょう:

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

ここで起こることを分解すると:

<body>要素をターゲットにしてページ全体のフォントファミリーを設定
フォールバックオプションを含むフォントスタックを使用してブラウザ互換性を向上
異なるオペレーティングシステムで見栄えの良いモダンなシステムフォントを適用
特別に上書きされない限り、すべての子要素がこのフォントを継承

ブラウザの開発者ツール（F12）を開き、Elementsタブに移動して<h1>要素を検査してください。bodyからフォントファミリーを継承していることがわかります:

✅ 実験タイム: <body>にcolor、line-height、text-alignなどの他の継承可能なプロパティを設定してみてください。見出しや他の要素に何が起こるでしょうか？

📝 継承可能なプロパティ例: color, font-family, font-size, line-height, text-align, visibility

継承されないプロパティ例: margin, padding, border, width, height, position

🔄 教育的チェックイン

CSS基礎の理解: セレクタに進む前に以下を確認してください:

✅ カスケードと継承の違いを説明できる
✅ 特異性の衝突でどのスタイルが勝つか予測できる
✅ 親要素から継承されるプロパティを特定できる
✅ CSSファイルをHTMLに正しく接続できる

簡単なテスト: 以下のスタイルがある場合、<div class="special">内の<h1>の色は何色になりますか？

div { color: blue; }
.special { color: green; }
h1 { color: red; }

答え: 赤（要素セレクタが直接h1をターゲットにしているため）

CSSセレクタの習得

CSSセレクタは特定の要素をターゲットにしてスタイリングする方法です。それは正確な指示を与えるようなものです。「家」と言う代わりに、「メープルストリートの赤いドアの青い家」と言うようなものです。

CSSはさまざまな方法で特定の要素を指定することができ、適切なセレクタを選ぶことはタスクに適したツールを選ぶことと似ています。時には近所のすべてのドアをスタイリングする必要があり、時には特定のドアだけをスタイリングする必要があります。

要素セレクタ（タグ）

要素セレクタはタグ名でHTML要素をターゲットにします。ページ全体に広く適用される基本スタイルを設定するのに最適です:

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  color: #3a241d;
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

これらのスタイルの理解:

bodyセレクタでページ全体のタイポグラフィを一貫して設定
ブラウザのデフォルトのマージンとパディングを削除してコントロールを向上
すべての見出し要素を色、配置、間隔でスタイリング
スケーラブルでアクセシブルなフォントサイズのためにrem単位を使用

要素セレクタは一般的なスタイリングには適していますが、テラリウム内の植物のような個々のコンポーネントをスタイリングするには、より具体的なセレクタが必要です。

ユニークな要素のためのIDセレクタ

IDセレクタは#記号を使用し、特定のid属性を持つ要素をターゲットにします。IDはページ内で一意である必要があるため、テラリウムの左右の植物コンテナのような個々の特別な要素をスタイリングするのに最適です。

テラリウムの植物が配置されるサイドコンテナのスタイリングを作成しましょう:

#left-container {
  background-color: #f5f5f5;
  width: 15%;
  left: 0;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

#right-container {
  background-color: #f5f5f5;
  width: 15%;
  right: 0;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

このコードが達成すること:

absolute位置決めを使用してコンテナを画面の左端と右端に配置
画面サイズに適応するレスポンシブな高さのためにvh（ビューポート高さ）単位を使用
box-sizing: border-boxを適用してパディングを全幅に含める
ゼロ値から不要なpx単位を削除してコードをクリーンに
目に優しい微妙な背景色を設定

✅ コード品質チャレンジ: このCSSがDRY（Don't Repeat Yourself）原則に違反していることに気づきましたか？IDとクラスを組み合わせてリファクタリングできますか？

改善されたアプローチ:

<div id="left-container" class="container"></div>
<div id="right-container" class="container"></div>

.container {
  background-color: #f5f5f5;
  width: 15%;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

#left-container {
  left: 0;
}

#right-container {
  right: 0;
}

再利用可能なスタイルのためのクラスセレクタ

クラスセレクタは.記号を使用し、複数の要素に同じスタイルを適用するのに最適です。IDとは異なり、クラスはHTML全体で再利用可能であり、一貫したスタイリングパターンに理想的です。

テラリウムでは、各植物に似たスタイリングが必要ですが、個々の位置決めも必要です。クラスを共有スタイルに、IDをユニークな位置決めとJavaScriptのインタラクションに使用します。

各植物のHTML構造:

<div class="plant-holder">
  <img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.ja.png" />
</div>

重要な要素の説明:

すべての植物コンテナに一貫したスタイリングを適用するためにclass="plant-holder"を使用
共有画像スタイリングと動作のためにclass="plant"を適用
個々の位置決めとJavaScriptのインタラクションのためにユニークなid="plant1"を含む
スクリーンリーダーのアクセシビリティのために説明的なaltテキストを提供

次に、これらのスタイルをstyle.cssファイルに追加します:

.plant-holder {
  position: relative;
  height: 13%;
  left: -0.6rem;
}

.plant {
  position: absolute;
  max-width: 150%;
  max-height: 150%;
  z-index: 2;
  transition: transform 0.3s ease;
}

.plant:hover {
  transform: scale(1.05);
}

これらのスタイルの分解:

植物ホルダーに相対位置決めを作成して位置決めコンテキストを確立
すべての植物ホルダーを高さ13%に設定し、すべての植物が垂直方向に収まるようにする
ホルダーを少し左にシフトして植物をコンテナ内でより中央に配置
max-widthとmax-heightプロパティを使用して植物がレスポンシブにスケールするようにする
植物をテラリウム内の他の要素の上にレイヤー化するためにz-indexを使用
CSSトランジションを使用して微妙なホバー効果を追加し、ユーザーインタラクションを向上

✅ クリティカルシンキング: なぜ.plant-holderと.plantセレクタの両方が必要なのでしょうか？1つだけを使用しようとした場合、何が起こるでしょうか？

💡 デザインパターン: コンテナ（.plant-holder）はレイアウトと位置決めを制御し、コンテンツ（.plant）は外観とスケーリングを制御します。この分離により、コードがより保守可能で柔軟になります。

CSS位置決めの理解

CSS位置決めは舞台監督のようなものです。すべての役者がどこに立ち、舞台上でどのように動くかを指示します。標準的な配置に従う役者もいれば、劇的な効果のために特定の位置決めが必要な役者もいます。

位置決めを理解すると、多くのレイアウトの課題が管理可能になります。スクロール中に常に上部に留まるナビゲーションバーが必要ですか？位置決めがそれを解決します。特定の場所に表示されるツールチップが必要ですか？それも位置決めで可能です。

5つの位置値

quadrantChart
    title CSS Positioning Strategy
    x-axis Document Flow --> Removed from Flow
    y-axis Static Position --> Precise Control
    quadrant-1 Absolute
    quadrant-2 Fixed
    quadrant-3 Static
    quadrant-4 Sticky
    
    Static: [0.2, 0.2]
    Relative: [0.3, 0.6]
    Absolute: [0.8, 0.8]
    Fixed: [0.9, 0.7]
    Sticky: [0.5, 0.9]

位置値	動作	使用例
`static`	デフォルトのフロー、top/left/right/bottomを無視	通常のドキュメントレイアウト
`relative`	通常の位置に対して相対的に配置	小さな調整、位置決めコンテキストの作成
`absolute`	最も近い位置決めされた祖先に対して配置	正

.plant-holderがrelativeではなくabsoluteを使用すると、レイアウトがどのように変化するか？
.plantをrelativeポジショニングに切り替えると何が起こるか？

🔄 教育的チェックイン

CSSポジショニングの習得: 理解を確認するために一時停止:

✅ なぜドラッグ＆ドロップのために植物にabsoluteポジショニングが必要なのか説明できますか？
✅ 相対コンテナがポジショニングのコンテキストを作る仕組みを理解していますか？
✅ なぜサイドコンテナがabsoluteポジショニングを使用しているのか？
✅ ポジションの宣言を完全に削除した場合、何が起こるか？

現実世界との関連性: CSSポジショニングが現実世界のレイアウトをどのように反映しているか考えてみましょう:

Static: 棚の上の本（自然な順序）
Relative: 本を少し動かして元の位置を維持する
Absolute: 特定のページ番号にしおりを置く
Fixed: ページをめくっても見える位置に貼られた付箋

CSSでテラリウムを作る

ここでは、画像やグラフィックソフトを使わずにCSSだけでガラス瓶を作ります。

ポジショニングや透明度を使ってリアルなガラス、影、奥行き効果を作ることは、CSSの視覚的な能力を示しています。この技術は、バウハウス運動の建築家がシンプルな幾何学的形状を使って複雑で美しい構造を作った方法に似ています。これらの原則を理解すれば、多くのウェブデザインに隠されたCSS技術を認識できるようになります。

flowchart LR
    A[Jar Top] --> E[Complete Terrarium]
    B[Jar Walls] --> E
    C[Dirt Layer] --> E
    D[Jar Bottom] --> E
    F[Glass Effects] --> E
    
    A1["50% width<br/>5% height<br/>Top position"] --> A
    B1["60% width<br/>80% height<br/>Rounded corners<br/>0.5 opacity"] --> B
    C1["60% width<br/>5% height<br/>Dark brown<br/>Bottom layer"] --> C
    D1["50% width<br/>1% height<br/>Bottom position"] --> D
    F1["Subtle shadows<br/>Transparency<br/>Z-index layering"] --> F
    
    style E fill:#d1e1df,stroke:#3a241d
    style A fill:#e8f5e8
    style B fill:#e8f5e8
    style C fill:#8B4513
    style D fill:#e8f5e8

ガラス瓶の構成要素を作る

テラリウム瓶を一つ一つのパーツに分けて作りましょう。各パーツは絶対位置指定とパーセンテージベースのサイズを使用してレスポンシブデザインを実現します:

.jar-walls {
  height: 80%;
  width: 60%;
  background: #d1e1df;
  border-radius: 1rem;
  position: absolute;
  bottom: 0.5%;
  left: 20%;
  opacity: 0.5;
  z-index: 1;
  box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}

.jar-top {
  width: 50%;
  height: 5%;
  background: #d1e1df;
  position: absolute;
  bottom: 80.5%;
  left: 25%;
  opacity: 0.7;
  z-index: 1;
  border-radius: 0.5rem 0.5rem 0 0;
}

.jar-bottom {
  width: 50%;
  height: 1%;
  background: #d1e1df;
  position: absolute;
  bottom: 0;
  left: 25%;
  opacity: 0.7;
  border-radius: 0 0 0.5rem 0.5rem;
}

.dirt {
  width: 60%;
  height: 5%;
  background: #3a241d;
  position: absolute;
  border-radius: 0 0 1rem 1rem;
  bottom: 1%;
  left: 20%;
  opacity: 0.7;
  z-index: -1;
}

テラリウムの構造を理解する:

使用パーセンテージベースの寸法で、すべての画面サイズに対応するレスポンシブスケーリング
配置要素を絶対位置指定して正確に積み重ねて整列
適用異なる透明度値でガラスの透明効果を作成
実装 z-indexを使って植物が瓶の中に見えるようにレイヤリング
追加微妙なボックスシャドウと洗練されたボーダー半径でリアルな外観を実現

パーセンテージを使ったレスポンシブデザイン

すべての寸法が固定ピクセル値ではなくパーセンテージを使用していることに注目してください:

なぜ重要なのか:

保証テラリウムがどの画面サイズでも比例してスケールする
維持瓶の構成要素間の視覚的関係
提供モバイルから大型デスクトップモニターまで一貫した体験
適応視覚的レイアウトを壊すことなくデザインを調整

CSS単位の活用

ボーダー半径にはrem単位を使用しており、これはルートフォントサイズに相対的にスケールします。これにより、ユーザーのフォント設定を尊重したよりアクセシブルなデザインが可能になります。CSS相対単位について公式仕様で詳しく学びましょう。

✅ 視覚的実験: これらの値を変更して効果を観察してみましょう:

瓶の透明度を0.5から0.8に変更すると、ガラスの外観にどのような影響がありますか？
土の色を#3a241dから#8B4513に変更すると、どのような視覚的影響がありますか？
土のz-indexを2に変更すると、レイヤリングに何が起こりますか？

🔄 教育的チェックイン

CSS視覚デザインの理解: 視覚的CSSの理解を確認:

✅ パーセンテージベースの寸法がレスポンシブデザインを作る仕組みを理解していますか？
✅ 透明度がガラスの透明効果を作る理由を理解していますか？
✅ z-indexが要素のレイヤリングに果たす役割を理解していますか？
✅ ボーダー半径の値が瓶の形状を作る仕組みを理解していますか？

デザイン原則: シンプルな形状から複雑なビジュアルを構築する方法に注目してください:

長方形 → 丸みを帯びた長方形 → 瓶の構成要素
平坦な色 → 透明度 → ガラス効果
個々の要素 → レイヤー構成 → 3D外観

GitHub Copilot Agentチャレンジ 🚀

Agentモードを使用して次のチャレンジを完了してください:

説明: テラリウムの植物が自然な風の効果をシミュレートして優しく揺れるCSSアニメーションを作成します。これにより、CSSアニメーション、変形、キーフレームを練習しながら、テラリウムの視覚的魅力を向上させます。

プロンプト: テラリウム内の植物が左右に優しく揺れるようにするCSSキーフレームアニメーションを追加してください。各植物が少し（2〜3度）左右に回転する揺れアニメーションを作成し、.plantクラスに適用します。アニメーションは無限ループで、自然な動きを実現するためのイージング関数を使用してください。

agent modeについて詳しくはこちら

🚀 チャレンジ: ガラスの反射を追加する

リアルなガラスの反射を追加してテラリウムをさらに魅力的にします。この技術はデザインに深みとリアリズムを加えます。

ガラス表面に光が反射する様子をシミュレートする微妙なハイライトを作成します。このアプローチは、ルネサンスの画家ヤン・ファン・エイクが光と反射を使って描かれたガラスを三次元的に見せた方法に似ています。目指すべきものは以下の通りです:

チャレンジ内容:

作成ガラスの反射をシミュレートする微妙な白または明るい色の楕円形
配置瓶の左側に戦略的に配置
適用適切な透明度とぼかし効果でリアルな光の反射を実現
使用 border-radiusで有機的な泡のような形状を作成
実験グラデーションやボックスシャドウでリアリズムを向上

講義後のクイズ

CSS知識を広げる

CSSは最初は複雑に感じるかもしれませんが、これらの基本概念を理解することで、より高度な技術のためのしっかりとした基盤を築くことができます。

次に学ぶべきCSSの分野:

Flexbox - 要素の整列と分布を簡素化
CSS Grid - 複雑なレイアウトを作成するための強力なツール
CSS Variables - 繰り返しを減らし、保守性を向上
レスポンシブデザイン - 異なる画面サイズでサイトがうまく機能することを保証

インタラクティブな学習リソース

これらの楽しい、実践的なゲームでこれらの概念を練習してください:

🐸 Flexbox Froggy - 楽しいチャレンジでFlexboxを習得
🌱 Grid Garden - 仮想のニンジンを育てながらCSS Gridを学ぶ
🎯 CSS Battle - コーディングチャレンジでCSSスキルをテスト

追加学習

CSSの基本を包括的に学ぶには、このMicrosoft Learnモジュールを完了してください: HTMLアプリをCSSでスタイルする

⚡ 次の5分間でできること

DevToolsを開いて、Elementsパネルで任意のウェブサイトのCSSスタイルを調査
簡単なCSSファイルを作成し、HTMLページにリンク
色を変更する方法を試す: hex、RGB、名前付き色
divにパディングとマージンを追加してボックスモデルを練習

🎯 この1時間で達成できること

講義後のクイズを完了し、CSSの基本を復習
フォント、色、間隔を使ってHTMLページをスタイル
FlexboxまたはGridを使って簡単なレイアウトを作成
スムーズな効果のためにCSSトランジションを実験
メディアクエリを使ってレスポンシブデザインを練習

📅 1週間のCSS冒険

創造的な工夫を加えたテラリウムスタイリング課題を完了
CSS Gridを習得し、フォトギャラリーレイアウトを作成
CSSアニメーションを学び、デザインに命を吹き込む
SassやLessなどのCSSプリプロセッサを探求
デザイン原則を学び、それをCSSに適用
オンラインで見つけた興味深いデザインを分析し再現

🌟 1か月間のデザイン習得

完全なレスポンシブウェブサイトデザインシステムを構築
CSS-in-JSやTailwindのようなユーティリティファーストフレームワークを学ぶ
CSS改善でオープンソースプロジェクトに貢献
CSSカスタムプロパティやコンテインメントなどの高度なCSS概念を習得
モジュール式CSSを使った再利用可能なコンポーネントライブラリを作成
CSSを学ぶ他の人を指導し、デザイン知識を共有

🎯 CSS習得のタイムライン

timeline
    title CSS Learning Progression
    
    section Foundation (10 minutes)
        File Connection: Link CSS to HTML
                       : Understand cascade rules
                       : Learn inheritance basics
        
    section Selectors (15 minutes)
        Targeting Elements: Element selectors
                          : Class patterns
                          : ID specificity
                          : Combinators
        
    section Box Model (20 minutes)
        Layout Fundamentals: Margin and padding
                           : Border properties
                           : Content sizing
                           : Box-sizing behavior
        
    section Positioning (25 minutes)
        Element Placement: Static vs relative
                         : Absolute positioning
                         : Z-index layering
                         : Responsive units
        
    section Visual Design (30 minutes)
        Styling Mastery: Colors and opacity
                       : Shadows and effects
                       : Transitions
                       : Transform properties
        
    section Responsive Design (45 minutes)
        Multi-Device Support: Media queries
                            : Flexible layouts
                            : Mobile-first approach
                            : Viewport optimization
        
    section Advanced Techniques (1 week)
        Modern CSS: Flexbox layouts
                  : CSS Grid systems
                  : Custom properties
                  : Animation keyframes
        
    section Professional Skills (1 month)
        CSS Architecture: Component patterns
                        : Maintainable code
                        : Performance optimization
                        : Cross-browser compatibility

🛠️ CSSツールキットのまとめ

このレッスンを完了した後、あなたは以下を習得しました:

カスケードの理解: スタイルがどのように継承され、上書きされるか
セレクターの習得: 要素、クラス、IDを正確にターゲット
ポジショニングスキル: 要素の戦略的配置とレイヤリング
視覚デザイン: ガラス効果、影、透明度の作成
レスポンシブ技術: どの画面にも適応するパーセンテージベースのレイアウト
コードの整理: クリーンで保守可能なCSS構造
最新の実践: 相対単位とアクセシブルなデザインパターンの使用

次のステップ: あなたのテラリウムは構造（HTML）とスタイル（CSS）を備えました。最終レッスンではJavaScriptでインタラクティブ性を追加します！

課題

CSSリファクタリング

免責事項:
この文書はAI翻訳サービスCo-op Translatorを使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてご参照ください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解釈について、当社は責任を負いません。

34 KiB Raw Blame History Unescape Escape

テラリウムプロジェクト パート2: CSS入門

レクチャー前のクイズ

CSSの基本を学ぶ

前提条件

CSSファイルの設定

CSSカスケードの理解

カスケード優先度の実験

CSSの継承を理解する

フォント継承の観察

🔄 教育的チェックイン

CSSセレクタの習得

要素セレクタ（タグ）

ユニークな要素のためのIDセレクタ

再利用可能なスタイルのためのクラスセレクタ

CSS位置決めの理解

5つの位置値

🔄 教育的チェックイン

CSSでテラリウムを作る

ガラス瓶の構成要素を作る

パーセンテージを使ったレスポンシブデザイン

CSS単位の活用

🔄 教育的チェックイン

GitHub Copilot Agentチャレンジ 🚀

🚀 チャレンジ: ガラスの反射を追加する

講義後のクイズ

CSS知識を広げる

インタラクティブな学習リソース

追加学習

⚡ 次の5分間でできること

🎯 この1時間で達成できること

📅 1週間のCSS冒険

🌟 1か月間のデザイン習得

🎯 CSS習得のタイムライン

🛠️ CSSツールキットのまとめ

課題

34 KiB

Raw Blame History Unescape Escape

テラリウムプロジェクトパート2: CSS入門