財団でカードベースのUIを構築する

Sep 12, 2025

操作方法

カードベース ウェブサイトのレイアウト Webを介して撮った。 Pinterest、Twitter、Facebook、およびGoogleで人気があるカードは、さまざまなユースケースのための外観になるデザインパターンになっています。

なぜ見るのは難しくありません。カードは完璧に機能します レスポンシブウェブデザイン 。自己完結型のユニットとして、それらは移動、シャッフルされ、さまざまなコンテンツタイプと混合することができます。また、モバイルデバイスの単一列から大規模デバイスのマルチカラムまで、異なる画面サイズでも簡単に対応できます。

完璧なウェブサイトのレイアウトへのステップ

ZurBチームは何年もの間、そのデザイン作業でカードベースのレイアウトを使用しました。 Frontend Framework、Foundationは、幅広いモジュール式および柔軟なコンポーネントを含めることで、迅速にレスポンシブWebサイトを設計して構築するために必要なツールを常に装備しようとしています。このビルディングブロックのコレクションに追加されたバージョン6.3は、真新しいオフキャンバスの実装、レスポンシブアコーディオン/タブ、および強力な新しいカードコンポーネントをもたらします。

このチュートリアルでは、ファンデーションのFlexBoxベースのグリッドを利用してすべてのスルーを開くためのレスポンシブカードベースのUIを作成する方法を学びます。

01.開発環境を設定します

最初のステップは開発環境を設定することです。このチュートリアルでは、ノードベースの開発環境を使用しているため、node.jsをインストールする必要があります。これを行う詳細はあなたの環境によって異なりますので、チェックここに何をすべきかを見つけるために。

ノードがインストールされたら、Foundation CLIを使用してインストールします。 NPM Install -G Foundation-CLI. これにより、新しい基盤プロジェクトを簡単に設定できます。

02.新しいプロジェクトを開始します

ZURBテンプレートに基づいて新しいプロジェクトを作成しましょう。コマンドを実行してください Foundation New Net-Magazine-Tutorial. [Webサイト（サイトの基盤）]、「Net-Magazine-Tutorial」、次にZURBテンプレートを選択します。これにより、ファンデーションに基づくプロジェクトテンプレートがセットアップされ、ビルドシステムと開発サーバーが完備されています。

テンプレートにはサンプルページが付属しています src / pages / index.html 。簡単にするために、そのサンプルを取り除き、それを空に置き換えます。 ＆lt;ヘッダ＆gt。 ＆lt; / header＆gt; スクラッチから始めるために、私たちのカードベースのUIを構築します。走る NPMスタート コマンドラインから開発サーバーを実行し、カードの準備ができている裸のHTMLページが表示されます。

03.カードを作成します

今すぐ最初のカードを作成する時が来ました。今のところ、クラスのあるセクションの中をまっすぐに置きましょう 。カードコンテナ 。 Foundationを使ってカードを作成するときは、以下の注意を払うための3つのコアクラスがあります。 。カード 、 .card-section そして .card-divider 。より高度なユーザーのために、これらのそれぞれはSCSS MIXINに対応します（ カードコンテナ 、 カードセクション そして カード分割器 ）。

A simple card with the Foundation Yeti on it, header and footer created using the card-divider class — 財団yetigeを持つシンプルなカード、カード分割器クラスを使用して作成されたヘッダーとフッター

しかし、このチュートリアルでは、簡単にするためにデフォルトのクラスを使用します。 the 。カード クラスはコンテナです。すべてのカードはAの中に住んでいます 。カード 。これにより、罫線、影、デフォルトの着色などのものが定義されています。

the .card-section クラスは拡張可能なコンテンツブロックを定義します。ここで、コンテンツを入れることができます。 .card-divider クラスは、フッター、ヘッダー、分周器などの非展開ブロックを定義します。これらのクラスのすべてを使って最初の基本カードを作成しましょう。

＆lt;ヘッダ＆gt。

04.コンポーネントスタイルを追加します

これを行うと、私たちのカードは巨大になり、画面全体を埋めるために拡大します。私たちはまもなく全体的なサイジングに対処するつもりですが、今のところ、Zurbテンプレートでコンポーネントスタイルを追加する方法を学ぶための言い訳としてこれを使用しましょう。

ファイルを追加します _card.scss に SRC /資産/ SCSS /コンポーネント/ Aを指定する 最大幅：300ピクセル ために 。カード 追加して、メインCSSにファイルを含める @importコンポーネント/カード。 に SRC / Assets / SCSS / APP.SCSS 。

05.カードを再利用できます

複数のカードで繰り返し可能なレイアウトを作成するために、私たちのカードが私たちが再びプラグインできる再利用可能なコンポーネントであることを望みます。このチュートリアルを使用しているZURBテンプレートでは、パーシャルバーと呼ばれるテンプレート言語を使用しています。これには、パーシャルス、または再利用可能なコードブロックを作成できます。

