Diviで完全に水平なスワイプページを作成する方法

公開: 2019-03-16

スワイプリンクとアンカーリンクを使用してナビゲートする完全に水平なページを作成することを考えたことはありますか？ まあ、あなたがそれにアプローチする方法を持っていて、正確に知らなかったなら、これはあなたにとって理想的な投稿です。 Diviを使用して完全に水平方向のスワイプページを作成する方法を紹介します。 このテクニックは、あなたのウェブサイトを他の人から際立たせ、2019年のウェブデザインのトレンドと一致させるのに本当に役立ちます。私たちが作成する結果は、すべての画面サイズで見栄えがします。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

ページをスワイプ

モバイル

ページをスワイプ

アプローチ

  • 1つのセクションのみを使用してページ全体を作成します
  • チュートリアルの最後に、いくつかのCSSコード行を使用して、そのセクションを水平グリッドに変換します
  • 水平グリッドは、各行を水平に配置された列に配置します
  • セクションに含まれる水平列の数を決定できます
  • この場合、それぞれ2行で構成される4つの異なる列を使用します。
  • 作成する水平列の数を変更し、各セクション列に含まれる行数を決定できます。
  • また、アンカーリンクを使用して、さまざまなセクションの列をナビゲートできるようにしています
  • さらに、スムーズなスクロールとセクションスクロールのスナップ効果を追加して、訪問者のナビゲーションを容易にします。

再作成を始めましょう

新しいセクションを追加

背景色

新しいページを作成し、それに通常のセクションを追加します。 セクション設定を開き、背景色を変更します。

  • 背景色：#ffffff

ページをスワイプ

間隔

次に、間隔の設定に移動し、さまざまな画面サイズにカスタムパディングを追加します。

  • トップパディング：10.5vw（デスクトップ）、15vw（タブレット）、10vw（電話）
  • 下部のパディング：3vw（デスクトップとタブレット）、10vw（電話）

ページをスワイプ

行＃1を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

ページをスワイプ

サイジング

モジュールをまだ追加せずに、行の設定を開き、行が画面の幅全体を占めるようにします。

  • この行を全幅にする：はい
  • カスタムガター幅を使用：はい
  • 側溝幅：1

ページをスワイプ

間隔

次に間隔設定に移動し、すべての異なる画面サイズでいくつかの変更を加えます。

  • トップパディング：0px
  • ボトムパディング：0px
  • 左パディング：6vw（タブレットと電話）
  • 右パディング：6vw（タブレットと電話）
  • 列1の下部パディング：15vw（タブレットと電話）
  • 列2の左パディング：4vw（デスクトップ）、0vw（タブレットと電話）

ページをスワイプ

CSS ID

作成する各セクション列の最初の行にCSSIDを割り当てる必要があります。 これは、この投稿の後半でアンカー矢印を作成するのに役立ちます。

  • CSS ID：スワイプ-1

ページをスワイプ

カスタムCSS

この投稿のアプローチセクションで述べたように、メカニズムにスムーズなスクロールとスナップ効果も適用しています。 これを行うには、作成する各水平列の最初の行に1行のCSSコードを追加する必要があります。 

scroll-snap-align: start;

ページをスワイプ

列1に宣伝文モジュールを追加する

アイコンを選択

これでモジュールの追加を開始できます！ 列1の宣伝文モジュールから始めます。モジュール設定を開き、左矢印アイコンを選択します。

ページをスワイプ

アイコン設定

次に、[デザイン]タブに移動し、アイコンの外観にいくつかの変更を加えます。

  • アイコンの色：rgba（255,255,255,0）
  • 画像/アイコンの配置：上
  • アイコンのフォントサイズを使用：はい
  • アイコンのフォントサイズ：5vw（デスクトップ）、13vw（タブレット）、21vw（電話）

ページをスワイプ

間隔

次に、いくつかのカスタムマージン値を追加します。

  • トップマージン：14vw（デスクトップ）、-11vw（タブレット）、-17vw（電話）
  • 左マージン：60vw（タブレットと電話）

ページをスワイプ

可視性

また、小さい画面サイズではモジュールを非表示にしています。

ページをスワイプ

列2にテキストモジュールを追加します

H2コンテンツを追加する

次に必要なモジュールは、列2のテキストモジュールです。H2コンテンツを追加します。

ページをスワイプ

H2テキスト設定

次に、[デザイン]タブに移動し、H2テキスト設定を変更します。

  • 見出し2フォント：Source Serif Pro
  • 見出し2テキストの配置：左
  • 見出し2テキストサイズ：3vw（デスクトップ）、7vw（タブレットと電話）

ページをスワイプ

