レスポンシブ流体Diviモジュールを作成する方法

公開: 2021-06-30

Diviモジュールの一貫したレスポンシブデザインを実装するプロセスをさらに簡素化するために、流動的なWebデザインの手法を適用できます。 レスポンシブデザインの従来の方法とは異なり、Fluid Webデザインは壊れたり、異なるブレークポイントで異なるサイズ/スタイルに突然ジャンプしたりすることはありません。 ビューポートの幅に対してレスポンシブな長さの単位が組み込まれているため、デザインは流動的に調整（またはスケーリング）され、すべてのデバイスでデザインの一貫性が保たれます。

このチュートリアルでは、流体Diviモジュールを作成する方法を紹介します。 同様の流体設計手法を使用して流体タイポグラフィや流体ボタンを作成し、ブラウザのビューポートとシームレスにスケーリングする流体Diviモジュールを作成します。 後でわかるように、秘密の組み合わせは、相対（または流動）長さの単位を持つルートボディのフォントサイズをモジュールに追加し、モジュール全体にemの長さの単位（ルートボディのフォントサイズに相対的）を組み込むことです。必要に応じて設定します。

始めましょう！

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

そして、これがこの流体モジュールの機能を示すコードペンです。

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする
無料でダウンロード

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

divi通知ボックス

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

コーナータブの拡張

開始するには、次のことを行う必要があります。

  1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
  2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
  3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

レスポンシブ流体Diviモジュールを作成する方法

行

まず、デフォルトの通常のセクション内に新しい1列の行を作成します。
レスポンシブ流体diviモジュール

行設定を開き、以下を更新します。

  • カスタムガター幅を使用：はい
  • 側溝幅：1
  • 幅：自動
  • 最大幅：100％
  • パディング：5vw上部、5vw下部

レスポンシブ流体diviモジュール

流動的な召喚状モジュールの設計

同じ流体設計手法をほぼすべてのDiviモジュールに追加できますが、このチュートリアルでは、Diviのアクションモジュールの呼び出しの1つに進みます。

列/行内にアクションモジュールへの新しい呼び出しを追加します。

レスポンシブ流体diviモジュール

コンテンツ設定

コンテンツ設定で、モックボタンのリンクURLを追加し、次のように背景色を更新します。

  • ボタンリンクURL：＃
  • 背景色：＃5e6472

レスポンシブ流体diviモジュール

モジュールへの流体ルートフォントサイズの追加

流動的なモジュールを設計するときは、流動的なルートフォントサイズをモジュールに追加する必要があります。 モジュールに追加されると、このルートフォントサイズは、em長さの単位を使用して残りのモジュール設計設定全体に動的に組み込まれます。

流動的なルートフォントサイズをモジュールに追加するには、[詳細設定]タブに移動し、次のカスタムCSSをメイン要素に追加します。 

font-size: clamp(16px, 2vw, 24px);

レスポンシブ流体diviモジュール

このフォントサイズでは、CSS Clamp（）関数を使用して、最小フォントサイズ、流動フォントサイズ（必要な場合）、および最大フォントサイズを設定しています。

レスポンシブ流体diviモジュール

emの長さの単位値を使用して、デフォルトの間隔で要素をオーバーライドする

絶対に必要というわけではありませんが、モジュールの真の流動的な設計を得るには、モジュールが現在使用しているデフォルトの（舞台裏の）間隔を、そのプロパティのem長さの単位値でオーバーライドする必要があります。 これらは、ブラウザ開発ツールを使用して要素を検査することで識別できます。 この場合、召喚状モジュールには、プロモーションの説明とプロモーションのタイトル要素の両方に下部のパディングがあります。 下部のパディングプロパティはピクセル（px）の長さの単位を使用しているため、メイン要素に追加したルートボ​​ディのフォントサイズを組み込むemの長さの単位でそれぞれをオーバーライドする必要があります。

レスポンシブ流体diviモジュール

emの長さの単位でデザインを更新する

モジュールの流動的なルートフォントサイズが設定されたので、必要なのは、emの長さの単位を使用してモジュールのデザインを更新することだけです。 emの長さの単位はルートフォントサイズを基準にしているため、emの長さの単位を使用するデザインは、フォントサイズの流動性を継承し、必要に応じてフォントサイズに合わせて流動的にスケーリングします。

本文

以前に追加したカスタムルートフォントサイズは、本文テキストを念頭に置いて意図的に作成されています。 したがって、ルートフォントサイズの正確な値を継承する1emの値で本文テキストを割り当てることができます。 ボディラインの高さも追加できます。 これを行うには、以下を更新します。

  • 本文サイズ：1em
  • ボディラインの高さ：1.8em


