こんにちは！
Web制作会社 アクトワン 代表 和田英也です！
2023年8月2日(水)に発表されたWixの新プラットフォーム、『Wix Studio』。
Wix Japan プロダクトソリューションスペシャリストの城田剛さんが、【基本編】Wix Studio でできることを一挙紹介！という動画を出されていましたので、今回はその中から、特に重要なレスポンシブ機能について、基本的な項目をご紹介したいと思います。
▼ 目次
要素設定パネルについて
要素設定パネルではサイト上の各要素のデザインやレスポンシブの設定ができます。
また、ドッキング位置の変更やアニメーションの追加なども行えるようになっています。
例えばこのテキストをクリックした状態で、要素設定パネルを確認していくと、こちらから場所もサイズも変更することが可能です。
更に「レスポンシブ動作」からレスポンシブの方法を選ぶこともできます。
またデザインでは見出しやフォントの変更、フォントサイズも変えることができます。
テキストのフォントサイズ変更
フォントサイズの変更方法は2通りございます。
1つは、今回は要素設定パネルの右下、フォントサイズからサイズの変更を行います。
2つ目は、こちらの四角の右下のドラッグハンドルを動かすことで、フォントサイズを引き延ばしたり、縮めることもできます。
レスポンシブ4つの動作
そして先ほどのデモサイトのように、画面の拡大縮小に応じてのレスポンシブを設定するには、Wix Studioエディタでは要素ごとにレスポンシブ動作を設定する必要がございます。
テキストをクリックすると、右の要素設定パネルの「レスポンシブ動作」という箇所がございます。
そこのプルダウンをクリックします。
要素ごとにレスポンシブの種類は変わってくるのですが、テキストには4つのレスポンシブ動作がございます。
1) 比例してスケーリング
2) 折り返し
3) 固定
4) ハグ(コンテンツにあわせて囲む)
1つ1つ確認して参りましょう。
比例してスケーリング
比例してスケーリングは、画面の拡大・縮小に応じて、要素も拡大縮小します。
それではレスポンシブを確認してみましょう。
確認方法はいくつかございますが、まずは画面上部のブレークポイントで確認できます。
タブレット、モバイルでの見え方も確認できます。
また、デスクトップのブレークポイントで確認する場合には左右に縦のバーがございますので、こちらを引っ張っていくことで確認することができます。
さらに右上のプレビューをクリックすると、全てのブレークポイントを一貫して確認することができます。
このように小さくしていくとタブレットやモバイルでの見え方を確認できます。
比例してスケーリングなので画面の拡大・縮小に応じて、テキストも拡大縮小されます。
折り返し
折り返しではこの四角形が幅に応じて狭くなった時にテキストも折り返されます。
固定
そして固定。
固定ではどのブレークポイントになっても、サイズは一定です。
ハグ (コンテンツにあわせて囲む)
最後にハグ。
ハグはテキストをクリックすると、テキストに青い線で囲った四角形が出てきますよね、こちらが常にテキストの長さと同じになります。
なのでこちらをクリックして右に伸ばせば、テキストのサイズは戻ります。
そしてこちらのテキストに追加をしても、このように1行に収まります。
以上がレスポンシブの基本的な4つの動作の紹介となっています。
参照動画
【基本編】Wix Studio でできることを一挙紹介
Wix Tech Salon
アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております！
Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。 ご興味がある方はぜひ覗いてみてください!
Wix Tech Salon >>