CSSグリッドとフレックスボックスを使用してTrelloレイアウトを構築します

キーテイクアウト

• チュートリアルでは、CSSグリッドとFlexBoxを使用してTrelloボードの基本レイアウトを実装する方法を示しており、レスポンシブなCSSのみのソリューションを提供します。レイアウトは、アプリバー、ボードバー、およびカードリストを含むセクションで構成されています。
チュートリアルでは、3×1グリッドを使用してレイアウト構造を構築する方法について説明します。最初の2行は固定された高さと、使用可能なビューポートの高さの残りの部分に及ぶ3番目の行です。また、ビューポートユニットを使用して、コンテナが常にブラウザのビューポートと同じくらい高くなっていることを確認しています。
• チュートリアルでは、フルビューポート幅のフレックスボックスシングルラインの行コンテナを使用して、カードリストをフォーマットする方法を示しています。また、リストがViewportの幅に適合しない場合、Overflow-Xプロパティを使用して画面の下部に水平スクロールバーを表示する方法も示しています。
チュートリアルは、最大高さの制約を内部の順序リストに適用して、リストの高さを管理することを示唆しています。また、リストを親コンテナと同じ高さにする方法と、必要なときにのみカードスクロールバーを表示するためにオーバーフローYプロパティを使用する方法についても説明しています。
• このチュートリアルでは、Trelloボード画面の基本的なレイアウトの実装について説明します（ここの例を参照）。これは応答性の高いCSSのみのソリューションであり、レイアウトの構造的特徴のみが開発されます。
プレビューについては、最終結果のCodepenデモを次に示します。
グリッドレイアウトとFlexBoxに加えて、ソリューションは計算およびビューポートユニットを採用しています。コードをより読みやすく効率的にするために、SASS変数も活用します。

フォールバックは提供されていないため、サポートブラウザでコードを実行してください。これ以上苦労せずに、画面コンポーネントを1つずつ開発してみましょう。

画面レイアウト

Trelloボードの画面は、アプリバー、ボードバー、およびカードリストを含むセクションで構成されています。次のマークアップスケルトンでこの構造を構築します：

このレイアウトは、CSSグリッドで達成されます。具体的には、3×1グリッド（つまり、1列と3行）。最初の行は、アプリバー用の行、ボードバーの2番目、.lists要素の3番目の行です。

最初の2行はそれぞれ固定された高さですが、3行目は利用可能なビューポートの高さの残りの部分に及びます。

ビューポートユニット.UIコンテナが常にブラウザのビューポートと同じくらい高くなることを確認してください。

グリッドフォーマットコンテキストがコンテナに割り当てられ、上記のグリッド行と列が定義されています。より正確には、一意の列を宣言する必要がないため、行のみが定義されます。行のサイジングは、バールとFRユニットの高さのいくつかのSASS変数で行われ、。リスト要素の高さを使用可能なビューポートの高さの残りの部分に及ぼします。

カードにはセクション

にリストされています 前述のように、画面グリッドの3行目は、カードリストのコンテナをホストします。マークアップの概要は次のとおりです

フルビューポート幅のフレックスボックスシングルラインの列コンテナを使用して、リストをフォーマットしています。

<span><span><span><div> class<span>="ui"</span>>
  <span><span><span><nav> class<span>="navbar app"</span>></nav></span>...<span><span></span>></span>
</span>  <span><span><span><nav> class<span>="navbar board"</span>></nav></span>...<span><span></span>></span>
</span>  <span><span><span><div> class<span>="lists"</span>>
    <span><span><span><div> class<span>="list"</span>>
      <span><span><span><header>></header></span>...<span><span></span>></span>
</span>      <span><span><span><ul>></ul></span>
</span>        <span><span><span><li>></li></span>...<span><span></span>></span>
</span>        ...
        <span><span><span><li>></li></span>...<span><span></span>></span>
</span>      <span><span><span></span>></span>
</span>      <span><span><span><footer>></footer></span>...<span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span></span></span>
</div></span>></span></span>

オーバーフローXプロパティに自動値を割り当てると、ビューポートが提供する幅にリストが適合しない場合、画面の下部に水平スクロールバーを表示するようにブラウザに指示します。 Flex Shorthandプロパティは、Flexアイテムに使用され、リストを作成します。 Flex-Basisの自動値（速記で使用）は、レイアウトエンジンに.List Elementの幅プロパティからサイズを読み取るように指示し、Flex-GrowとFlex-Shrinkのゼロ値がこの幅の変更を妨げます。 >

次に、リスト間に水平な分離を追加する必要があります。リストの正しいマージンが設定されている場合、水平オーバーフローのあるボードの最後のリストの後のマージンはレンダリングされません。これを修正するために、リストは左マージンで区切られ、最後のリストと右のビューポートエッジの間のスペースは、各.Lists要素に擬似エレメントの後に追加することにより処理されます。デフォルトのフレックスシュリンク：1はオーバーライドする必要があります。そうしないと、擬似要素がすべての負の空間を「吸収」し、消滅します。

