フルサイズレイアウトの使いかた

フルサイズレイアウトとは

最近、写真などの画像を画面の端まで表示しているウェブサイトを目にする機会が増えてきているのではないかと思います。

画像を切れ目なく表示することでよりスマートな印象を与えるのと同時に、スマートフォンの小さい画面で見たときに限られたスペースを効果的に使えるという利点があります。

ここではクローバ PAGE でフルサイズレイアウトを使う方法について紹介します。

この記事はクローバ PAGE 2019年2月版で確認しています。​

セクションの横幅を設定する

まず、画面の端いっぱいまで表示したいセクションを選択し、セクションの設定で「横幅」を「フル」に設定します。

​

横幅を「フル」に設定したセクションに画像パーツや動画パーツを配置すると、これらが画面の端まで表示されます。

このとき、画像の設定でサイズを「大」に設定してください。

エディタでは変化がないのでわかりにくいですが、プレビューで見るとセクションが画面いっぱいに表示されているのがわかります。

フルサイズのセクションに段組を配置することもできます。このとき段組全体の高さは、それぞれの列の高さに依存しますので、なるべく画像を配置する列の高さがもっとも大きくなるよう調整していただくと、様々なサイズの画面で違和感なく表示することができます。

また、フルサイズレイアウトでは上下余白がカットされてしまいますので、画像以外の列については、段組の設定で縦配置を「中央寄せ」に設定してください。

​スマートフォンでの表示

フルサイズレイアウトのセクションでは、スマートフォンでも画面の端いっぱいまでコンテンツが引き伸ばされて表示されます。

​

​デモ

フルサイズレイアウトを使ったデモサイトを用意してみました。皆さんもフルサイズレイアウトを使って素敵なサイトを作成してみてください！

​