Diviで円形要素を設計するための役立つガイド

時々ウェブサイトのデザインはいくつかの円形の要素を必要とします。 これは、Webページ上の標準的なボックスデザインの単調さから抜け出すための優れた方法です。 円形要素の作成は簡単に聞こえるかもしれませんが（実際はそうです！）、いくつかの基本的なルールに精通していない場合は、非常にイライラする可能性のあるいくつかの不要なハードルに遭遇する可能性があります。

たとえば、コンテンツを正しい間隔で円形の要素内に配置して収めることが難しい場合があります。 または、モバイルデバイスに対してサークルをレスポンシブにするのが難しい場合があります。 このため、代わりにコンテンツに円形の画像背景を使用することに頼っている人もいます。 ただし、カスタム画像の背景を使用したくない場合は、CSSを使用するのが次善の策です。 幸いなことに、Diviは、円形要素を作成するための独自のカスタムCSSを考案する必要がないため、プロセスがはるかに簡単になります。 したがって、Diviで要素に円の形を付けたい場合は、これが投稿です。

このチュートリアルでは、Diviで円形要素（セクション、行、モジュールを含む）を作成する方法の基本について説明します。 次に、これらの手法を事前に作成されたレイアウトに実装するのがいかに簡単かを示します。

見てみな！

スニークピーク

円形要素レイアウトの例を無料でダウンロードする

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

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

無料でダウンロード

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

ダウンロード

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

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに行きましょう。

始めるために必要なもの

開始するには、Diviで新しいページを作成します。 次に、ページにタイトルを付けて、フロントエンドにDiviビルダーをデプロイします。 「ゼロから構築」オプションを選択します。

また、少し後でページに既成のレイアウトを追加する予定ですが、今のところ、最初から構築を開始できます。

これで準備が整いました！

円形要素を作成するための3つの基本的な手順

円形要素を作成するには、実際には3つの簡単な手順があります。 これらの手順を説明するために、DiviBuilderを使用してこれらの手順をCalltoActionモジュールに適用します。

ステップ1：高さと幅の値が等しい要素のサイズを設定する

最初のステップは、高さと幅を同じ等しい値に設定することです。 基本的に、要素を完全な円にする前に、要素を完全な正方形にします。 この例では、アクションモジュールの呼び出しに10vwの高さと幅を与えましょう。

ステップ2：四隅すべてに50％の境界線半径を追加します

2番目のステップは、要素（またはモジュール）の境界半径を4つのコーナーすべてで50％に設定することです。 Diviでは、「RoundedCorners」というラベルの付いたオプションで要素の境界半径を変更できます。

ステップ3：円形要素内のコンテンツを整列させる

3番目のステップは、円形要素のコンテンツを整列させることです。 これは、要素のパディングを調整することで実行できます。 （また、この投稿の後半で、flexを使用してコンテンツを垂直方向に中央揃えにする方法についても説明します）

この例では、次のパディングを追加して、コンテンツを円形要素の中心に近づけることができます。

カスタムパディング：上18vw、左3vw、右3vw

もちろん、テキスト/コンテンツがモバイルの円形要素内に収まるようにするために行う必要のある調整はまだありますが、これは基本的な設定をカバーしています。

円形要素のサイズと間隔を決めるためにvw長さの単位を使用したことに気付くかもしれません。 これは、より一貫性のあるレスポンシブデザインを作成するのに役立ちます。 説明します。

相対長さの単位を使用して円形要素を応答性にする

高さと幅にVW長さの単位を使用

すべての相対的な長さの単位の中で、vwの長さの単位はレスポンシブデザインの私のお気に入りの1つです。 vwの長さの単位は、（親要素ではなく）ブラウザーウィンドウの幅を基準にしているため、ブラウザーウィンドウのサイズに合わせてスムーズに調整できる一貫したデザインを得ることができます。

ブラウザの幅を縮小すると、アクションモジュールへの循環呼び出しの例がどのように見えるかを見てみましょう。

円形要素のコンテンツにVW長さの単位を使用する

円形の要素のサイズとコンテンツにvwの長さの単位を使用することは、レスポンシブデザインに適した組み合わせです。 基本的に、これにより、コンテンツ（テキストや画像など）を円要素のサイズとシームレスに調整して、すべてのブラウザーで一貫したデザインを実現できます。 ただし、モバイルではテキストが小さくなりすぎる可能性があるため、本文テキストにvw長さの単位を使用する場合は注意が必要です。 見出しにvwの長さの単位を使用し、必要に応じて本文のサイズをピクセルで調整するのが好きです。

また、携帯電話のディスプレイに円形要素のデザインを維持することを計画している場合は、コンテンツを最小限に抑え、円形要素のサイズを調整してスペースを最大化する必要があります。

現在の例を使用すると、タイトルテキストにvwの長さの値を指定してから、次のようにモバイルでモジュールのサイズを変更できます。

タイトルテキストサイズ：4vw
幅（電話）：70vw
高さ（電話：70vw

