Diviの固定位置を理解して使用するためのガイド

固定位置プロパティは、適切な使用方法を学ぶための重要な位置タイプです。 固定要素は、Webサイトのユーザーエクスペリエンスを向上させるために重要です。 修正されたヘッダーは、Webページをスクロールするときに表示されたままになり、ユーザーがサイトをナビゲートしやすくなります。 固定サイドバーは重要なCTAとEメールオプチンを表示し続け、コンバージョンを促進します。 そして、同じことが固定通知バー、ポップアップ、および他の多くにも当てはまります。 固定位置がどのように機能し、Diviで適切に使用するかを理解すると、Diviサイトを次のレベルに引き上げるための強力な設計ツールが得られます。

この投稿では、以下について説明します。

• ディビの4種類のポジショニングの概要
• 固定位置がDiviで要素を「位置」する方法
• Diviでの固定位置オプションの使用
• 固定位置を使用する際の注意点
• Diviで固定位置を使用する6つの便利な方法

見てみな！

ディビの4種類のポジショニングの概要

固定位置は、Diviの位置オプションで使用できる4つの位置タイプの1つです。 以下に、それぞれの概要を示します。

静的（デフォルト）

静的要素は、ページ上の要素の通常のフローまたは順序のままであり、他の配置された要素のように上、右、下、および左のプロパティに応答しないため、技術的には「配置」されません（これが理由ではありません）静的/デフォルト位置の要素のオフセットはDiviで使用できます）。 Diviでは、モジュールのデフォルトの位置を選択するとき、静的な位置を選択しています。 Diviの一部の要素（行やセクションなど）には、デフォルトで相対位置（静的位置ではない）があることにも言及する価値があります。

相対的

相対的に配置された要素は、ページの通常の流れに従うという点で静的要素のようなものです。 主な違いは、比較的配置された要素は、top、bottom、left、およびrightプロパティを使用して配置できることです。 また、静的要素とは異なり、ZIndexプロパティを使用して配置することもできます。

詳細については、Diviでの相対的な位置を理解して使用するためのガイドをご覧ください。

絶対

絶対配置された要素は通常のドキュメントフローから外れるため、要素のページに実際のスペースは作成されません。 これは、実際のスペースを占めるページ上の他の要素の上に浮かんでいる要素と考えることができます。 最も近い位置にある親コンテナを基準にして配置されます。

詳細については、Diviの絶対位置を理解して使用するためのガイドをご覧ください。

修理済み

絶対位置と同様に、固定位置の要素はページの通常のフローから外れ、ページ内に実際のスペースは作成されません。 絶対位置と固定位置の主な違いは、固定位置がブラウザウィンドウまたはビューポートを基準にしていることです。 つまり、要素がページの通常のフロー内のどこにあるかに関係なく、固定位置が指定されると、その位置はブラウザウィンドウに直接関連するようになります。 top、bottom、left、およびrightプロパティを使用して、ビューポート内に要素を配置できます。 固定要素はページ上の他の要素の後ろまたは前に浮かぶことが多いため、Zインデックスは固定要素を他の要素の上に並べるのに役立ちます。

注：CSSには、スティッキーと呼ばれる別のタイプのポジショニングがあります。 スティッキーに配置された要素は、コンテナまでスクロールするまで（ある時点で一番上の値によって決定される）、比較的配置された要素のように動作します。 次に、ユーザーがコンテナーの最後までスクロールするまで、要素は固定（またはスタック）になります。 ただし、他の要因によって機能が阻害される可能性があるため、スティッキーの位置は少し予測できない場合があります。 スティッキーポジショニングは、近い将来、Diviに組み込まれる予定です。

固定位置がDiviで要素を「配置」する方法

概要で述べたように、固定位置タイプは、要素がドキュメント（ページ上のHTML）の通常のフローから外れるため、絶対位置に似ています。 ドキュメントのフローから抜け出すということは、要素がページ上に最初に配置されていた実際のスペースを残さないことを意味します。 これは、相対位置が固定位置に変更されたモジュールの図です。 列内で最初に作成/占有されていた領域がなくなり、モジュールがブラウザウィンドウの左上に固定されていることに注目してください。

