Flexbox を使った応答性のあるペットの家ウェブサイト

はじめに

賑やかな都市ペットビルに住むウェブ開発者のジョーダンは、「ペットの家」ウェブサイトの再デザインを依頼されています。

この実験では、ペット飼い主向けにレスポンシブで視覚的に魅力的なレイアウトを作成します。ウェブサイトは、デバイス間でサービス、会社概要、および連絡先情報を効果的に紹介する必要があります。ジョーダンは、強力なレイアウト機能を持つ Flexbox を利用することにしました。

Flexbox の基本と表示プロパティ

Flexbox を始めるには、その基本概念を理解する必要があります。

インテリアデザイナーとして、あなたのウェブページが大きな空の部屋だと想像してみてください。あなたの仕事は、この部屋を心地良くて美しくすることです。そこに登場するのが Flexbox で、あなたの魔法の杖のように、ウェブページの要素（つまり家具）を簡単に配置することができます。ソファ（メインコンテンツ）でもコーヒーテーブル（補助情報）でも、Flexbox を使えばすべてが完璧な位置にあることが保証されます。

Flexbox を使い始める前に、いくつかの基本概念を簡単に復習しましょう。

• Flex コンテナ：これはあなたの部屋のようなもので、様々な家具を配置する場所です。
• Flex アイテム：これらはソファ、椅子、コーヒーテーブルのようなあなたの家具です。

Flexbox を使い始めるには、まず Flex コンテナを宣言する必要があります。つまり、「さあ、この部屋を飾り付けましょう」と言うことに似ています。

.container {
  display: flex;
}

これを行うと、.containerクラスのすべての直下の子要素は Flex アイテムとなり、Flexbox のレイアウトルールに従います。

display CSS プロパティは、要素がブロックボックスまたはインラインボックスとして扱われるか、その子要素に対して使用されるレイアウト（フローレイアウト、グリッド、またはフレックス）を設定します。

インライン要素のレイアウト方法を変更するために、display 属性を使用できます。たとえば：

display: blockは要素に独自のスペースを与え、display: inline-blockはより柔軟なレイアウトを可能にし、要素を隣り合わせに配置しながらもそれぞれの寸法を制御できます。

display の使い方がわかったので、style.cssに次のように追加できます。

.navigation li {
  display: inline-block;
}
.navigation li a {
  text-decoration: none;
  color: black;
  padding: 10px;
  display: block;
}
form.form-content {
  display: block;
  padding: 0.8em 0;
}

主軸と交差軸

Flexbox の世界では、2 つの概念が重要です。主軸と交差軸です。デフォルトでは、主軸は水平方向で、交差軸は垂直方向ですが、flex-directionプロパティを使ってこれを調整することができます。

• 水平主軸：flex-direction: row;（デフォルト）
• 垂直主軸：flex-direction: column;

たとえば：

Flex 項目

さて、家具（Flex アイテム）を配置する方法について話しましょう。

• justify-content：このプロパティは、Flex アイテムが主軸に沿ってどのように配置されるかを制御します。ソファと椅子の間の距離を調整して、あまり離れすぎず、近すぎないようにするイメージです。
• align-items：このプロパティは、Flex アイテムが交差軸に沿ってどのように整列するかを決定します。部屋全体に同じ高さで絵が飾られているように、部屋を整然と見せるために使います。
• flex-grow：本棚が残りのスペースのすべてまたは一部を占めるようにしたい場合があります。このプロパティを使うと、家具（アイテム）を「成長」させて余分なスペースを埋めることができます。

簡単なレイアウト（コンテナと 3 つのアイテムから構成されています）で Flexbox の魔法を見てみましょう。私たちがしたいことは、これらの 3 つのアイテムをコンテナ内で水平方向に中央に配置し、十分なスペースがある場合に均等に配置することです。

この設定では、家具（アイテム）は私たちが望んだ通りに配置されます。

Flexbox は本当に魔法のようで、これまでにない柔軟性と簡便性でウェブページを配置することができます。この魔法をマスターしたので、ぜひ試してみてください！あなたの夢の「部屋」を作り出してください！

Flexbox の魔法を生き生きと示すために、Flexbox レイアウトを持つ部屋を含むイラストを作成します。ソファ、コーヒーテーブル、本棚などの家具が、それぞれ異なる Flex アイテムを表しています。これにより、justify-contentやalign-itemsなどの Flexbox プロパティを使って、部屋の中でどのようにエレガントに配置されているかがわかります。

要約すると、Flexbox は 1 次元のレイアウトモデルで、アイテムを簡単に水平または垂直に整列させることができ、レスポンシブなデザインを作成するのに最適です。知っておくべき重要な用語は以下の通りです。

• Flex コンテナ：Flex アイテムを含む親要素。
• Flex アイテム：Flex コンテナ内の個々の要素。
• Flex 方向：コンテナの主軸を決定します。
• Flex ラップ：アイテムが複数行にまたがるようにするかどうかを制御します。
• コンテンツを整列させる：アイテムを主軸に沿って整列させます。
• アイテムを整列させる：アイテムを交差軸に沿って整列させます。

Flexbox の使い方がわかったので、style.cssに次のように追加できます。

body {
  display: flex;
  flex-direction: column;
  letter-spacing: 2px;
  font-weight: 400;
  font-size: 1.2vw;
}
header {
  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;
}
ul {
  list-style: none;
  display: flex;
  flex-direction: row;
}
.navigation-section {
  width: 70%;
}
section {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 10% 0;
}
.story-sect {
  display: flex;
  flex-direction: row-reverse;
  background-color: rgb(233, 174, 87);
  color: #fff;
}
.samples {
  flex-direction: column;
  text-align: center;
}
footer {
  display: flex;
  flex-direction: row-reverse;
  height: 5em;
  width: 100%;
  color: #fff;
  background-color: rgb(239, 206, 157);
  text-transform: uppercase;
}

まとめ

この実験では、ジョーダンは Flexbox を「ペットの家」ウェブサイトに成功裏に適用し、レイアウトの応答性と美しさを向上させました。ヘッダー、ナビゲーション、メインセクションに焦点を当てた手順を通じて、ウェブサイトは現在、さまざまなデバイスで効率的にコンテンツを表示します。Flexbox は、動的で柔軟なレイアウトを作成する上で非常に貴重なツールであり、現代のウェブデザインにおける重要性を示しています。