レイアウト(FFL)とは、画面サイズではなく、ターゲット要素(コンテナ等)の幅に合わせてフォントサイズを自動調整する『フレックスフォント』を使ったWebデザインのレイアウト方法です。Chromeのデベロッパーツールを使ったランディングページの作り方を解説します。メディアクエリを使ったレスポンシブWebデザインでは出来ない、『文字サイズの無段階変更』が可能になります。width)ではなく、ターゲット要素(コンテナ等)の幅に合わせてフォントサイズを自動調整する『フレックスフォント』を使ったWebデザインのレイアウト方法です。width)ではなく、コンテナに合わせてフォントサイズを調整するとPCサイトを見る時、殆どの人が縦横比16:9のディスプレイサイズで見ていますが、全ての要素が画面サイズ100%で作られているサイトは少なく、ヘッダー部分は100%でも記事の部分は最大幅(max-width)を設定したコンテナに入れて左右に余白を作っているサイトが殆どです。』をフォントサイズの単位として使えるサイトは非常に限られています。『コンテナに対する割合』であれば、すべてのサイトでフォントサイズの単位として使えます。コンテナに合わせてフォントサイズを調整すると、コンテナとフォントサイズの比率が一定に保たれる為、レイアウトが崩れません。Webデザインの自由度も増えますね!画面サイズを拡大縮小しても文字がズレないか、レスポンシブでよく使われるfont-size指定で実験してみました。動画を再生するには、videoタグをサポートしたブラウザが必要です。ズレることが確認できました。レイアウトのメリットランディングページの画像の上にテキストを配置出来る画面サイズではなく、指定したターゲット要素のサイズに合わせてフォントサイズを自動変更させるため、マルチデバイス対応が非常に簡単になる。簡単にSEO対応のLPが制作できるLP制作ツールです。画像の上にテキストをレイアウトしてFFLの基本レイアウトが制作できます。デベロッパーツールをご利用下さい。レイアウトの編集モードの説明動画です。ページからダウンロードして下さい。★詳しい説明はコチラ↓(※音が流れます。↓画面サイズを変えて、テキストがズレない事を確認してみて下さい。スマホやタブレットの場合は、画面を横向きにしてみて下さい。flex-font-layout_editor_2.0.0.jsは、編集用です。