24 KiB

Raw Blame History Unescape Escape

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

スケッチノート: Tomomi Imura

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

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

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

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

レクチャー前のクイズ

CSSの基本を学ぶ

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

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

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

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

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

前提条件

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

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

CSSファイルのセットアップ

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

テラリウムフォルダ内に新しいファイル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ルールを定義
外部スタイルシートを使用してテキストの色を青に設定
インラインスタイルよりも優先度の低いルールを作成

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

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

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);
}

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

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

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

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

CSS位置指定の理解

CSS位置指定は、舞台監督のようなものです。俳優がどこに立ち、舞台上でどのように動くかを指示します。ある俳優は標準的な配置に従い、他の俳優は特定の位置指定が必要です。

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

5つの位置指定値

位置指定値	動作	使用例
`static`	デフォルトのフロー、top/left/right/bottomを無視	通常のドキュメントレイアウト
`relative`	通常の位置に対して相対的に配置	小さな調整、位置指定コンテキストの作成
`absolute`	最も近い位置指定された祖先に対して配置	正確な配置、オーバーレイ
`fixed`	ビューポートに対して配置	ナビゲーションバー、浮動要素
`sticky`	スクロールに応じてrelativeとfixedを切り替え	スクロール時に固定されるヘッダー

テラリウムでの位置指定

テラリウムでは、目的のレイアウトを作成するために位置指定タイプを戦略的に組み合わせています:

/* Container positioning */
.container {
  position: absolute; /* Removes from normal flow */
  /* ... other styles ... */
}

/* Plant holder positioning */
.plant-holder {
  position: relative; /* Creates positioning context */
  /* ... other styles ... */
}

/* Plant positioning */
.plant {
  position: absolute; /* Allows precise placement within holder */
  /* ... other styles ... */
}

位置指定戦略の理解:

絶対コンテナは通常のドキュメントフローから外れ、画面の端に固定される
相対植物ホルダーはドキュメントフロー内に留まりながら位置指定コンテキストを作成
絶対植物は相対コンテナ内で正確に配置可能
この組み合わせにより、植物が垂直方向に積み重なりながら個別に位置指定可能

🎯 なぜこれが重要か: 次のレッスンでテラリウムジャーを一つずつ組み立てていきましょう。各パーツは絶対位置指定とパーセンテージベースのサイズを使用して、レスポンシブデザインを実現します。

.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に変更 – レイヤリングに何が起こりますか？

GitHub Copilot Agent チャレンジ 🚀

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

説明: テラリウムの植物が自然な風の動きをシミュレートして、ゆっくりと揺れるアニメーションを作成します。このチャレンジでは、CSSアニメーション、トランスフォーム、キーフレームを練習しながら、テラリウムの視覚的な魅力を向上させます。

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

agent modeについて詳しく学べます。

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

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

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

チャレンジ内容:

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

講義後のクイズ

CSS知識を広げる

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

次に学ぶべきCSSの分野:

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

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

以下の楽しいゲームでこれらの概念を練習してください:

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

追加学習

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

課題

CSSリファクタリング

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

24 KiB Raw Blame History Unescape Escape

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