ご覧のとおり、すべてのコンテンツは、電話ディスプレイの円形要素内にも適切に配置されています。

ピクセルはどうですか？

絶対長の単位（ピクセルなど）を使用して円のサイズを設定する場合は、まったく問題ありません。 円形の要素がブラウザウィンドウ内に収まるようにするには、タブレットと電話の表示の各ブレークポイントで必要なサイズ調整を確認して行う必要があります。 場合によっては、ピクセルを使用すると、タブレットや電話のディスプレイでサイズを適切に（またはより正確に）取得する方が簡単な場合があります。

たとえば、同じアクションモジュールの呼び出しを行い、（vwの代わりに）ピクセルを使用してモジュールのサイズと間隔を設定しましょう。

次のように、高さ、幅、およびパディングを更新できます。

幅：500px
高さ：500px
カスタムパディング：上200px、左20px、右20px

このデザインはデスクトップでも同じように見えますが、電話のディスプレイに円形の要素を表示すると問題が発生します。 円形要素はピクセル（絶対長単位）を使用してサイズ設定されるため、円形要素は電話ディスプレイのコンテナーとブラウザーの外側に拡張されます。

そのため、モバイルディスプレイの幅とパディングピクセル値を調整することが重要です。 たとえば、代わりに幅と高さを300pxに変更する必要がある場合があります。

％長さの単位が円形要素のサイズ設定に実際にうまく機能しない理由

円形要素に対してより応答性の高いソリューションが必要な場合は、パーセンテージを使用することが答えだと思うかもしれません。 ただし、Webページの要素のサイズを変更する場合、高さの長さのパーセンテージの単位は、幅の長さのパーセンテージの単位と同じようには機能しません。 これは、要素のデフォルトの高さが通常デフォルトのままであるためです（高さ：自動）。 したがって、たとえば、Diviモジュールに100％の高さを設定しようとすると、親コンテナ（列、行、セクションなど）の高さの値がすべて未定義であるため、モジュールは調整されません。 ブラウザは基本的にモジュールを100％ゼロに設定しようとはしていません（それはできません）。 これは幅には当てはまりません。 ブロック要素（またはdiv）のデフォルトの幅は100％です。 したがって、設定によって変更されない限り、すべてのセクション、行、およびモジュールのデフォルトの幅は100％です。 これが、応答性の高い円形要素を作成するときに使用するのに最適なオプションが長さの％単位ではない理由です。 円形要素は、すべてのブラウザサイズで同じ高さと幅を持つ必要があるため、高さに長さのパーセンテージ単位を使用してこれを実現することは困難です。 ただし、親要素に適用されるカスタムCSSを増やして、高さと幅を100％機能させる方法があります。 ただし、Diviで円形要素を作成する場合は、vw長さの単位の方が扱いやすい場合があります。

円形要素内のコンテンツの整列

円形の要素内でコンテンツを整列させたい場合は、Diviを使用するときに簡単だと思う2つのオプションがあります。 パディングを使用してコンテンツを整列させると、円要素内のコンテンツを表示する場所をより細かく制御できます。 または、flexプロパティ（パディングあり）を使用して、コンテンツが円の中心に直接表示されるようにすることもできます。

円形要素のコンテンツをパディングに合わせる

パディングを使用して円要素内のコンテンツを整列するには、相対的な長さの単位（％やvwなど）を使用して、コンテナーのサイズまたはブラウザーの幅に応じてパディングが増減するようにすることをお勧めします。 相対単位を使用してサイズ設定された円形要素の内側のパディングに絶対長単位を使用することは望ましくありません。 結果は一貫性がなく、モバイルではデザインが壊れてしまいます。 たとえば、高さが10vw、幅が10vwの円形要素があるとします。 その要素は、ブラウザの幅が縮小するにつれてサイズが縮小します。 要素の上部に100pxのパディングを追加した場合、ブラウザの幅を調整してデザインを壊すたびに100pxが残ります。 ただし、3vwのパディングを追加した場合、このパディングは要素に合わせて適切に調整されます。

これが、召喚モジュールの例でvwパディングを使用することを提案した理由です。

円形要素のコンテンツをFlexプロパティに合わせる

コンテンツが垂直方向の中央に配置されるように上下のパディングを配置することについてそれほど心配したくない場合は、flexプロパティを使用できます。 cssのスニペットを親（円形要素）にいくつか追加することで、すべてのコンテンツが垂直方向の中央に配置されたままになるようにすることができます。 次に、配置、パディング、またはマージンを使用して、コンテンツが水平方向の中央に配置されたままになるようにします。

これが私の言いたいことです。

この例を使用して、召喚状モジュールの設定を開きます。

次に、上下のパディングを0pxに設定します。

次に、[詳細設定]タブに移動し、次のCSSスニペットをメイン要素に追加します。

display:flex;
align-items: center;

この特定のモジュールでは、プロモーションの説明の下に追加のパディングがあり、アライメントが少しずれます。 したがって、次のCSSをプロモーションの説明に追加することでそれを取り除くことができます。

