CSS を使って魅力的な映画館の座席レイアウトを作成する

はじめに

このプロジェクトでは、CSS を使って映画館の座席配置を作成する方法を学びます。目的は、特定の間隔要件を備えたスクリーンと座席エリアを含むレイアウトをデザインすることです。

👀 プレビュー

映画館の座席配置レイアウトのプレビュー

🎯 タスク

このプロジェクトでは、以下のことを学びます。

必要な数の座席とそれらの間隔で座席エリアを設定する方法
レイアウトにスクリーンを追加し、座席エリアから分離する方法
CSS スタイルを適用して、映画館のレイアウトの望ましい視覚的外観を実現する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

CSS を使って座席エリアの柔軟なレイアウトを作成する
スクリーン要素を配置してスタイルを設定する
望ましいレイアウトを実現するために特定の間隔ルールを適用する
複雑なレイアウト構造の設計と実装におけるスキルを示す（これは Web 開発に不可欠なスキルです）

プロジェクトをセットアップする

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了しましょう。

プロジェクトフォルダを開きます。このフォルダには、以下のファイルとディレクトリが含まれています。

├── css
│   └── style.css
└── index.html

ここで：

index.html はメインページです。
css/style.css は必要なスタイルを追加するファイルです。

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

スクリーンを追加する

このステップでは、映画館のレイアウトにスクリーンを追加する方法を学びます。以下の手順に従ってこのステップを完了しましょう。

コードエディタで css/style.css ファイルを開きます。
.screen クラスの中に、以下の CSS プロパティを追加します。
```
.screen {
  background-color: #fff;
  height: 70px;
  width: 100%;
  transform: rotateX(-45deg);
  box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
  color: #242333;
  text-align: center;
  line-height: 70px;
  font-size: 30px;
}
```
これにより、スクリーンのサイズ、色を設定し、3D 回転効果とドロップシャドウを追加してスタイルを設定します。

座席エリアをセットアップする

このステップでは、映画館の座席エリアをセットアップする方法を学びます。以下の手順に従ってこのステップを完了しましょう。

コードエディタで css/style.css ファイルを開きます。
.seat - area クラスの中に、以下の CSS プロパティを追加します。
```
.seat - area {
  display: flex;
  flex - wrap: wrap;
  margin - top: 40px;
}
```
これにより、座席が列に並んだ柔軟な座席エリアのレイアウトが作成されます。
次に、.seat クラスを対象にして、以下の CSS プロパティを追加します。
```
.seat {
  background - color: #444451;
  height: 40px;
  width: 45px;
  border - top - left - radius: 10px;
  border - top - right - radius: 10px;
  margin - right: 10px;
  margin - top: 10px;
}
```
これにより、個々の座席のサイズ、色を設定し、角を丸くすることでスタイルを設定します。
座席間に望ましい間隔を作成するには、以下の CSS ルールを追加します。
```
.seat:nth - child(8n + 2) {
  margin - right: 30px;
}
```

.seat:nth - child(8n + 6) { margin - right: 30px; }

.seat:nth - child(8n + 0) { margin - right: 0; }


これにより、2列目と6列目（通路に隣接）の右側に30pxの隙間が追加され、それ以外の座席間には10pxの隙間が追加されます。

あなたの映画館のレイアウトはこれで完成です！ ウェブページを表示しているブラウザウィンドウを更新してください。完成した結果は以下の通りです。

![完成した映画館の座席配置レイアウト](https://file.labex.io/namespace/718bace8-27a3-4200-a588-dde4041ceeb9/css/project-movie-theater-seat-arrangement/lab-movie-theater-seat-arrangement/ja/../assets/1.png)

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたのスキルを向上させるために、LabEx でさらに多くの実験を行って練習してください。