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

はじめに

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

👀 プレビュー

🎯 タスク

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

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

🏆 成果

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicConceptsGroup -.-> css/properties("Properties") css/BasicConceptsGroup -.-> css/values("Values") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/AdvancedLayoutGroup -.-> css/flexbox("Flexbox") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/DynamicStylingGroup -.-> css/transformations("Transformations") subgraph Lab Skills css/selectors -.-> lab-300092{{"映画館の座席配置"}} css/properties -.-> lab-300092{{"映画館の座席配置"}} css/values -.-> lab-300092{{"映画館の座席配置"}} css/box_model -.-> lab-300092{{"映画館の座席配置"}} css/flexbox -.-> lab-300092{{"映画館の座席配置"}} css/backgrounds -.-> lab-300092{{"映画館の座席配置"}} css/pseudo_classes -.-> lab-300092{{"映画館の座席配置"}} css/transformations -.-> lab-300092{{"映画館の座席配置"}} end

プロジェクトのセットアップ

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

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

├── 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でさらに多くの実験を行って練習してください。