サイジング

次に、サイズ設定で幅を変更します。

  • 幅：77％

ページをスワイプ

間隔

また、画面サイズを小さくするには、下マージンを追加します。

  • 下マージン：15vw（タブレットと電話）

ページをスワイプ

ボタンモジュールを列2に追加

コンテンツを追加する

追加したテキストモジュールのすぐ下に、ボタンモジュールを追加します。 コピーを入力してください。

ページをスワイプ

ボタンの設定

次に、[デザイン]タブに移動し、ボタンの設定を変更します。

  • ボタンにカスタムスタイルを使用する：はい
  • ボタンのテキストサイズ：0.9vw（デスクトップ）、2vw（タブレット）、3.5vw（電話）
  • ボタンのテキストの色：＃000000
  • ボタンの境界線の幅：1px

ページをスワイプ

  • ボタンの境界線の色：＃000000
  • ボタンの境界線半径：0px
  • ボタンフォント：Mukta
  • フォントの太さ：太字
  • フォントスタイル：大文字

ページをスワイプ

間隔

次に、カスタムマージンとパディングを追加します。

  • トップマージン：6vw（デスクトップ）、4vw（タブレットと電話）
  • トップパディング：15px
  • ボトムパディング：15px
  • 左パディング：50px
  • 右パディング：50px

ページをスワイプ

列3に宣伝文モジュールを追加する

アイコンを選択

この行で必要な次の最後のモジュールは、列3の別の宣伝文句です。選択したアイコンを選択します。

ページをスワイプ

リンク

次に、リンク設定に移動し、訪問者をセクションの2番目の水平列に誘導するリンクを追加します。

  • モジュールリンクURL：https：//www.yourwebsite.com/page/#swipe-2

ページをスワイプ

アイコン設定

先に進み、アイコン設定も変更してください。

  • アイコンの色：＃333333
  • 画像アイコンの配置：上
  • アイコンのフォントサイズを使用：はい
  • アイコンのフォントサイズ：5vw（デスクトップ）、13vw（タブレット）、21vw（電話）

ページをスワイプ

間隔

さまざまな画面サイズにカスタムの上下の余白を追加して続行します。

  • トップマージン：14vw（デスクトップ）、-11vw（タブレット）、-17vw（電話）
  • 左マージン：60vw（タブレットと電話）

ページをスワイプ

行＃2を追加

カラム構造

必要な2番目の行は、次の列構造を利用しています。

ページをスワイプ

背景色

モジュールをまだ追加せずに、行の設定を開き、背景色を変更します。

  • 背景色：＃f7f7f7

ページをスワイプ

サイジング

次に、サイズ設定を変更します。

  • この行を全幅にする：はい
  • カスタムガター幅を使用：はい
  • 側溝幅：1

ページをスワイプ

間隔

間隔設定のカスタムパディングとマージン値とともに。

  • トップマージン：-3.5vw（デスクトップ）、-10vw（タブレット）、-17vw（電話）
  • トップパディング：8vw（デスクトップ）、15vw（タブレット）、20vw（電話）
  • 下部のパディング：8vw（デスクトップ）、15vw（タブレット）、20vw（電話）
  • 左パディング：24vw（デスクトップ）、5vw（タブレットと電話）
  • 右パディング：24vw（デスクトップ）、5vw（タブレットと電話）
  • 列1の右パディング：2vw（デスクトップ）、0vw（タブレットと電話）
  • 列2の左パディング：2vw（デスクトップ）、0vw（タブレットと電話）

ページをスワイプ

列1にテキストモジュールを追加

コンテンツを追加する

先に進み、最初の列にテキストモジュールを追加します。 選択したコピー（H3タイトルを含む）を入力します。

ページをスワイプ

テキスト設定

[デザイン]タブに移動し、テキスト設定を変更します。

  • テキストフォント：Open Sans
  • テキストサイズ：0.65vw（デスクトップ）、1.8vw（タブレット）、2.7vw（電話）
  • テキスト行の高さ：1.8em

ページをスワイプ

H3テキスト設定

H3テキスト設定と一緒に。

  • 見出し3フォント：Mukta
  • 見出し2フォントの太さ：太字
  • 見出し3フォントスタイル：大文字
  • 見出し3テキストサイズ：0.8vw（デスクトップ）、3vw（タブレット）、4vw（電話）
  • 見出し3行の高さ：1.8em

ページをスワイプ

間隔

画面サイズが小さい場合も、下余白を追加します。

  • 下マージン：5vw（タブレットと電話）

ページをスワイプ

テキストモジュールのクローンを作成して2列目に配置

