Diviで流体ボタンデザインを作成するための完全ガイド

公開: 2021-05-28

流動的なボタンの設計は、ブラウザウィンドウ（またはビューポート）のサイズに応じて流動的に拡大縮小するボタンを設計するプロセスです。 これには、ボタンのすべてのデザインプロパティに流動的なウェブデザインの手法を適用することが含まれます。 これにより、ボタンのデザインがすべてのデバイスで予測可能で一貫性のあるものになります。 また、特定のブレークポイントでデザインに多数の調整を加えることを含む、従来のレスポンシブデザイン手法のさわやかな代替手段です。

このチュートリアルでは、Diviで流動的なボタンのデザインを作成するプロセスをガイドします。 これが私たちがカバーするものです：

  • ディビボタンの構造
  • Diviで流体ボタンを作成する方法
  • emの長さの単位を理解する
  • ボタンにFluid（またはScaler）フォントサイズを使用する
  • 流体Diviボタンの構造
  • Diviでの流体ボタンデザインの作成（5つのサンプルデザイン）
  • フォントサイズにClamp（）を使用した流体ボタン

流体ボタンの設計は流体タイポグラフィの実装に依存しているため、Diviの流体タイポグラフィに関する完全なガイドを確認すると役立つ場合があります。

始めましょう！

スニークピーク

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

そして、これがこの流動的なボタンのデザインコンセプトを示すコーデックです。

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

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

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

無料でダウンロード

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

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

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

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

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

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

divi通知ボックス

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

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

始めるために必要なもの

コーナータブの拡張

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

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

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

ディビボタンの構造

diviの流体ボタンデザイン

デフォルトでは、Divi Buttonには、pxとemの両方の長さの単位を含む組み込みのスタイルがあります（上の図を参照）。 pxの長さの単位を使用するプロパティは次のとおりです。

  • フォントサイズ：20px
  • 丸みを帯びた角：3px
  • ボーダー幅：3px
  • アイコンフォントサイズ：フォントサイズ（20px）に継承

これらのpx値は絶対値であり、フォントサイズやブラウザのビューポートのサイズを変更しても同じままです。

emの長さの単位を使用するプロパティは次のとおりです。

  • パディング：上0.3em、下0.3em、左0.7em、右2em
  • 線の高さ：1.7em
  • アイコン左マージン：0.3em

これらのem値は、要素（またはボタン）のフォントサイズに関連しており、フォントサイズが変更されるたびに変更（拡大縮小）されます。

Diviで流体ボタンを作成する方法

emの長さの単位を理解する

Diviで流動的なボタンを作成するための鍵は、長さの単位がどのように機能するかを理解することです。 emの長さの単位は、要素のフォントサイズ（それが何であれ）を基準にしています。 基本的に、emの値は要素のフォントサイズの倍数です。 たとえば、要素のフォントサイズが20pxの場合、2emは2（20px）と同じです。 これは、要素のフォントサイズが変更されるたびに、emの長さの単位が変更されることを意味します。 ただし、pxの長さの単位は変更されません。

diviの流体ボタンデザイン

デフォルトの例を続けると、ボタンのデフォルトの右パディングは2em（またはemの2倍）です。 ボタンのフォントサイズが20pxであるため、右側のパディングは20px（40px）の2倍になります。 上下のパディングは0.3emです。 したがって、上下のパディングは6pxです（20pxの0.3倍は6pxに相当します）。

フォントサイズに基づくemの長さの単位の実際の値を理解するには、次の図を参照してください。

diviの流体ボタンデザイン

ボタンにFluid（またはScaler）フォントサイズを使用する

emの長さの単位を使用して流動的なボタンを設計する場合、すべてがボタンのフォントサイズのサイズに依存します。 別の言い方をすれば、フォントサイズは、ボタンのem長さの単位を使用してすべてのプロパティの値に適用されます。 したがって、ボタンのスタイルを流動的にしたい場合は、ボタンに流動的な（またはスケーラー）フォントサイズを指定する必要があります。 使用する最も一般的な流体の長さの単位は、ブラウザのビューポートの幅を基準にしたvwの長さの単位です。 つまり、ブラウザの幅が変わると、vwの長さの単位も変わります。

