Diviでオーバーフローオプションを使用する3つの便利な方法

公開: 2019-06-02

Diviの組み込みのオーバーフローオプションを使用すると、ページ上の任意の要素にオーバーフローcssプロパティ（つまり、表示、非表示、スクロール）を非常に簡単に追加できます。これは、ユニークなデザインやスクロール可能なコンテンツを簡単に作成するのに役立ちます。この投稿では、これらのオーバーフローオプションが実際に何をするのかを見ていきます。また、独自のDiviサイトでオーバーフローを使用するための3つの便利な方法について説明します。

始めましょう。

Diviのオーバーフローオプションを理解する

diviオーバーフローオプション

Diviのオーバーフローオプションを使用すると、要素のcssオーバーフロープロパティを次のいずれかの値に設定できます。

デフォルト–デフォルト値が表示されます（以下を参照）。
表示–オーバーフローしたコンテンツは表示されたままになり、ボックスの外側に拡張してもクリップされません。これはDiviのデフォルト設定であるため、選択する必要はほとんどありません。
スクロール–オーバーフローしたコンテンツは非表示になりますが、ユーザーは非表示のコンテンツを垂直方向または水平方向にスクロールできます。
非表示–ボックスの外側にオーバーフローしたコンテンツは非表示になります（スクロール機能なし）
自動–このオプションは、必要に応じてスクロール機能を使用します（つまり、コンテンツがボックスを超えて拡張されます）。これは、小さいブラウザでスクロール機能が必要な高さまたは幅が設定されたデザインに役立ちます。

Diviには、水平オーバーフローと垂直オーバーフローの両方のオーバーフローオプションがあり、それぞれに異なるプロパティ値を設定できます。これは、要素に垂直スクロール機能を追加したいが、スクロールバーも水平に表示したくない場合に便利です。

オーバーフローオプションがどのように機能するかを理解するのに役立つ、このチュートリアルのデザインから抜粋したいくつかの簡単な図を次に示します。

オーバーフロー表示（デフォルト）

この例では、行コンテナの外側に配置されたコンテンツは表示されたままになります。これは、Diviのすべての要素のデフォルト設定です。

diviオーバーフローオプション

オーバーフローを非表示

オーバーフロー非表示プロパティを行に追加すると、ボックスの外側のコンテンツがクリップされ、ビューから完全に非表示になります。

diviオーバーフローオプション

オーバーフロースクロール

オーバーフロースクロールを使用すると、ボックスコンテナの外側にコンテンツを非表示にできます（オーバーフローを非表示にするのと同じように）。主な違いは、スクロールバーが表示され、ユーザーがコンテナーの制限を超えて存在するコンテンツをスクロールできることです。

たとえば、高さが400pxのテキストモジュールを次に示します。テキストモジュールのコンテンツはテキストモジュールを超えて拡張されますが、デフォルトでは表示されたままです。

diviオーバーフローオプション

ただし、垂直オーバーフロースクロールプロパティをテキストモジュールに追加すると、スクロールバーが表示され、ユーザーは非表示のコンテンツをスクロールできます。

diviオーバーフローオプション

オーバーフローオプションについてもう少しよく理解できたので、実際にそれらを使用するのに役立つ方法のいくつかの実用的な例を作成してみましょう。

私たちのYoutubeチャンネルを購読する

DiviでDiviのオーバーフローオプションを使用する3つの便利な方法

＃1独自のデザインのためにオーバーフローコンテンツをクリップするために非表示のオーバーフローを使用する

オーバーフロー非表示プロパティの使用方法を理解するために、オーバーフローするテキストとオーバーフローする画像を使用した簡単なサンプルデザインを作成します。次に、行をオーバーフロー非表示に設定したときにデザインがどのように変化するかを確認します。

まず、1列の行を持つ通常のセクションを作成します。モジュールの追加を開始する前に、セクションに次のパディングを付けましょう。

カスタムパディング：12vw上部、12vw下部

diviオーバーフローオプション

次に、次のように行設定を更新します。

幅：80vw
最大幅：80vw
パディング：0px上、0px下
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウブラー強度：80px

diviオーバーフローオプション

次に、テキストモジュールを行に追加し、次のテキストモジュール設定を更新します。

