Diviで全幅画面を均等に二分割するレイアウトの作り方

こんにちはナオミです。

このチュートリアルでは、全幅画面を二分割し、左に画像、右にテキストを表示するレイアウトの作り方を紹介します。

Diviでフルワイド分割レイアウトの作り方

こんな感じのレイアウトができます。

動画内容 – フルワイド分割レイアウトの作り方

  1. 均等に二分割した行を挿入
  2. 左に画像、右にテキストを挿入
  3. 行をフルワイドに設定
  4. 余分なスペースを取り除く
  5. テキストを上下左右真ん中に行くように設定

テキストを真ん中に持ってくる

ステップ5が知っていないと、難しいのではないかと思います。

 行の中の詳細→カスタムCSSにいき、列2のメインのところに、次のように入力します。

margin-top: auto;
margin-bottom: auto;

そして、行→デザイン→サイズ変換→『列の高さを均等割付』を『はい』にします。

これでテキストが真ん中にくるはずです。

レイアウトのダウンロード

ここから動画で作ったレイアウトとダウンロードできます。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です