目次
エッジプラス1 Ver2では、12行のグリッドシステムという物を採用しておりレイアウトしたデータが自動でレスポンシブデザイン対応のホームページが作成出来ます。
動画解説
1.グリッドシステムとは？
※クリックすると画像が大きくなります。
上記の画像のように12等分されたエリアが存在し、モジュール自体をこの12等分に変更する事が出来ます。
少し面倒に感じるかもしれませんが、現在レスポンシブデザインを作成する為のちょっとした基本となっていますので軽く覚えておく程度にしましょう。
少し面倒に感じるかもしれませんが、現在レスポンシブデザインを作成する為のちょっとした基本となっていますので軽く覚えておく程度にしましょう。
2.モジュールの等分の変更方法
※クリックすると画像が大きくなります。
ここにコンテンツをドロップという所にカーソルを合わせると左側に小さなメニューが出てきます。
その中の上から3番目をクリックすると「1/12,2/12.3/12」という大きなメニューが出てきます。
現在は、「8/12」の設定になっているのですが試しに「6/12」に変更してみましょう。
その中の上から3番目をクリックすると「1/12,2/12.3/12」という大きなメニューが出てきます。
現在は、「8/12」の設定になっているのですが試しに「6/12」に変更してみましょう。
※クリックすると画像が大きくなります。
「6/12」に変更した所、右側に「2/12」の空きスペースが出来ましたね。
このようにレイアウトを変更しながら、コンテンツのレイアウトを変更する事が可能です。
また、スマートフォン・タブレットで見た時は左に近いモジュール程上に順番に表示されていくので注意してレイアウトをしましょう。
このようにレイアウトを変更しながら、コンテンツのレイアウトを変更する事が可能です。
また、スマートフォン・タブレットで見た時は左に近いモジュール程上に順番に表示されていくので注意してレイアウトをしましょう。
今回はレイアウト配置をわかりやすくする為に多くのモジュールエリアを配置しましたが、作りながら配置していく方が簡単ですのでしっかりレイアウトを考えてから。。。という作り方は上級者向けです。
また、はじめの方にご紹介したように基本のテンプレートを数種類用意してありますのでそれをベースに改変して行く方が非常に簡単です。
慣れてきて、自分オリジナルのランディングページを作りたい！という方はここの部分を復習するようにしてみましょう。