滑らかなボタンを作成するには、20pxのフォントサイズを2.4vwのようなものに置き換えます。 この値はブラウザの幅によって変化するため、emの長さの単位を使用するすべてのボタンのプロパティは、ブラウザの幅にも比例します。

流体Diviボタンの構造

簡単に言えば、流動的なDivi Buttonの構築には、次の2つの主要な原則が含まれます。

  1. フォントサイズには流動的な長さの単位（vw）を使用します
  2. すべてのボタンスタイルのプロパティにemの長さの単位値を使用する

これは、境界線の幅、境界線の半径、さらにはボックスの影にもemの長さの単位を使用できることを意味します。

これは、すべてのスタイルプロパティの流動的なフォントサイズ（2.4vw）とemの長さの単位を含む流動的なボタンの図です。

diviの流体ボタンデザイン

emの長さの単位を使用した各プロパティの実際の値は、流動的なフォントサイズの値を継承し、ブラウザのビューポート幅（vw）を基準にしてスケールします。

diviの流体ボタンデザイン

Diviで流体ボタンのデザインを作成する

これで、流動的なボタンを作成する方法について理解が深まりました。 Diviでいくつかの滑らかなボタンのデザインを作成しましょう。

＃1基本的な例

まず、前に説明した基本的な例を作成しましょう。

Divi Builderから、新しい1列の行を作成します。

diviの流体ボタンデザイン

[デザイン]タブで、ボタンのテキストサイズをvwの長さの単位値で更新して、ビューポートの幅に合わせて拡大縮小します。

  • ボタンのテキストサイズ：2.4vw（デスクトップとタブレット）、18.4px（電話）

次に、ボタンのテキストサイズに関連するemの長さの単位値で次のプロパティを更新します。

  • ボタンのボーダー幅：0.15em
  • ボタンの境界半径：1.3em
  • ボタンの文字間隔：0.05em
  • パディング：上0.3em、下0.3em、左1em、右2em
  • ボックスシャドウ：スクリーンショットを参照
  • ボックスシャドウの垂直位置：0.15em

diviの流体ボタンデザイン

これが最終結果です。

角が丸く、ボックスシャドウが付いた＃2流体ボタン

開始するには、新しいボタンを作成し、ボタンのテキストを「はじめに」に更新します。

diviの流体ボタンデザイン

[デザイン]タブで、以下を更新します。

  • ボタンにカスタムスタイルを使用する：はい
  • ボタンのテキストサイズ：2.4vw（デスクトップとタブレット）、18.4px（電話）
  • ボタンのテキストの色：＃000000
  • ボタンの背景色：#ffffff（デスクトップ）、＃d9f9e9（ホバー）
  • ボタンのボーダー幅：0.15em
  • ボタンの境界線の色：＃d9f9e9
  • ボタンの境界半径：1.3em

diviの流体ボタンデザイン

  • ボタンの文字間隔：0.05em
  • ボタンフォント：Jura
  • ボタンのフォントの太さ：半太字
  • ボタンアイコン：右矢印
  • ボタンアイコンの色：＃000000
  • ボタンのホバー時にアイコンのみを表示：いいえ

diviの流体ボタンデザイン

  • パディング：上0.2em、下0.2em、左1em、右2em
  • ボックスシャドウ：スクリーンショットを参照
  • ボックスシャドウの垂直位置：0.3em
  • ボックスシャドウブラー強度：0.5em
  • ボックスシャドウスプレッド強度：-0.3em

diviの流体ボタンデザイン

結果は次のとおりです。

ユニークなボックスシャドウとアイコン配置を備えた＃3流体ボタン

この次の流動的なボタンのデザインでは、独自のボックスシャドウとアイコンの配置を使用します。

開始するには、前の例＃2を複製します。 次に、複製ボタンの設定を開いて、デザインを更新します。

[デザイン]タブで、以下を更新します。

  • ボタンの境界線半径：0px
  • ボタンアイコンの色：#ffffff
  • ボックスシャドウ：スクリーンショットを参照
  • ボックスシャドウの水平位置：-1.75em
  • ボックスシャドウの垂直位置：0px
  • 影の色：＃000000