固定位置と絶対位置の大きな違いは、親コンテナを基準にした絶対位置とは異なり、固定位置はブラウザウィンドウまたはビューポートを基準にしていることです。 これが、ユーザーがページを下にスクロールしたときに固定要素が表示され、絶対位置の要素が表示されない場合がある理由です。

これは、ページを下にスクロールしたときに3つの位置（相対、絶対、固定）がどのように機能するかを示しています。 ユーザーがスクロールしても、固定モジュールは所定の位置（ブラウザーに対して相対的な位置）にとどまることに注意してください。

Diviでの固定位置オプションの使用

Diviでは、[詳細設定]タブの[位置]オプショングループのトグルで[固定位置]オプションを選択することにより、任意の要素に固定位置を指定できます。 相対位置を選択すると、追加の固定位置オプション（位置、オフセット、zインデックス）も表示されます。

固定位置のベース位置の調整

固定位置を選​​択すると、ビジュアルロケーションインターフェイスを使用してベースロケーションを選択できます。 選択したベース位置に応じて、新しいXおよびYオフセットコントロールが使用可能になります。

固定位置でのオフセットの使用

垂直および水平オフセットコントロールを使用すると、固定要素のベース位置をその位置軸全体でさらに調整できます。

オフセット原点とオフセット値は連携して、ブラウザのビューポート内の任意の場所に要素を配置します。 この例では、固定位置、左上のオフセット原点、50pxの垂直オフセット、および50pxの水平オフセットを持つモジュールがあります。 オフセット値が要素をオフセット原点から水平方向および/または垂直方向（ブラウザの左上隅から）に移動する方法に注意してください。

固定要素にDiviの水平および垂直オフセット値（CSSのtop、bottom、left、rightプロパティなど）を使用する場合、これらの値はブラウザーのビューポートを基準にして要素を配置することを覚えておくことが重要です。 Z Indexプロパティは、固定要素にも役立ちます。 ほとんどの場合、これらの固定要素をページ上の他の要素の前に配置する必要があるため、高いZインデックス値（9999など）を指定する必要があります。

ドラッグ可能なアンカーを使用して、ページ上の固定要素を再配置します

要素の位置を[固定]に変更すると、要素にカーソルを合わせるとドラッグ可能なアンカーが表示されます。 これにより、要素をドラッグしてその位置を変更できます。 要素を再配置すると、そのXおよびYオフセットがモジュール設定内で調整されます。

固定ポジショニングを使用するためのいくつかのヒント

モバイル用の固定要素を調整する

レスポンシブデザインのために、さまざまなデバイスディスプレイにさまざまな位置とオフセットを設定できることを忘れないでください。 たとえば、デスクトップでは固定ヘッダーが必要なが、モバイルでは必要ない場合があります。 また、固定サイドバーはデスクトップには意味がありますが、携帯電話のディスプレイでは実際には不可能です。 切り替えを行うには、タブレットと電話でDiviの位置オプションをRelativeに調整します。 これにより、ドキュメントのフロー内の元の位置にスナップバックされます。

固定要素用のスペースを作成する

固定位置では要素がドキュメントフローの外側に配置されるため、要素はページのコンテンツの上に配置されます。 したがって、固定要素でコンテンツを非表示にしたくない場合は、固定要素用のスペースを作成する必要があります。 これはさまざまな方法で実行できますが、通常はページレイアウトにパディングまたはマージンを追加することで実現されます。

良い例は固定サイドバーです。 Diviのページテンプレートに固定サイドバーを追加する場合は、最初にメインコンテンツ領域の幅を狭くして、固定サイドバーに必要なスペースを作成する必要があります。 したがって、セクションを使用してサイドバーを作成する場合は、セクションに固定位置、高さ100％、幅300pxを指定できます。

