CSS を使って原子的なフレックスレイアウトを実装する

はじめに

このプロジェクトでは、CSS を使って属性ベースの原子的なフレックスレイアウトを実装する方法を学びます。原子的な CSS は、属性ベースのスタイルを使って CSS の記述を簡素化する人気のある CSS 構築方法です。

👀 プレビュー

🎯 タスク

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

• CSS を使って属性ベースの原子的なフレックスレイアウトを実装する方法
• フレックスレイアウト内の個々のフレックスアイテムにスタイルを付ける方法

🏆 成果

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

• 属性ベースの CSS を使って柔軟なレイアウトを作成する
• フレックスレイアウト内の個々の要素にスタイルを付ける
• 効率的で保守可能な CSS 開発のために原子的な CSS を使う利点を理解する

Skills Graph

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

原子的な CSS は最近非常に人気のある CSS 構築方法であり、属性ベースの（Attributify）原子的な CSS はさらに CSS の記述を簡素化します。

たとえば、従来はflexを実装するには、要素にクラス識別子を作成し、その後 CSS のセレクタを通じて要素を選択します。

<style>
  .box {
    display: flex;
  }
</style>
<div class="box"></div>

属性付き原子的な CSS を使うと、同じことを次のように行うことができます。

<div flex></div>

始めるには、実験環境を開き、ディレクトリ構造は次のとおりです。

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

ここで：

• css/style.cssはコードを補完する必要があるスタイルファイルです。
• index.htmlはメインページです。

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

属性ベースの原子的なフレックスレイアウトを実装する

このステップでは、CSS を使って属性ベースの原子的なフレックスレイアウトを実装する方法を学びます。

1. css/style.cssファイルを開きます。
2. CSS ファイルの/* TODO */セクションを見つけます。
3. 以下の CSS ルールを追加して、属性ベースの原子的なフレックスレイアウトを実装します。

[flex="~ col"] {
  display: flex;
  flex-direction: column;
}

このルールは、flex="~ col"属性を持つdiv要素を対象とし、垂直方向のフレックスレイアウトを作成するための必要なスタイルを適用します。

display: flexプロパティは、要素にフレックスレイアウトを使用するように設定し、flex-direction: columnプロパティは、フレックス方向を垂直に設定します。

4. style.cssファイルを保存します。
5. ブラウザに戻り、ページを更新します。以下のような結果が表示されるはずです。

まとめ

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