はじめに
ペット愛好家のための仮想空間「ペットの家」では、ウェブ開発者のアレックスは、CSS Grid を使ってサービスの紹介を刷新する探求に乗り出しています。
この実験では、サービスを整理された視覚的に魅力的な方法で提示することでユーザーを惹きつけることを目的としています。アレックスの使命は、「表示」セクションをグリッドレイアウトに変え、ペットサービスを上品かつ効率的に強調することです。
位置プロパティ
CSS のpositionプロパティは、開発者がページ上の要素の正確な配置を制御できる強力なツールです。これにより、要素を通常のフローに基づいて配置することができますし、親要素に対して、ビューポートに対して、または最も近いスクロール祖先に対して配置することもできます。
静的配置
staticはすべての要素のデフォルト値で、要素が通常のドキュメントフローに従ってレイアウトされることを意味します。静的に配置された要素は、top、right、bottom、または left プロパティの影響を受けません。
要素が標準的なフローに従うようにする場合、静的配置が最適な選択肢です。
たとえば、ページの左側にロボットの画像があり、この要素をposition:staticに設定すると、ページをスクロールしたときにこの画像もページのフローとともにスクロールします。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.full-page-img {
width: 100%;
margin-left: 15%;
}
.box img {
width: 90%;
}
.ad-l {
position: static;
top: 100px;
left: 0;
width: 150px;
}
</style>
</head>
<body>
<img src="robot.png" class="ad-l" />
<div class="full-page-img">
<img src="page.png" />
</div>
</body>
</html>
固定配置
fixed配置は、要素をブラウザウィンドウのビューポートに対して配置します。ページをスクロールしても要素は同じ場所に留まります。
ページの上部または下部に固定されたナビゲーションバーを作成する場合に使用します。
たとえば、ページの左側にロボットの画像があり、この要素をposition:fixedに設定すると、ページをスクロールしたときにこの画像はページのスクロールによって消えることはありません。画像は固定された位置にとどまります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.full-page-img {
width: 100%;
margin-left: 15%;
}
.box img {
width: 90%;
}
.ad-l {
position: fixed;
top: 100px;
left: 0;
width: 150px;
}
</style>
</head>
<body>
<img src="robot.png" class="ad-l" />
<div class="full-page-img">
<img src="page.png" />
</div>
</body>
</html>
相対配置
relative配置は、要素を通常の位置からオフセットさせることができます。オフセットさせても、要素は依然として元のスペースを占めます。
レイアウトの他の部分に影響を与えることなく、要素の位置をわずかに調整する必要がある場合に使用します。
たとえば、ページの左側のロボット画像を、通常の位置からtopとleft方向に設定されたピクセル数だけ移動させました。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100%;
}
.box img {
width: 90%;
}
.ad-l {
position: relative;
top: 70px;
left: 70px;
}
</style>
</head>
<body>
<img src="labby.png" class="ad-l" />
<div class="box">
<img src="page.png" />
</div>
</body>
</html>
絶対配置
absolute配置は、要素を最も近い配置された祖先要素（存在する場合）に対して、そうでなければ初期の含むブロックに対して配置します。要素はドキュメントフローから削除され、スペースを占めません。
浮動要素（たとえばモーダルやドロップダウンメニュー）を作成する必要がある場合に使用します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100%;
}
.box img {
width: 90%;
}
.ad-l {
position: absolute;
top: 70px;
left: 70px;
}
</style>
</head>
<body>
<img src="labby.png" class="ad-l" />
<div class="box">
<img src="page.png" />
</div>
</body>
</html>
位置属性の使い方を理解したら、style.cssに次のように追加できます。
header {
position: fixed;
display: flex;
flex-direction: row;
background-color: rgb(233, 174, 87);
width: 100%;
max-height: max-content;
min-height: 1em;
padding-top: 1%;
padding-bottom: 1%;
text-transform: uppercase;
}
.navigation li {
position: relative;
display: inline-block;
}
.service figure {
position: relative;
}
.service figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
}
グリッド基本
前の実験では、Flexbox を学びましたが、ペットページのレイアウトは、私たちが望む効果を達成できませんでした。そこで、次に別のレイアウトであるグリッドレイアウトを学びます。
CSS グリッドレイアウト（Grid）は、開発者が応答型の Web ページレイアウトを作成できるグリッドベースのレイアウトシステムです。Grid は、ページを主要な領域に分割したり、小さなコンポーネントのレイアウトを定義したりすることができます。
グリッドレイアウトを使用するには、まずコンテナ要素にdisplay: grid;プロパティを設定する必要があります。style.cssに次のように追加できます。
.container {
display: grid;
padding: 0px;
padding-top: 1em;
width: 100%;
}
.services {
width: 90%;
display: grid;
margin: 20px auto;
}
行と列の定義
次に、grid-template-columns と grid-template-rows プロパティを使って、コンテナ内の行と列を定義します。
たとえば、.container は列と行に特定の寸法を持つグリッド表示モードを設定します。
display: grid;はコンテナに対してグリッドレイアウトを活性化します。grid-template-columns: 50px 100px;は 2 つの列を定義し、最初の列は 50 ピクセル幅で、2 番目の列は 100 ピクセル幅です。grid-template-rows: 30px 60px;は 2 つの行を定義し、最初の行は 30 ピクセル高で、2 番目の行は 60 ピクセル高です。
style.css に次のように追加できます。
.container {
display: grid;
grid-template-columns: 100%;
padding: 0px;
padding-top: 1em;
width: 100%;
}
.services {
width: 90%;
display: grid;
grid-template-columns: 2fr 2fr 2fr;
margin: 20px auto;
}
fr は可変長単位で、グリッドコンテナ内の利用可能な空間の一部を表します。
グリッドギャップ
grid-gap プロパティ（現在は gap、row-gap、および column-gap を使用することが推奨されています）を使用すると、グリッドの行と列の間のスペースを設定できます。
style.css に次のように追加できます。
.services {
width: 90%;
display: grid;
grid-template-columns: 2fr 2fr 2fr;
gap: 5%;
margin: 20px auto;
}
まとめ
この実験では、アレックスは CSS Grid をうまく利用して、「ペットの家」の表示セクションを再デザインし、構造化された魅力的なグリッドレイアウトでペットサービスを紹介しました。このアプローチは、視覚的なプレゼンテーションを向上させるだけでなく、Web デザインにおける CSS Grid の柔軟性と力を示しています。