padding-bottom: 0px

詳細については、コンテンツを垂直方向に配置する方法について、この投稿を確認してください。

それを実践する：既成のレイアウトに円形要素を追加する

Diviで円形要素を作成する方法について理解が深まったところで、これが実際のレイアウト設計でどのように機能するかを見てみましょう。 この例では、Farmer LayoutPackのDiviのFarmerLandingPageを使用します。

ファーマーランディングページのレイアウトをページにロードします

開始するには、まずファーマーランディングページレイアウトをページに追加しましょう。 これを行うには、設定メニューとDivi Builderの下部を開き、[ライブラリからロード]ボタンをクリックします。 ライブラリからの読み込みポップアップで、Farmer LayoutPackを見つけて選択します。 次に、クリックしてファーマーランディングページを使用します。

これにより、レイアウトがページに読み込まれます。

円形セクションヘッダーの作成

最初の例では、レイアウトの上部ヘッダーセクションを円形要素に変換します。 これを行うには、次の3つの基本ルールを使用します。

1：高さと幅の値が等しい要素のサイズ
2：四隅すべてに50％の境界線半径を追加します
3：円形要素内のコンテンツを揃える

セクション設定を開き、以下を更新します。

幅：70vw（デスクトップ）、70vw（タブレット）、80vw（電話）
最大幅：1080px
セクションの配置：中央
高さ：70vw（デスクトップ）、70vw（タブレット）、80vw（電話）
最大高さ：1080px

タブレットと電話の高さと幅の値を追加し、さらに最大の高さと最大の幅も追加したことに注意してください。 重要なことは、すべての高さの値とすべての幅の値が等しいことを確認することです。

次に、四隅すべてに50％の境界半径を追加する必要があります。

丸みを帯びたコーナー：50％（4つのコーナーすべて）

これはセクションであるため、コンテンツには複数のモジュールを含む2列の行が含まれます。 これだけ多くのコンテンツがあるため、コンテンツがセクション内に収まるように、モジュールのサイズを調整する必要があります。

まず、セクションのタイトルを含む列1の一番上のテキストモジュールの設定を開きます。 次に、タイトルのテキストサイズを次のように更新します。

見出しテキストサイズ：4vw

次に、ヘッダーを含むテキストモジュールのすぐ下にあるテキストモジュールの本文テキストの量を減らします。

これで、行の間隔を調整してコンテンツを揃えることができます。 行設定を開き、以下を更新します。

カスタムマージン：10vwトップ（デスクトップ）、5vw（タブレット）、0vw（電話）
カスタムパディング：左3vw、右3vw

円の形をより目立たせるために、上部セクションの仕切りを追加し、背景画像の位置を左上に移動できます。

それでは、結果を確認してみましょう。

円形の宣伝文句モジュールの作成

それでは、このレイアウトに円形の宣伝文句を作成してみましょう。 この例では、「当社の製品」というタイトルのセクションにある4つの宣伝文モジュールを使用してみましょう。 それを見つけたら、列2の上部にある宣伝文モジュールの設定を開きます。

次に、モジュールのサイズを次のように更新します。

画像の幅：7vw
幅：50vw（デスクトップ）、80vw（電話）
最大幅：400px
モジュールの配置：中央
高さ：50vw（デスクトップ）、80vw（電話）
最大高さ：400px

次に、境界線の半径または丸みを帯びた角を追加します。

丸みを帯びた角：50％

その後、コンテンツのデザインと間隔を次のように更新しましょう。

画像/アイコンの配置：上
タイトルテキストサイズ：2vw（デスクトップ）、20px（タブレット）
テキストの向き：中央

カスタムパディング：0vw上、0vw下、4vw左、4vw右

最後に、次のカスタムCSSをメイン要素に追加して、flexプロパティを使用してコンテンツを垂直方向に配置しましょう。

display: flex;
align-items: center;

セクション内のすべての宣伝文に円形スタイルを拡張する

これで、最初のモジュールの円形デザインが処理されます。 ここで行う必要があるのは、宣伝文モジュールの設計設定をセクションの残りの3つの宣伝文に拡張することだけです。 これを行うには、先ほど設計した宣伝文モジュールを右クリックして、「宣伝文のスタイルを拡張する」を選択します。 [スタイルの拡張]ポップアップで、セクション全体にスタイルを拡張することを選択します。

最終結果

それでは、最終結果を確認しましょう。

最終的な考え

Diviで円形要素を作成する方法に関するいくつかの役立つヒントを学んだことを願っています。 3つの基本的な手順と、長さの単位を適切に使用して要素のサイズと間隔を設定する方法を理解することで、探している円形のデザインを非常に簡単に作成できます。 また、既存または作成済みのDiviレイアウトにいくつかの円形要素を組み込むことは非常に楽しい場合があります。 円形のモジュール、行、またはセクション全体の作成を自由に検討してください。

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

乾杯！