この実験では、学生たちは CSS の絶対配置を使って Web ページ要素のレイアウトを精密に制御する方法を学びます。この実験では、参加者に対してプロジェクト環境の設定、画像のダウンロード、HTML 構造の作成、および画像の配置を操作するための絶対配置技術の適用を通じて案内します。
参加者は、まず構造化されたプロジェクトディレクトリを作成し、HTML5 テンプレートを設定し、基本的なリセットスタイルを備えた CSS ファイルを用意します。手を動かしながらのステップを通じて、学習者は通常のドキュメントフローとは独立して要素を配置する方法を探り、CSS の絶対配置を使って複雑で動的な Web レイアウトを作成する実践的なスキルを身につけます。
このステップでは、CSS の絶対配置を学ぶためのプロジェクト環境をセットアップします。専用のプロジェクトディレクトリを作成し、実験に必要なファイルを用意します。
まず、プロジェクトディレクトリに移動して、CSS 配置プロジェクト用の新しいフォルダを作成しましょう。
cd ~/project
mkdir css-positioning-lab
cd css-positioning-lab次に、基本的なプロジェクト構造を作成します。index.html ファイルと CSS ファイルを整理するための styles ディレクトリを作成します。
mkdir styles
touch index.html styles/main.cssディレクトリ構造を確認しましょう。
tree出力例：
.
├── index.html
└── styles
└── main.cssWebIDE で index.html ファイルを開きます。CSS 配置実験のために基本的な HTML5 構造を追加します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Absolute Positioning Lab</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<!-- 次のステップでコンテンツを追加します -->
</body>
</html>同様に、styles/main.css ファイルを開き、既定のブラウザスタイルを削除するための基本的なリセットを追加します。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}これらの初期設定ステップは、CSS の絶対配置実験用のクリーンで整理された環境を作成します。次のステップでは、画像をダウンロードして配置技術の実装を始めます。
このステップでは、CSS の絶対配置を示すために使用する画像をダウンロードします。images ディレクトリを作成し、wget を使ってサンプル画像をダウンロードします。
まず、プロジェクトディレクトリに移動して画像フォルダを作成します。
cd ~/project/css-positioning-lab
mkdir images
cd images次に、いくつかのサンプル画像をダウンロードしましょう。Lorem Picsum からのプレースホルダ画像を使用します。これは、デモ用にランダムな画像を提供します。
wget https://picsum.photos/200/300?random=1 -O image1.jpg
wget https://picsum.photos/200/300?random=2 -O image2.jpg
wget https://picsum.photos/200/300?random=3 -O image3.jpgダウンロードした画像を確認しましょう。
ls -l出力例：
total 180
-rw-r--r-- 1 labex labex 59973 Jun 1 10:00 image1.jpg
-rw-r--r-- 1 labex labex 61245 Jun 1 10:00 image2.jpg
-rw-r--r-- 1 labex labex 59678 Jun 1 10:00 image3.jpgファイルサイズを確認し、3 つの異なる画像が正常にダウンロードされたことを確認します。これらの画像は、次のステップで CSS の絶対配置技術を示すために使用されます。
このステップでは、絶対配置を示すための HTML 構造を作成します。index.html ファイルを変更して、絶対配置する複数の画像を含むコンテナを追加します。
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 Absolute Positioning Lab</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<div class="positioning-container">
<div class="image-wrapper">
<img src="images/image1.jpg" alt="Image 1" class="positioned-image" />
<img src="images/image2.jpg" alt="Image 2" class="positioned-image" />
<img src="images/image3.jpg" alt="Image 3" class="positioned-image" />
</div>
</div>
</body>
</html>次に、styles/main.css ファイルを更新して、配置デモの基本的なスタイルを設定します。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.positioning-container {
width: 500px;
height: 500px;
border: 2px solid #333;
position: relative;
margin: 50px auto;
}
.image-wrapper {
width: 100%;
height: 100%;
position: relative;
}
.positioned-image {
width: 200px;
height: 300px;
border: 2px solid red;
}HTML 構造を解説しましょう。
positioning-container クラスを持つコンテナ div を作成しました。image-wrapper div があります。positioned-image クラスを持っています。CSS は基本的な設定を行っています。
position: relative を適用しています。このステップでは、CSS の絶対配置を使ってコンテナ内に画像を精密に配置する方法を学びます。絶対配置を使うと、要素を最も近い配置済みの祖先要素に対して、必要な場所に正確に配置できます。
styles/main.css ファイルを開き、画像に絶対配置を適用するように CSS を変更します。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.positioning-container {
width: 500px;
height: 500px;
border: 2px solid #333;
position: relative;
margin: 50px auto;
}
.image-wrapper {
width: 100%;
height: 100%;
position: relative;
}
.positioned-image {
width: 200px;
height: 300px;
border: 2px solid red;
position: absolute;
}
/* 個々の画像の配置 */
#image1 {
top: 0;
left: 0;
}
#image2 {
top: 100px;
right: 0;
}
#image3 {
bottom: 0;
left: 150px;
}次に、index.html ファイルを更新して画像に固有の ID を追加します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Absolute Positioning Lab</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<div class="positioning-container">
<div class="image-wrapper">
<img
src="images/image1.jpg"
alt="Image 1"
id="image1"
class="positioned-image"
/>
<img
src="images/image2.jpg"
alt="Image 2"
id="image2"
class="positioned-image"
/>
<img
src="images/image3.jpg"
alt="Image 3"
id="image3"
class="positioned-image"
/>
</div>
</div>
</body>
</html>絶対配置に関するポイント：
position: absolute は要素を通常のドキュメントフローから外します。.positioning-container）に対して配置されます。top、bottom、left、right プロパティで精密な配置を制御します。例のレイアウト：
この最後のステップでは、絶対配置レイアウトを確認し、コンテナ内で画像がどのように配置されているかを理解します。Web ブラウザで index.html ファイルを開いて、CSS の絶対配置の結果を確認しましょう。
実装した絶対配置の主な側面を見直してみましょう。
.positioning-container {
position: relative; /* 配置コンテキストを作成する */
width: 500px;
height: 500px;
}.positioned-image {
position: absolute; /* 画像を通常のドキュメントフローから外す */
width: 200px;
height: 300px;
}
#image1 {
top: 0;
left: 0;
} /* 左上隅 */
#image2 {
top: 100px;
right: 0;
} /* 上部から 100px、右寄せ */
#image3 {
bottom: 0;
left: 150px;
} /* 下部、左から 150px */画像の配置方法を見てみましょう。
top、bottom、left、right プロパティによって制御されます。さらに実験するには、CSS の配置値を変更して、画像のレイアウトにどのような影響を与えるかを確認してみてください。
この実験では、参加者は構造化された Web 開発環境を構築することで CSS の絶対配置の基本を学びます。最初のステップは、明確なファイル構造を持つ専用のプロジェクトディレクトリを作成することです。これには、index.html ファイルと styles フォルダが含まれ、さまざまなブラウザで一貫したスタイリングを保証するために基本的な CSS リセットを実装します。
この実験では、学習者がクリーンなプロジェクトセットアップを行い、HTML と CSS ファイルを準備し、絶対配置技術を探求するための基盤を作成するように案内します。ディレクトリを作成し、ファイルを初期化し、初期の HTML と CSS の設定を追加するなどの体系的な手順に従うことで、参加者は Web 開発プロジェクトを整理し、高度な CSS レイアウト技術の準備をするための実践的な経験を得ます。