Firefox <span>.ui { </span><span> <span>height: 100vh;</span> </span><span> <span>display: grid;</span> </span><span> <span>grid-template-rows: $appbar-height $navbar-height 1fr;</span> </span><span>}</span>カードリスト

各カードリストは、ヘッダーバー、一連のカード、フッターバーで構成されています。次のHTMLスニペットは、この構造をキャプチャします：

ここでの重要なタスクは、リストの高さを管理する方法です。ヘッダーとフッターには固定高さがあります（必ずしも等しくない）。次に、さまざまな数のカードがあり、それぞれが変動する量のコンテンツを備えています。そのため、カードが追加または削除されると、リストは垂直に成長し、縮小します。

しかし、高さは無期限に成長することはできません。つまり、.lists要素の高さに依存する上限が必要です。この制限に達したら、リストにオーバーフローするカードにアクセスできるように垂直のスクロールバーを表示したい。

これは、最大高さとオーバーフローのプロパティの仕事のように聞こえます。ただし、これらのプロパティがルートコンテナ.listに適用されると、リストが最大高さに達すると、すべての。リスト要素、ヘッダー、フッターが含まれているすべての。リスト要素に表示されます。次の図は、左側の間違ったサイドバーと右側の正しいサイドバーを示しています。

では、代わりに内側の

に最大高さの制約を適用しましょう。どの値を使用する必要がありますか？ヘッダーとフッターの高さは、リストの高さから差し引く必要があります親コンテナ（.list）：

<span><span><span><div> class<span>="ui"</span>>
  <span><span><span><nav> class<span>="navbar app"</span>></nav></span>...<span><span></span>></span>
</span>  <span><span><span><nav> class<span>="navbar board"</span>></nav></span>...<span><span></span>></span>
</span>  <span><span><span><div> class<span>="lists"</span>>
    <span><span><span><div> class<span>="list"</span>>
      <span><span><span><header>></header></span>...<span><span></span>></span>
</span>      <span><span><span><ul>></ul></span>
</span>        <span><span><span><li>></li></span>...<span><span></span>></span>
</span>        ...
        <span><span><span><li>></li></span>...<span><span></span>></span>
</span>      <span><span><span></span>></span>
</span>      <span><span><span><footer>></footer></span>...<span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span></span></span></span>
</div></span>></span>
</span>  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span></span></span>
</div></span>></span></span>

しかし、問題があります。パーセンテージ値は。リストではなく、

要素の親である.listを指します。この要素には明確な高さがないため、この割合は解決できません。これは、.listのように背が高くなることで修正できます。 このように、.listは常に。リストと同じくらい高いため、そのコンテンツに関係なく、その背景色のプロパティはリストの背景色に使用できませんが、子供（ヘッダー、フッター、カード）を使用することは可能です。 ）この目的のために。

<span>.ui {
</span><span>  <span>height: 100vh;</span>
</span><span>  <span>display: grid;</span>
</span><span>  <span>grid-template-rows: $appbar-height $navbar-height 1fr;</span>
</span><span>}</span>

リストの下部とビューポートの下端との間に少しスペース（$ギャップ）を説明するために、リストの高さに対する最後の調整が必要です。

さらに$ scrollbar-cheicknessの量を差し引いて、リストが。リスト要素の水平スクロールバーに触れないようにします。実際、Chromeでは、このスクロールバーは.Listsボックス内で「成長」します。つまり、100％の値とは、。リストの高さを指します。 Firefoxの代わりに、Scrollbarは.Listsの高さの外側に「追加」されています。つまり、100％はScrollbarを含むものではない。リストの高さを指します。したがって、この減算は必要ありません。その結果、Scrollbarが表示されると、Firefoxでは、最大高さに達したリストの境界の境界の間の視覚空間と、巻物棒の上部がわずかに大きくなります。

このコンポーネントの関連するCSSルールは次のとおりです

<span><span><span><div> class<span>="lists"</span>>
  <span><span><span><div> class<span>="list"</span>>
    ...
  <span><span><span></span></span></span>
</div></span>></span>
</span>  ...
  <span><span><span><div> class<span>="list"</span>>
    ...
  <span><span><span></span></span></span>
</div></span>></span>
</span><span><span><span></span></span></span>
</div></span>></span></span>

前述のように、リストの背景色は、$ list-bg-color値を各.list要素の子供のバックグラウンドカラープロパティに割り当てることによってレンダリングされます。 Overflow-Yは、必要なときにのみカードスクロールバーを表示します。最後に、ヘッダーとフッターにいくつかの簡単なスタイリングが追加されます。

仕上げの仕上げ

単一のカードのHTMLは、単にリスト項目で構成されています：

または、カードにカバーイメージがある場合：