まず、次のようにコンテンツボックスにh2見出しを追加します。

<h2>Overflow</h2>

次に、次のように設計設定を更新します。

見出し2フォント：Lato
見出し2フォントの太さ：太字
見出し2フォントスタイル：TT
見出し2テキストの配置：中央
見出し2のテキストの色：#dddddd
見出し2テキストサイズ：15vw
見出し2文字の間隔：0.1em
見出し2テキストシャドウ：スクリーンショットを参照
見出し2テキストの影の色：rgba（0,0,0,0.05）

diviオーバーフローオプション

ここで、テキストを行のコンテンツ領域からオーバーフローさせるには、カスタムマージンを使用する必要があります。次のカスタムマージンをテキストモジュールに追加して、行の上（垂直方向）および行の両側（水平方向）にオーバーフローさせます。

マージン：上-6vw、左-10vw、右-10vw

diviオーバーフローオプション

次に、作成したテキストモジュールの下に別のテキストモジュールを追加し、以下を更新します。

コンテンツ：

<h3>design</h3>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

（ちなみに、このようなコードスニペットは、オーバーフロースクロールオプションを利用するための優れた方法です。）

テキストフォント：Lato
テキストテキストの配置：右
テキストテキストサイズ：24px（デスクトップ）、16px（電話）
テキスト行の高さ：1.3em
最大幅：50％
モジュールの配置：右
パディング：4vw右

diviオーバーフローオプション

次に、行の外側にオーバーフローする画像を追加しましょう。 2つのテキストモジュールの下に新しい画像モジュールを作成してから、選択した画像をアップロードします。

次に、イメージ設定を次のように更新します。

最大幅：35vw
マージン：上12vw、下-8vw、左-5vw
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：-40px
ボックスシャドウの垂直位置：-50px
影の色：rgba（0,0,0,0.17）

diviオーバーフローオプション

行をオーバーフロー表示に設定したデザイン（デフォルト）

次に、行オーバーフローを表示（デフォルト）に設定したままデザインを確認しましょう。

diviオーバーフローオプション

ご覧のとおり、このデフォルトのオーバーフロー表示オプションは、美しくモダンなデザインを作成するのに最適です。

行をオーバーフロー非表示に設定したデザイン

次に、行にOverflowHiddenプロパティを使用するとどうなるかを見てみましょう。行設定を開き、以下を更新します。

水平オーバーフロー：非表示
垂直オーバーフロー：非表示

diviオーバーフローオプション

結果は次のとおりです。

diviオーバーフローオプション

ご覧のとおり、オーバーフローしたコンテンツ（上部の見出しと画像）がクリップされて非表示になり、独自のデザインが作成されます。また、この設定では、変換オプションを簡単に利用して、要素を拡大縮小および移動して、デザインを適切に調整できます。

＃2オーバーフロースクロールを使用して、ユーザーがコンテンツを垂直方向にスクロールできるようにする

この次の例では、垂直オーバーフロースクロールを紹介します。このオーバーフローオプションは、スクロール可能なコンテンツをリンクまたはリソースのリストに追加する場合に便利です。任意のモジュールまたは行をスクロール可能なコンテンツのコンテナーに変えることができます。テキストモジュールでそれを行う方法は次のとおりです。

1列の行を持つ通常のセクションを作成します。次に、次の内容のテキストモジュールを追加します。

<h3>overflow scroll</h3>
<ol>
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">consectetur adipiscing elit</a></li>
<li><a href="#">sed do eiusmod tempor</a></li>
<li><a href="#">incididunt ut labore et dolore</a></li>
<li><a href="#">Ut enim ad minim veniam</a></li>
<li><a href="#">quis nostrud exercitation</a></li>
<li><a href="#">ullamco laboris nisi ut</a></li>
<li><a href="#">aliquip ex ea commodo</a></li>
<li><a href="#">Duis aute irure dolor in</a></li>
<li><a href="#">reprehenderit in voluptate</a></li>
<li><a href="#">velit esse cillum dolore eu</a></li>
<li><a href="#">fugiat nulla pariatur</a></li>
<li><a href="#">Excepteur sint occaecat</a></li>
<li><a href="#">cupidatat non proident</a></li>
<li><a href="#">sunt in culpa qui officia</a></li>
<li><a href="#">deserunt mollit anim id</a></li>
<li><a href="#">est laborum</a></li>
</ol>

