Diviを使用してレスポンシブ5列の「ショーケース」レイアウトを設計する方法

コンテンツに十分なスペースがある5列のレイアウトを設計するのは難しい場合があります。 すべてのブラウザサイズで適切にスケーリングできるようにするという大きな課題は言うまでもありません。 このチュートリアルでは、小さい画面サイズ（タブレットやスマートフォンなど）のデザインを損なうことなく、5列のレイアウト内にコンテンツを収めるために必要なスペースを最大化する方法を紹介します。 このデザインは、製品、サービス、およびプロジェクトを紹介するのに理想的です。 少しインスピレーションを得るために、いくつかのボーナスデザイン機能を追加します。

始めましょう。

スニークピーク

使用されるレスポンシブテクニック

カスタムの行幅とガター幅を使用する

5列のレイアウトをレスポンシブにするための鍵は、最初に、コンテンツを保持するのに十分なスペースを列に与えることです。 このチュートリアルの設計では、5つの列を保持する行に89％のカスタム幅を指定します。 次に、ガター幅を1に設定することで、さらに多くのスペースを作成します。これは、基本的に列間のマージンをすべて削除することです。 この設計では、ガター幅を1に設定しても行の両側にマージンを維持できるため、行を全幅に設定するのではなく、89％のカスタム幅を使用することが重要です。 あなたは私が何を意味するかを見るでしょう。

間隔と見出しのテキストにvwの長さの単位を使用する

5列のレイアウトで応答性を維持するためのもう1つの鍵は、vwの長さの単位を使用してコンテンツの間隔を空けることです。 そして、あなたのすべての間隔を通してvwを使用することと一貫していることが重要です。 これにより、ウィンドウの幅を調整しているときに要素が壊れたりジャンプしたりすることなく、すべてのブラウザサイズで一貫してスケーリングを維持できます。 見出しテキストにvw長さの単位を使用することも重要であり、小さなブラウザウィンドウでテキストが新しい行に分割されないようにします。 ただし、見出しテキストの場合、テキストの縮小が大きすぎることに対応するために、タブレットとスマートフォンにピクセル単位を割り当てる必要があります。

パート1：はじめに

このチュートリアルに必要なのはDiviテーマだけです。 VisualBuilderをArchitectureFirmのホームページレイアウトと一緒に使用します。

したがって、開始するには、新しいページを作成し、ページにタイトルを付けて、VisualBuilderを展開します。 「既成のレイアウトを選択」オプションを選択します。 [ライブラリから読み込む]ポップアップで、[インテリアデザイン]レイアウトパックを選択してから、建築事務所のホームページレイアウトをページに読み込みます。

パート2：タイトルセクションの作成

手始めに、3つの宣伝文を含む2番目のセクションを複製します。

上部のセクションは2つの目的を果たすため、この設計には2つのセクションが必要です。 まず、以下のセクションのタイトルを保持します。 そして第二に、それは私たちがセクションディバイダーを使用してユニークなデザインを追加することを可能にします。

続けましょう。

元のセクション（重複ではない）で、3つの宣伝文を削除し、行の列構造を1列に変更します。

次に、レイアウトの一番下までスクロールして最後のセクションに移動し、左側の列のテキストモジュールをコピーします。

次に、作成した1列の行内に貼り付け、h2見出しの下にあるすべてのテキストコンテンツを削除して、「Let'sBuildSomething」だけが残るようにします。

パート3：5列レイアウトの宣伝文句のカスタマイズ

次に、3列の行内に元の3つの宣伝文を複製したセクションにアクセスします。 まず、行の構造を5列のレイアウトに変更しましょう。

最初の列の宣伝文モジュールの宣伝文の設定を開き、アイコンとして使用されている画像を削除します。

次に、最初の列に宣伝文句モジュールを複製します。 背景画像を保持するために上部の宣伝文が必要なため、このデザインでは列ごとに2つの宣伝文を使用します。

最初の列の上部の宣伝文の設定を開き、コンテンツボックスの本文を削除します。

上部の宣伝文モジュールに背景画像とグラデーションを追加します

次に、同じ宣伝文を背景画像に与え、次のように画像をオーバーレイするグラデーションを追加します。

背景画像を追加する
背景グラデーションの左の色：rgba（255,255,255,0）
背景グラデーションの右の色：rgba（18,18,18,0.65）
開始位置：50％
背景画像の上にグラデーションを配置：はい