カードの実装を部分的に移動するには、単にカットアンドペーストします。 。カード INのファイルに組み込まれているコンポーネント SRC /パーシャルズ 、いう src / partials / basic-card.html 。その後、その内容を単に追加することでそのコンテンツを含めることができます。 {{＆gt;ベーシックカード} インデックスファイルで。

06.レイアウトの構築を開始します

私たちは少しのカードタイプをほとんどカバーしますが、最初に私たちの再利用可能な基本カードを使って私たちのカードのためのより大きな反応的なレイアウトの作成を開始しましょう。そうするために、私たちはブロックグリッドと呼ばれる財団からの概念を使うつもりです。

Foundationにはいくつかの異なる種類のグリッドが含まれていますが、それらはすべて行と列の概念から始まります。行は、複数の垂直列を含むことができる水平ブロックを作成します。これらの基本的な構成要素はほとんどすべてのレイアウトの中核を構成します。

With a simple block grid, we already have a beautiful, scalable layout for as many cards as we want to include — シンプルなブロックグリッドで、私たちはすでに含みたいのと同じくらい多くのカードのための美しい、スケーラブルなレイアウトを持っています

ブロックグリッドは、等しいサイズの列を作成し、自分自身が無限の量のコンテンツを追加し、それが等しい列でうまくレイアウトしていることを許可するための簡単な方法です。単に行にクラスを追加してから、好きなだけの列コンポーネントを追加します。財団はきちんとしたときれいにあなたのためにそれらを置き出すでしょう。

私たちは非常に大きく変化した数のカードを持つことを期待しているので、これは私たちの目的にとって理想的です。これを4列グリッドですばやく設定し、数十ダースカードを追加しましょう。今のところ、大きな画面を心配するだけで、簡単に適用する ○up-4 行へのクラス。

07.それを答えるようにします

次に、異なる画面サイズで何が起こりたいのかを検討しましょう。財団には小さな、中規模、および大きなブレークポイントが内蔵されているので、それぞれのブレークポイントに対して異なるブロックグリッドクラスを簡単に適用することができます。

クラスを追加することによって、モバイル画面に1行に1つのカードを入れて、タブレットの上に3つずつ .small-up-1 そして 媒体UP - 3 行に。これを行うなら、そして停止ギャップを取り除きます 最大幅 私たちが置く財産 _card.scss 。私たちはすでにすべてのスクリーンサイズで良く見える美しく応答的なレイアウトを持っています。

08.いくつかの新しいカードタイプを試してください

Combine different styles of card to build your layout — さまざまなスタイルのカードを組み合わせてレイアウトを構築します

今すぐ私たちのカードセットを多様化しましょう、別のタイプは純粋なエッジツーエッジ写真です。カードのセクションとカードの仕切りはデフォルトでパディングを含みますが、エッジツーエッジの内容を持つために、画像を直接カードの中に置くことができます。これをAとして追加しましょう photo-card.html 部分イン SRC /パーシャルズ 。

 divクラス= "カード"＆gt。
＆lt; img src = "http://foundation.zurb.com/asts/img/foundation-emails/inky-all-devices.svg" / gt;
＆lt; / div＆gt;

09. FlexBoxを紹介します

私たちがカードを入れることができる何百もの可能な方法があります - いくつかのインスピレーションのために、あなたは財団をチェックアウトすることができます CardPackリポジトリ。しかし、サイズのカードがあるときにレイアウトを管理する方法に進みましょう。私たちが以前にしたように基本カードで交互にフォトカード部分を挿入すると、私たちの高さが異なるので、私たちはちょっとギザギザの経験を持ちます。これは大丈夫かもしれません、あるいは我々は補償するために私たちのレイアウトを調整したいかもしれません。

The Foundation card pack gives you a great set of pre-built Flexbox cards to level up your card game — ファンデーションカードパックはあなたのカードゲームをレベルアップするために既存のフレックスボックスカードの素晴らしいセットを提供します

このチュートリアルでは、私たちのお気に入りの新しいCSSレイアウトテクニック - FlexBoxを使用して補償します。 Foundationにはグリッドのフレックスボックスモードが付属しています。それを有効にするには、あなたは単に開く必要があります SRC / Assets / SCSS / APP.SCSS 、コメントアウトしてください @include Foundation-Grid; そして @include Foundation-Float-Classes; そしてコメント @include Foundation-Flex-Grid; そして @include Foundation-Flexクラス。 。

10.カードを同じ身長にします

FlexBoxクラスが有効になっているので、カードを同じ高さにするのは簡単です。まず、私達は私達の柱を追加することによって両親を曲げることができます .flex-container. クラス。これは、を追加するためのプロトタイピングのショートカットです 表示：Flex; 彼らに財産。これを行ったら、すべてのカードが同じ高さになりますが、フレックス子要素はデフォルトで縮小するため、私たちのカードのいくつかは狭いものを得ます。

私たちはそれらの要素を成長するように言うだけでこの問題を解決することができます。これは、それらをCSSでターゲティングしてそれらを与えることによって行われます フレックス成長：1; またはプロトタイピング中に、クラスを追加するだけで簡単にするために .flex-child-grow. 。これのすべてが私たちのカードをすべて行われたら、列を埋め、そして同じ高さにしっかりと同じようになります。

この記事はもともと紹介されました ネットマガジン 問題293。 ここで購入してください または ここでネットを購読する 。

この投稿を「スキ！」と言っていますこれらを試してみてください...

Atomic Designを使用している必要があります
SVGポリゴンを作成してアニメートします
あなたのレイアウトに革命をもたらすためのCSSトリック

財団でカードベースのUIを構築する

01.開発環境を設定します

02.新しいプロジェクトを開始します

03.カードを作成します

04.コンポーネントスタイルを追加します

05.カードを再利用できます

06.レイアウトの構築を開始します

07.それを答えるようにします

08.いくつかの新しいカードタイプを試してください

09. FlexBoxを紹介します

10.カードを同じ身長にします

操作方法 - 最も人気のある記事

WordPressをビジュアルビルダーに変える方法

WebGLで液体効果を作成する方法

ペンとインクに文字を描く方法

グラフィックフィギュアの設計方法

バッドアス芸者を描く

Corel Painterでの肖像画アートを作成する

3Dアプリでのスナップ作品

WordPress APIを使用したブログの電源

カテゴリ