レスポンシブ流体diviモジュール

タイトルテキスト

モジュールのタイトルテキスト要素については、emの長さの単位を使用してより大きなサイズを指定できます。 以下を更新します。

  • タイトルテキストサイズ：1.7em
  • タイトルラインの高さ：1.3em


レスポンシブ流体diviモジュール
タイトルのテキストサイズが実際にどのくらいになるかを知るために、emの長さの値にルートフォントの値を掛けるだけです。 ルートフォントサイズは、clamp（）を使用して、最小（16px）、流動（2vw）、および最大（24px）のフォントサイズを確立していることを忘れないでください。 したがって、最小タイトルのテキストサイズは16pxの1.7倍になり、27.2pxに近くなります。 流動的なフォントサイズは、2vwの1.7倍（ビューポート幅の2％）になります。 また、最大フォントサイズは24pxの1.7倍になり、69.36pxに近くなります。

ボタンのデザイン

モジュールの3番目の要素はボタンです。 emの長さの単位値を使用してボタンのデザイン設定を更新し、流体デザインを組み込むこともできます。
次のボタン設定を更新します。

  • ボタンのテキストサイズ：1.3em
  • ボタンのボーダー幅：0.12em
  • ボタンの境界半径：1.5em
  • ボタンの文字間隔：0.1em
  • ボタンのパディング：上0.1em、下0.1em、左2em、右2em

レスポンシブ流体diviモジュール

サイズと間隔

モジュールに流体サイズと流体間隔があることを確認するには、これらの値にもem長さの単位を使用する必要があります。

次のサイズと間隔の設定を更新します。

  • 最大幅：40em
  • 最小高さ：0vw
  • マージン：上0.5em、下0.5em、左自動、右自動
  • パディング：上2.5em、下2.5em、左2em、右2em

レスポンシブ流体diviモジュール

結果

次に、ライブページでブラウザの幅を調整するときのfluidモジュールの結果を見てみましょう。


CSSグリッドを使用して複数の流体モジュールを連続して追加する

複数の隣接する流体モジュールを1行に追加するには、流体モジュールの設計が親コンテナの幅によって制限または停止されていないことを確認する必要があります。 つまり、モジュールの親コンテナ（列）をautoに設定して、モジュールのサイズに合わせてスケーリングできるようにする必要があります。 これを行うには、列レベルでCSSグリッドを使用して、各列に自動幅があるグリッド内の各モジュールを設定します。

モジュールのサイズと間隔を調整する

モジュールのCSSグリッドを作成する前に、モジュールの最大幅とマージンを、2つのモジュールを含む2列のレイアウトに適したサイズに調整する必要があります。

モジュールの設定を開き、以下を更新します。

  • テキストの配置：左
  • 最大幅：24em
  • マージン：左0.5em、右0.5em


レスポンシブ流体diviモジュール

重複モジュール

次に、モジュールを複製して、同じ列に別のモジュールを作成します。

レスポンシブ流体diviモジュール

CSSグリッドを列に追加

これで、カスタムCSSを列に追加して、モジュールのCSSグリッドを作成できます。

[詳細設定]タブで、デスクトップビューのメイン要素に次のCSSを追加します。 

display:grid;
grid-template-columns: auto auto;
justify-content:center;

次に、電話ビューのメイン要素に次のCSSを追加します。 

display:grid;
grid-template-columns: auto;
justify-content:center;

これにより、2つのモジュールがデスクトップ上の2列のグリッド（それぞれに自動幅があります）に設定されます。 その後、電話で、モジュールは1列（自動幅）グリッドに戻ります。

レスポンシブ流体diviモジュール

結果

結果を確認してください。

最終結果

流体モジュールが完成したら、組み込みのデザイン設定を使用してモジュールスタイルを更新し、カスタムフォント、色などを指定できます。

これは、異なるフォント、フォントの色、ボタンの色、および背景色を使用した最終結果の外観です。

最終的な考え

このチュートリアルで見たように、Diviモジュールに流動的なデザインを組み込むことは、特定のブレークポイントでデザインを更新する手間をかけずに、モジュールがすべてのブラウザーサイズで美しく一貫した外観になるようにする便利な方法です。

流体タイポグラフィや流体Diviボタンの作成ガイドなど、流体デザインに関する他の記事も忘れずにチェックしてください。

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

乾杯！