Flexbox を使った応答型サイコロレイアウト

はじめに

このプロジェクトでは、Flexbox CSSを使ってレスポンシブなサイコロのレイアウトを作成する方法を学びます。目的は、特定のレイアウト要件に従って、異なる目の模様のセットのサイコロを配置することです。

👀 プレビュー

🎯 タスク

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

• HTMLとCSSを使ってサイコロのレイアウトの基本構造を設定する方法
• justify-content、align-items、flex-direction、align-selfなどのFlexboxプロパティを使って、各サイコロ内の目を配置する方法
• flex-wrapとflex-basisなどの高度なFlexboxテクニックを実装して、望ましいレイアウトを作成する方法

🏆 成果

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

• Flexboxを使って複雑でレスポンシブなレイアウトを作成する
• 異なるFlexboxプロパティとそれらを効果的に適用する方法を理解する
• 手順を追って必要なレイアウトを実装することで、問題解決能力を開発する

Skills Graph

レイアウト サイコロ1

始めるには、エディタを開きます。エディタから index.html というファイルが見えるはずです。

右下隅の「Go Live」をクリックしてポート8080を開き、ブラウザで index.html ページをプレビューします。結果は以下の通りになります。

このステップでは、最初のサイコロ内の目を配置するために justify-content と align-items のプロパティを使用します。

1. コードエディタで index.html ファイルを開きます。
2. <style> セクションで、.div1 クラスに対して以下のルールを追加します。

.div1 {
  justify-content: center;
  align-items: center;
}

justify-content: center は目を水平方向に中央に配置し、align-items: center は垂直方向に中央に配置します。

レイアウト サイコロ2

このステップでは、2番目のサイコロ内の目を配置するために、justify-content、flex-direction、およびalign-itemsのプロパティを使用します。

1. <style> セクションで、.div2 クラスに対して以下のルールを追加します。

.div2 {
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}

justify-content: space-around は目を主軸 (水平方向) に沿って均等に分布させ、flex-direction: column は目を垂直方向に積み重ね、align-items: center は目をサイコロ内で中央に配置します。

レイアウト サイコロ3

このステップでは、3番目のサイコロ内の目を配置するために、justify-content、align-self、およびalign-itemsのプロパティを使用します。

1. <style> セクションで、.div3 クラスに対して以下のルールを追加します。

.div3 {
  justify-content: space-around;
  align-items: center;
  padding: 10px;
}

.div3 p:first-child {
  align-self: flex-start;
}

.div3 p:last-child {
  align-self: flex-end;
}

justify-content: space-around は目を主軸 (水平方向) に沿って均等に分布させ、align-items: center は目を垂直方向に中央に配置し、padding: 10px はサイコロの周りに余白を追加します。

align-self プロパティは、最初の目と最後の目をそれぞれサイコロの上部と下部に配置するために使用されます。

レイアウト サイコロ4、5、6、7、および9

このステップでは、残りのサイコロ内の目を配置するために、justify-content、align-self、flex-direction、およびalign-itemsのプロパティを使用します。

1. <style> セクションで、.div4 クラスに対して以下のルールを追加します。

.div4 {
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}

.div4 div {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.div4 p {
  align-self: center;
}

justify-content: space-around は目を主軸 (水平方向) に沿って均等に分布させ、flex-direction: column は目を垂直方向に積み重ね、align-items: center は目をサイコロ内で中央に配置します。

内側の <div> 要素は、目を水平方向にグループ化するために使用され、justify-content: space-around によって均等に分布されます。align-self: center プロパティは、それぞれの行内で個々の目を中央に配置するために使用されます。

レイアウト サイコロ8

この最後のステップでは、8番目のサイコロ内の目を配置するために、justify-content、align-self、flex-wrap、およびflex-basisのプロパティを使用します。

1. <style> セクションで、.div8 クラスに対して以下のルールを追加します。

.div8 {
  flex-wrap: wrap;
  padding: 2px;
}

.div8 div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-basis: 100%;
}

flex-wrap: wrap プロパティは、目が1行に収まらない場合に次の行に折り返すことを可能にします。padding: 2px はサイコロの周りに余白を追加します。

内側の <div> 要素は、目を水平方向にグループ化するために使用され、justify-content: space-between によって均等に分布され、align-items: center によって垂直方向に中央に配置されます。flex-basis: 100% は、各行がサイコロの全幅を占めることを保証します。

これらの手順に従うことで、要件に従ってFlex Dice Layoutを成功裏に実装することができました。

まとめ

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