グラデーションは、明るい背景画像でタイトルテキストを読みやすくするために必要です。

タイトルのテキストと間隔にVW単位を使用する

次に、デザインタブの設定を次のように更新します。

タイトルテキストサイズ：2.7vw（デスクトップ）、46px（タブレット）、36px（スマートフォン）
タイトル文字の間隔：-3px
カスタムマージン：左1.5vw、右1.5vw
カスタムパディング：上35vw、下2vw、左1vw、右1vw

設定を保存する。

35vwのカスタムトップパディングは、ユニークな長い垂直画像デザインを作成するものです。 さまざまなブラウザ幅でテキストのスケーリングを一貫して維持するために、タイトルテキストには2.7vwの値が与えられます。 後で行に間隔を追加すると、残りの間隔はより意味のあるものになります。

下部の宣伝文をカスタマイズする

次に、最初の列の下にある2番目の宣伝文モジュールの設定を開き、タイトルテキストを削除します。 次に、以下を更新します。

本文の配置：左
本文の色：＃666666
カスタムパディング：2vw上、2vw下、2vw左、2vw右

これで、最初の列に2つの宣伝文がデザインされました。 それらの両方をコピーして、残りの各列に貼り付けます。 最初に、2列目と3列目の元の宣伝文句モジュールを削除する必要があります。 これで、デザインは次のようになります。

パート4：セクション設定のカスタマイズ

次に、セクション設定を更新して、背景が白で下部にボックスシャドウがあり、行が重なるスペースを作成します。

背景色：#ffffff
カスタムパディング：デフォルトの上部、5vwの下部、デフォルトの左、デフォルトの右
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの垂直位置：-200px
ボックスシャドウブラー強度：0px
影の色：＃121212

パート5：行設定のカスタマイズ

次に、行に戻って、次のように設定を更新しましょう。

背景画像：#ffffff
行の配置：中央
カスタム幅：89％
側溝幅：1
カスタムマージン：-10vw
カスタムパディング：上3vw、下3vw、左1.5vw、右1.5vw
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウブラー強度：80px

チュートリアルで前述したように、カスタム幅とガター幅は、5列のレイアウトに必要なコンテンツスペースを作成するために不可欠です。

この時点で、設計の基本構造は完成です。 これまでのデザインは次のようになります。

パート6：最後の仕上げを追加する

これで、デザインの微調整をさらにいくつか追加して、仕上げることができます。

宣伝文句をずらす

まず、いくつかのパディングを減らして、宣伝文句の背景画像の高さをずらしてみましょう。 2行目の一番上の宣伝文モジュールの設定を開き、次のようにパディングを更新します。

カスタムパディング：28vwトップ

そして、3番目の列の上部の宣伝文句については、上部のパディングを30vwに変更します。

セクションディバイダーを追加して、5列の行にテクスチャを追加します

クールな設計手法の1つは、5つの列があるセクションの真上のセクションに上部セクションの仕切りを追加することです。 仕切りの背景は、上のセクションと重なっている場合でも、5列の行の背景に表示されます。 これを行うには、「Let's Build Something」というタイトルを含むセクションに移動し、次のように仕切りを付けます。

仕切りの色は、不透明度が15％のセクションの背景と同じ色であるため、仕切りは上部のセクションには表示されませんが、下のセクションと重なっている行に表示されます。 また、列にボックスシャドウを付けたため、ユニークなデザインが作成されます。

先に進んで、いくつかの背景画像を更新して、さまざまな画像でデザインがどのように見えるかをよりよく理解しました。

これが最終的なデザインです。

5列のレイアウトの優れた点の1つは、タブレットで2列のレイアウトがうまくできることです。

そして、これがスマートフォンでの様子です。

最終的な考え

レスポンシブレイアウトを作成するDiviの力を探求するのが大好きです。 5列のレイアウトの課題は、適切な手法を使用してコンテンツの間隔を適切に設定し、すべてのブラウザーサイズで適切にスケーリングしない限り、コンテンツの余地が実際にはあまりないことです。 このデザインが、次のプロジェクトで5列のレイアウトを使用するためのいくつかの可能性を紹介するのに役立つことを願っています。

コメントでお返事をお待ちしております。

乾杯！