この実験では、参加者はCSSにおけるマージンスタイルの適用の基本を実践的なアプローチで探求します。この実験では、学習者がHTMLドキュメントを作成し、マージンプロパティの構文を理解し、さまざまなマージン技術を試すことをガイドします。段階的に作業することで、学生はインラインスタイルとCSSマージンプロパティを使用してHTML要素の周りの間隔を操作する方法を学びます。
この実験は、基本的なHTML5ドキュメント構造を確立して始まり、マージンスタイルのデモのキャンバスとして機能する3つの<div>要素を紹介します。参加者は順次インラインスタイルを追加し、異なるマージン値の構文を探求し、個々のマージンプロパティを適用して、要素の間隔とレイアウトデザインの制御に関する実践的な経験を得ます。
このステップでは、CSSマージンスタイルを探求するための基礎となる基本的なHTMLドキュメントを作成する方法を学びます。HTMLはWebページの構造を提供し、適切な構文を持つドキュメントを作成することはWeb開発の最初のステップです。
WebIDEを開き、~/projectディレクトリに移動します。ファイルエクスプローラで右クリックし、「新しいファイル」を選択することで、index.htmlという新しいファイルを作成します。
この実験で使用する基本的なHTML5ドキュメント構造は以下の通りです。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Margin Styles Lab</title>
</head>
<body>
<div>First Paragraph</div>
<div>Second Paragraph</div>
<div>Third Paragraph</div>
</body>
</html>このHTML構造の主要なコンポーネントを分解してみましょう。
<!DOCTYPE html>はこれがHTML5ドキュメントであることを宣言します<html>はHTMLページのルート要素です<head>はドキュメントに関するメタ情報を含みます<meta charset="UTF-8">は文字エンコーディングを指定します<meta name="viewport">は異なるデバイスでの適切なレンダリングを確保します<body>はページの可視コンテンツを含みます次のステップでマージンスタイルを示すために使用する3つの<div>要素を追加しました。
Ctrl+Sを押すか、WebIDEの保存アイコンを使用してファイルを保存します。
このステップでは、style属性を使用してHTML要素にインラインスタイルを追加する方法を学びます。インラインスタイルを使うことで、CSSを個々のHTML要素に直接適用でき、Webページにスタイルを追加するための迅速な方法となります。
前のステップでWebIDEを使って作成したindex.htmlファイルを開きます。<div>要素を変更して、マージンプロパティを示すインラインスタイルを追加します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Margin Styles Lab</title>
</head>
<body>
<div style="margin: 20px; background-color: lightblue;">
First Paragraph
</div>
<div style="margin: 30px; background-color: lightgreen;">
Second Paragraph
</div>
<div style="margin: 40px; background-color: lightsalmon;">
Third Paragraph
</div>
</body>
</html>インラインスタイルに関する要点：
style属性は直接HTML要素に追加されますmarginプロパティとbackground-colorを追加しました各<div>が異なるマージンのサイズと背景色を持つようになったことに注目してください。marginプロパティは要素の周りにスペースを作り、他の要素を押しのけます。
Ctrl+Sを押すか、WebIDEの保存アイコンを使ってファイルを保存します。
このステップでは、CSSのマージンプロパティの構文をさらに深く掘り下げ、マージンを指定するさまざまな方法を学びます。WebIDEでindex.htmlファイルを開き、さまざまなマージン構文オプションを示すように更新します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Margin Styles Lab</title>
<style>
.single-value {
margin: 20px; /* すべての辺に20px */
background-color: lightblue;
}
.two-values {
margin: 10px 30px; /* 上下10px、左右30px */
background-color: lightgreen;
}
.four-values {
margin: 5px 10px 15px 20px; /* 上、右、下、左 */
background-color: lightsalmon;
}
</style>
</head>
<body>
<div class="single-value">Single Value Margin</div>
<div class="two-values">Two Value Margin</div>
<div class="four-values">Four Value Margin</div>
</body>
</html>マージン構文の解説：
margin: 20px;
margin: 10px 30px;
margin: 5px 10px 15px 20px;
注：インラインスタイルよりも柔軟な内部の<style>タグを使用して、さまざまなマージン構文を示しています。
Ctrl+Sを押すか、WebIDEの保存アイコンを使ってファイルを保存します。
このステップでは、さまざまなマージン値がWebデザインにおいてどのような間隔効果を作り出すかを探求します。WebIDEでindex.htmlファイルを開き、ピクセル、パーセント、その他の単位を使ってマージン値を示すようにスタイルを更新します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Margin Styles Lab</title>
<style>
.pixel-margin {
margin: 20px; /* 固定ピクセルマージン */
background-color: lightblue;
border: 1px solid blue;
}
.percentage-margin {
margin: 5%; /* パーセントベースのマージン */
background-color: lightgreen;
border: 1px solid green;
}
.mixed-margin {
margin: 10px 5%; /* ピクセルとパーセントを混合 */
background-color: lightsalmon;
border: 1px solid red;
}
.container {
width: 80%;
margin: 0 auto; /* コンテナを中央に配置 */
background-color: #f0f0f0;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="pixel-margin">Pixel Margin (20px)</div>
<div class="percentage-margin">Percentage Margin (5%)</div>
<div class="mixed-margin">
Mixed Margin (10px top/bottom, 5% left/right)
</div>
</div>
</body>
</html>マージン値の種類の解説：
20px）：
5%）：
10px 5%）：
margin: 0 auto）：
0autoCtrl+Sを押すか、WebIDEの保存アイコンを使ってファイルを保存します。
このステップでは、要素の各辺の間隔を精密に制御する個々のマージンプロパティを探求します。WebIDEでindex.htmlファイルを開き、個々のマージンプロパティを示すようにスタイルを更新します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Individual Margin Properties</title>
<style>
.box {
width: 200px;
background-color: lightblue;
border: 2px solid blue;
margin-top: 20px; /* 上のマージン */
margin-right: 30px; /* 右のマージン */
margin-bottom: 40px; /* 下のマージン */
margin-left: 50px; /* 左のマージン */
padding: 10px;
}
.individual-margins {
display: flex;
justify-content: space-between;
}
.margin-example {
width: 100px;
height: 100px;
background-color: lightgreen;
margin-top: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="individual-margins">
<div class="box">Margin on All Sides</div>
<div class="margin-example">Vertical Margins</div>
</div>
</body>
</html>個々のマージンプロパティの解説：
margin-top：上のマージンを制御します。
margin-right：右のマージンを制御します。
margin-bottom：下のマージンを制御します。
margin-left：左のマージンを制御します。
重要な観察結果：
ヒント：個々のマージンプロパティは、ショートハンドのmarginプロパティと比較して、より細かい制御を提供し、特定の辺を独立して調整できます。
Ctrl+Sを押すか、WebIDEの保存アイコンを使ってファイルを保存します。
この実験では、参加者はHTMLドキュメントを作成し、さまざまなスタイリング技術を探求することで、CSSマージンスタイルを適用する基本を学びます。この実験は、基本的なHTML5構造を構築することから始まり、<!DOCTYPE html>、<head>、<body>などの必須要素を紹介し、マージンプロパティを示すために3つの<div>要素を作成します。
学習プロセスは、style属性を使用してHTML要素に直接インラインスタイルを追加することで続けられます。これは、要素の周りの間隔を制御するためにマージンをどのように適用するかを理解するための実践的なアプローチを提供します。参加者は、さまざまなマージン構文を試し、個々のマージンプロパティを探求し、さまざまなマージン値を適用して、CSSスタイリング技術の実践的な経験を得ます。