[詳細設定]タブで、次のカスタムCSSをAfter要素に追加します。 

margin-right: .3em;
right: 0;

diviの流体ボタンデザイン

結果は次のとおりです。

＃43色の背景グラデーションの流体ボタン

この次の流動的なボタンのデザインでは、背景のグラデーションと独自のボックスシャドウスタイルを組み合わせて、ボタンの独自の3色の背景のグラデーションを作成します。

ボタンを作成するには、以前に設計した例の＃3ボタンを複製します。

次に、ボタン設定を開いてスタイルを更新します。

[詳細設定]タブで、AfterElement内のカスタムCSSを削除します。

[デザイン]タブで、以下を更新します。

  • ボタンのテキストの色：#ffffff
  • ボタンの背景のグラデーション左の色：＃f475ee
  • ボタンの背景のグラデーションの右の色：＃9694fc
  • グラデーション方向：90度
  • 終了位置：2.5em
  • ボタンの境界線の幅：0px
  • ボックスシャドウ：スクリーンショットを参照
  • ボックスシャドウの水平位置：-2.5em
  • ボックスシャドウの垂直位置：0px
  • ボックスシャドウブラー強度：1.5em
  • ボックスシャドウスプレッド強度：-1em
  • 影の色：＃85c6f2

diviの流体ボタンデザイン

そして、これが結果です。

＃5カスタム流体幅の流体ボタン

この次の流体ボタンのデザインでは、ボタンにカスタムの流体幅を追加します。 これにより、ブラウザの幅に合わせて滑らかに拡大縮小する大きなボタンを作成できます。

ボタンを作成するには、以前に設計した例2のボタンを複製します。

[デザイン]タブで、[ボタンの配置]を[中央揃え]に更新します。

[詳細設定]タブで、次のカスタムCSSをメイン要素に追加します。

デスクトップ

display:block;
width: 100%;
max-width: 15em;

diviの流体ボタンデザイン

結果は次のとおりです。

最終結果

次に、4つの流体ボタンデザインの最終結果を確認します。

フォントサイズにClamp（）を使用した流体ボタン

流体ボタンの最小サイズと最大サイズをより細かく制御したい場合は、CSS Clamp（）関数を使用して、最小フォントサイズ、スケーラーフォントサイズ、および最大フォントサイズを設定できます。

これを行うには、各ボタンのボタンのテキストサイズをリセットして、デフォルト設定に戻す必要があります。

diviの流体ボタンデザイン

次に、[詳細設定]タブで、次のCSSを各ボタンのメイン要素に追加します。

diviの流体ボタンデザイン

これにより、フォントサイズの最小サイズが20px、スケーラー（または流動）サイズが4vw、最大サイズが40pxになります。

クランプ（）を使用する主な利点は、流体のレスポンシブデザインを維持しながら、ボタンのスケーリングが大きすぎたり小さすぎたりするのを防ぐことができることです。

Clamp（）による最終結果

再び最終結果

そして、これがフォントサイズとしてclamp（）がある場合とない場合の流動的なボタンの各コレクションの最終的な外観です。

vwの長さのフォントサイズ（デスクトップとタブレット）とpxの長さの単位（電話）を使用する

最小、スケーラー、および最大フォントサイズを設定するためのclamp（）の使用

最終的な考え

Diviで流動的なボタンを作成するには、2つの主要な原則に依存します。（1）ボタンのフォントサイズに流動的な長さの単位（vwなど）を使用すること、および（2）ボタンのすべてのスタイルプロパティにemの長さの単位値を使用することです。 それを理解したら、（vw、clamp（）などを使用して）適切な流動的なフォントサイズを見つけて調整し、ボタンの残りのデザインにさまざまなemの値を使用することが重要です。 これにより、ブラウザのビューポート幅を調整するときに、ボタンが完全に滑らかに拡大縮小されます。

覚えておいてください。 親コンテナも流動的でない場合、流動的ボタンは実際には機能しません。 たとえば、400pxの行の内側に流動的なボタンがある場合、ボタンには拡大縮小する余地がなく、デザインが壊れます。 行に80％または90vwの幅を与えると、流動的なボタンの設計に適しています。

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

乾杯！