diviオーバーフローオプション

次に、テキストモジュールのデザイン設定を次のように更新します。

テキストフォント：Lato

diviオーバーフローオプション

リンクテキストの色：＃333333
リンクテキストサイズ：18px

diviオーバーフローオプション

順序付きリストのテキストの色：
注文リストのテキストサイズ：20px
注文リスト行の高さ：1.8em
順序付きリストスタイルタイプ：decimal-leading-zero

diviオーバーフローオプション

見出し3フォントの太さ：超太字
見出し3テキストサイズ：50px
最大幅：500px
パディング：上3％、下3％、左8％、右8％

diviオーバーフローオプション

高さとオーバーフロースクロールを指定する前のテキストモジュールは次のようになります。

diviオーバーフローオプション

次に、テキストモジュールを最大高さ400pxに更新します。テキストモジュールのデフォルトのオーバーフロー値が表示されているため、モジュールの下にテキストがオーバーフローしていることがわかります。

diviオーバーフローオプション

ここで行う必要があるのは、次のようにスクロールするように垂直オーバーフローを設定することです。

垂直オーバーフロー：スクロール

diviオーバーフローオプション

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

diviオーバーフローオプション

Diviサイトで垂直オーバーフロースクロールを使用する方法のその他の例については、次の投稿を確認してください。

Diviの新しいオーバーフローオプションを使用してスクロールギャラリーモックアップを作成する方法
Diviでスクロール可能な最近の投稿ウィジェット領域を設計する方法

＃3オーバーフロースクロールを使用して、ユーザーがコンテンツを水平方向にスクロールできるようにする

水平スクロールにオーバーフロースクロールを使用することは、1つの簡潔な場所からコンテンツにアクセスできるようにするもう1つの方法です。さらに、プラグインなしでモバイルにサイドスワイプ機能を組み込むための優れた方法でもあります。

その方法を示すために、簡単な例を一緒に作成します。

まず、1列の行を持つ通常のセクションを作成します。

次に、行に宣伝文モジュールを追加します。

デフォルトの画像を新しい画像またはアイコンに置き換えることができます。次に、いくつかの調整を加えてデザイン設定を更新します。

テキストの配置：中央
タイトルフォント：ラト
タイトルフォントの太さ：重い
パディング：左3％、右3％

diviオーバーフローオプション

行の列に合計6つの宣伝文が表示されるように、宣伝文モジュールを5回複製します。

diviオーバーフローオプション

次に、次のカスタムCSSを使用して行設定を列メイン要素に更新します。

display: grid;
grid-template-columns: repeat(6, 50%);

これにより、宣伝文の列が、コンテナ（またはこの場合は行）の50％の幅を持つ6つの列を持つ水平グリッドレイアウトになります。これは、2つの宣伝文/列が行内のスペースを占めることを意味します。他の4つのモジュールは、列の外側の右側に拡張されます。ここで、オーバーフロースクロールプロパティが役立ちます。次のオーバーフローオプションを更新します。

水平オーバーフロー：スクロール

diviオーバーフローオプション

これで、必要に応じて行の幅を調整でき、2つの宣伝文が常にうまく整列します。これが最終的なデザインです。

コンテンツのボックスが少し見やすくなるように、行にボックスシャドウを追加しました。ユーザーが右にスクロールするまで、2つの宣伝文が最初にどのように表示されるかに注目してください。

diviオーバーフローオプション

詳細については、水平スワイプカードの作成に関する投稿全体をご覧ください。

最終的な考え

重複する要素と通常のグリッドレイアウトの外側に配置する要素は、最近より一般的になっています。ほとんどの場合、これは純粋に設計目的で行われます。 Diviのオーバーフローオプションの使用方法を理解すると、コンテナの外部でコンテンツを表示または非表示にして、これらのユニークなデザインを作成する方法を理解するのに役立ちます。また、オーバーフロースクロールを理解することは、スクロール可能なコンテンツをWebサイトに追加する場合にも役立ちます。

この記事が、オーバーフロープロパティと、それを次のDiviプロジェクトでどのように使用できるかを明らかにするのに役立つことを願っています。

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

乾杯！