<span>.lists {
</span><span>  <span>display: flex;</span>
</span><span>  <span>overflow-x: auto;</span>
</span>  <span>> * {
</span><span>    <span>flex: 0 0 auto; // 'rigid' lists</span>
</span><span>    <span>margin-left: $gap;</span>
</span>  <span>}
</span><span>  <span>&::after {</span>
</span><span>    <span>content: '';</span>
</span><span>    <span>flex: 0 0 $gap;</span>
</span>  <span>}
</span><span>}</span>

これは関連するCSS：

です

背景、パディング、および底部のマージンを設定した後、カバー画像レイアウトの準備が整いました。画像幅は、左のパディングエッジから右パディングの端までカード全体に及ぶ必要があります。

<span><span><span><div> class<span>="list"</span>>
  <span><span><span><header>></header></span>List header<span><span></span>></span>
</span>  <span><span><span><ul>></ul></span>
</span>    <span><span><span><li>></li></span>...<span><span></span>></span>
</span>    ...
    <span><span><span><li>></li></span>...<span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span><footer>></footer></span>Add a card...<span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span></span>
</div></span>></span></span>

次に、マイナスのマージンが割り当てられ、画像を水平および垂直に整列させます。

3番目のプラスマージン値は、カバー画像とカードテキストの間のスペースを処理します。

<span>ul {
</span><span>  <span>max-height: calc(100% - #{$list-header-height} - #{$list-footer-height});</span>
</span><span>}</span>

最後に、画面レイアウトの最初の行を占める2つのバーにフレックスフォーマットコンテキストを追加しました。しかし、それらはスケッチされているだけです。デモを拡張することで、これを独自の実装を構築してください。

結論

これは、このデザインを達成するための1つの可能な方法にすぎず、他のアプローチを見るのは興味深いでしょう。また、たとえば2つのスクリーンバーを完成させるなど、レイアウトを完成させるといいでしょう。

もう1つの潜在的な拡張機能は、カードリストのカスタムスクロールバーの実装である可能性があります。

では、以下のディスカッションにデモをフォークし、リンクを投稿してください。

CSSグリッドとフレックスボックスを使用してTrelloレイアウトの構築に関するよくある質問（FAQ）

CSSグリッドとフレックスボックスを使用してTrelloのようなレイアウトを作成するにはどうすればよいですか？

CSSグリッドとフレックスボックスを使用して、Trelloのようなレイアウトをレスポンシブにするには、メディアクエリを使用して画面サイズに基づいてレイアウトを調整します。メディアクエリを使用して、グリッド列の数​​を変更したり、リストとカードのフレックスプロパティを調整したりできます。これにより、レイアウトはさまざまな画面サイズとオリエンテーションに適応し、すべてのデバイスで一貫したユーザーエクスペリエンスを確保できます。 JavaScriptを使用して、Trelloのようなレイアウトを実現できます。 JavaScriptを使用してカードにドラッグアンドドロップ機能を追加して、ユーザーがリスト間でカードを移動できるようにします。 JavaScriptを使用して、新しいカードやリストを追加する機能など、他のインタラクティブ機能を追加することもできます。

CSSグリッドとFlexBoxを使用してTrelloのようなレイアウトを作成するために制限はありますか？

CSSグリッドとフレックスボックスは強力なレイアウトシステムですが、いくつかの制限があります。たとえば、古いブラウザでは完全にサポートされていない場合があります。さらに、柔軟なレイアウトシステムを提供していますが、あらゆる種類のレイアウトに適していない場合があります。これらの制限を理解し、必要に応じて代替ソリューションを検討することが重要です。

トレロのようなレイアウトの外観をカスタマイズするにはどうすればよいですか？ CSSを使用します。 CSSを使用して、レイアウトの色、フォント、その他の視覚要素を変更できます。 CSSを使用して、シャドウや遷移などの効果を追加してユーザーエクスペリエンスを強化することもできます。 🎜> CSSグリッドとフレックスボックスは比較的高度なCSS機能ですが、何らかの研究と実践で学習できます。これらの機能の使用方法を学ぶのに役立つ、チュートリアルやガイドなど、オンラインで利用できる多くのリソースがあります。時間と労力があれば、初心者であっても、CSSグリッドとフレックスボックスを使用してトレロのようなレイアウトを作成できます。 🎜> Trelloのようなレイアウトでのトラブルシューティングの問題は、ブラウザの開発者ツールを使用して実行できます。これらのツールを使用すると、HTMLとCSSを検査できるため、問題を識別して修正しやすくなります。また、スタックオーバーフローなどのオンラインフォーラムやコミュニティを使用して、質問をしたり、他の開発者から助けを得たりすることもできます。パフォーマンスのためのTrelloのようなレイアウトには、いくつかの戦略が含まれます。これには、CSSとJavaScriptの最小化、効率的なCSSセレクターの使用、画像の最適化が含まれます。 Google Lighthouseなどのパフォーマンスツールを使用して、レイアウトを分析し、改善のための領域を特定することもできます。

以上がCSSグリッドとフレックスボックスを使用してTrelloレイアウトを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。