列1のテキストモジュールの変更が完了したら、それを複製して2番目の列に複製を配置できます。

ページをスワイプ

コンテンツの変更

必ず内容を変更してください。

ページをスワイプ

行＃1を3回クローンする

両方の行が完了したら、最初の行を3回複製できます。

ページをスワイプ

重複＃1を変更する

行CSSIDの変更

最初の複製のCSSIDを変更する必要があります。

  • CSS ID：スワイプ-2

ページをスワイプ

宣伝文モジュール（列1）のアイコンの色を変更する

最初の宣伝文句モジュールの色と一緒に。

  • アイコンの色：＃333333

ページをスワイプ

両方の宣伝文モジュールのリンクを変更する

アンカーリンクを機能させるには、それに応じて各矢印のリンクを変更する必要があります。

  • モジュールリンクURL：https：//www.yourwebsite.com/page/#swipe-1

ページをスワイプ

  • モジュールリンクURL：https：//www.yourwebsite.com/page/#swipe-3

ページをスワイプ

重複＃2を変更する

行CSSIDの変更

2番目の複製のCSSIDを変更します。

  • CSS ID：スワイプ-3

ページをスワイプ

宣伝文モジュール（列1）のアイコンの色を変更する

最初の宣伝文句モジュールのアイコンの色と一緒に。

  • アイコンの色：＃333333

ページをスワイプ

両方の宣伝文モジュールのリンクを変更する

また、それに応じて各宣伝文モジュールのリンクを変更します。

  • モジュールリンクURL：https：//www.yourwebsite.com/page/#swipe-2

ページをスワイプ

  • モジュールリンクURL：https：//www.yourwebsite.com/page/#swipe-4

ページをスワイプ

重複＃3を変更する

CSSIDを変更する

重複する3行目のCSSIDも変更します。

  • CSS ID：スワイプ-4

ページをスワイプ

宣伝文モジュールの（列2）アイコンを変更する

そして、列3で宣伝文句の別のアイコンを選択します。

ページをスワイプ

宣伝文モジュール（列2）のリンクを変更する

クリックすると、それに応じてモジュールリンクURLを変更して、訪問者が最初のセクション列にリダイレクトされることを確認します。

  • モジュールリンクURL：https：//www.yourwebsite.com/page/#swipe-1

ページをスワイプ

行＃2を3回クローンする

次の行に進みます。 この行も3回複製します。

ページをスワイプ

重複＃1の行の背景色を変更する

最初の複製の背景色を変更します。

  • 背景色：#dcdced

ページをスワイプ

重複＃2の行の背景色を変更する

2番目の複製では、次の背景色を使用します。

  • 背景色：＃ffeed1

ページをスワイプ

重複＃3の行の背景色を変更する

3行目の複製の背景色も変更します。

  • 背景色：＃d6ffe5

ページをスワイプ

CSSIDとCSSコードをセクションに追加する

必要な行がすべて揃ったので、魔法を起こすことができます。 セクション全体にCSSIDを追加します。 この投稿の後半で、このCSSIDを使用してスクロールバーを非表示にします。

  • CSS ID：セクション-スクロールバー

ページをスワイプ

次に、カスタムCSSオプションに移動し、CSSコードの数行をメイン要素に追加します。 

overflow-y: scroll;
display: grid;
grid-template-columns: repeat(4, 100%);
scroll-behavior: smooth;
scroll-snap-type: x mandatory;

作成するセクション列が多いほど、CSSコードに追加する必要のある列も多くなります。 したがって、たとえば、同じ構造にしたいが、4回ではなく7回のスワイプを許可したい場合は、それに応じてグリッドテンプレート列のCSSコード行を変更する必要があります。 

grid-template-columns: repeat(7, 100%);

ただし、列数を増やす場合は、行を追加する必要があることに注意してください。 したがって、この場合、セクション列ごとに2行を表示する場合は、14行が必要になります。

ページをスワイプ

スクロールバーを非表示

セクションCSSIDを使用し、CSSコードの次の行をページ設定に追加して、スクロールバーを非表示にすることもできます。 

#section-scrollbar::-webkit-scrollbar {
display: none;
}

ページをスワイプ

ページをスワイプ

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最後に見てみましょう。

デスクトップ

ページをスワイプ

モバイル

ページをスワイプ

最終的な考え

Diviを使用してWebサイトを設計する場合、最も簡単なことは下向きに構築することです。 しかし、それが最も簡単なことであるという理由だけで、あなたがそのオプションに制限されているという意味ではありません。 完全に水平方向のスワイプページを作成することもできます。 このチュートリアルでは、Diviを使用して見事な水平スワイプWebデザインを実現する方法を示しました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！