次に、投稿コンテンツモジュール（ページのメインコンテンツ領域）を保持する他のセクションに、ページの左側のサイドバーの幅に対応するために300pxの左マージンを与える必要があります。

固定要素にはより高いZインデックスを使用する

固定要素にページ上で十分なスペースが与えられていない限り、固定要素はページ上の他のコンテンツとオーバーラップします。 ほとんどの場合、スクロール中に固定要素がページ上の他の要素と衝突するときに、固定要素を（上部に）表示したままにしておきます。 これを行うには、固定要素に高いZインデックスを追加して、Z空間内の他のすべてのコンテンツよりも上にとどまるようにします。 与える値がわからない場合は、9999のような大きな数値を追加できます。

固定位置を使用する6つの方法

＃1固定ヘッダー

新しい固定位置オプションの最良の使用法の1つは、固定ヘッダーの作成です。 Divi Theme Builderを使用すると、完全にカスタムヘッダーを作成し、セクション全体を修正できます。

投稿方法

Diviで固定ヘッダーを作成する方法に関する投稿は次のとおりです。

• Diviの位置オプションを使用して固定ヘッダーを作成する方法

＃2固定フッターバー

固定ヘッダーと同様に、一部のWebサイトも固定フッターまたはフッターバーの恩恵を受けています。 これにより、ユーザーは目立つ情報を最前線のより微妙な場所に保持できます。 固定フッターバーは、ボタンをクリックするかゆみを伴う親指に非常に近いため、携帯電話に最適です。

ハウツー投稿

Diviで固定フッターバーを作成する方法に関するいくつかの投稿を次に示します。

• Diviテーマの固定フッターバーを作成する方法
• Diviで固定モバイルフッターバーを作成する方法
• Diviで（固定）モバイルコンタクトバーを作成する方法

＃3固定サイドバー/垂直メニュー

固定サイドバーにより、訪問者がサイトをナビゲートするときに、メニュー、電子メールオプトイン、CTAなどをすぐに利用できるようになります。 また、必要に応じて、固定サイドバーにオーバーフロースクロールを追加して、大量のコンテンツを含むスクロール可能な固定サイドバーを作成できます。

ハウツー投稿

Diviで固定サイドバーを作成する方法に関する投稿は次のとおりです。

• Diviでスムーズなスクロールアンカーリンクを使用してレスポンシブ固定サイドバーを構築する方法
• Divi Webサイトの垂直（固定）ナビゲーションメニューを作成する方法

＃4固定されたトップに戻るボタン

[トップに戻る]ボタンは通常、Webサイトの右下に固定されており、ユーザーがページの上部に戻すためにいつでもクリックできるようになっています。

これは、Diviで固定されたトップに戻るボタンを作成する方法に関する投稿です。

• Diviを使用してカスタムスティッキー（固定）トップに戻るデザインを作成する方法

＃5固定メニュー

スライドインまたはポップアップするほとんどのメニューの位置は固定されています。 これらはモバイルにも最適です。

Diviで固定メニューを作成する方法に関する投稿は次のとおりです。

• Diviのテーマビルダーを使用してレスポンシブスライドインメニューを作成する方法

＃6通知ボックス、召喚状、メールオプトインなどを修正…

Diviで固定通知ボックスを作成する方法に関する投稿は次のとおりです。

• Diviのページテンプレートの任意の隅に閉じることができるスライドインの召喚状を追加する方法

最終的な考え

固定位置を使用する必要に遭遇する前に、Web開発にそれほど遠くまで行くことはありません。 これは、Webサイトを構成する多くの重要な要素で使用されます。 ディビでは、固定位置はクリックするだけですが、それをうまく使用するためにどのように機能するかを理解することが重要です。 この記事が、Diviの固定位置をより適切に使用して、次のプロジェクトを新たな高みに引き上げる方法を理解するのに役立つことを願っています。

固定位置タイプでの経験は？

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

乾杯！