はじめに
この実験では、学生たちは 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.css
WebIDE で 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 構造を作成する
このステップでは、絶対配置を示すための 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-wrapperdiv があります。 - 3 つの画像を追加し、それぞれ
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プロパティで精密な配置を制御します。- 各画像を異なる位置に配置して、絶対配置の柔軟性を示しています。
例のレイアウト：
- 最初の画像（image1）は左上隅に配置されています。
- 2 番目の画像（image2）は上部から 100px の位置に配置され、右に揃えられています。
- 3 番目の画像（image3）は下部に配置され、左から 150px の位置にあります。
絶対配置レイアウトを確認する
この最後のステップでは、絶対配置レイアウトを確認し、コンテナ内で画像がどのように配置されているかを理解します。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 */
画像の配置方法を見てみましょう。
- 各画像は 500x500px のコンテナ内に正確に配置されています。
- 画像はコンテナの境界と重なりません。
- 配置は
top、bottom、left、rightプロパティによって制御されます。
さらに実験するには、CSS の配置値を変更して、画像のレイアウトにどのような影響を与えるかを確認してみてください。
まとめ
この実験では、参加者は構造化された Web 開発環境を構築することで CSS の絶対配置の基本を学びます。最初のステップは、明確なファイル構造を持つ専用のプロジェクトディレクトリを作成することです。これには、index.html ファイルと styles フォルダが含まれ、さまざまなブラウザで一貫したスタイリングを保証するために基本的な CSS リセットを実装します。
この実験では、学習者がクリーンなプロジェクトセットアップを行い、HTML と CSS ファイルを準備し、絶対配置技術を探求するための基盤を作成するように案内します。ディレクトリを作成し、ファイルを初期化し、初期の HTML と CSS の設定を追加するなどの体系的な手順に従うことで、参加者は Web 開発プロジェクトを整理し、高度な CSS レイアウト技術の準備をするための実践的な経験を得ます。
