ツール
Client-FirstのWebflowサイトを柔軟なレスポンシブデザインにする二つのオプション
- このページで紹介するビジュアルCSSスニペット設定ツール
- Finsweet Extensionの同じビジュアル設定ツール
柔軟なレスポンシブデザイン（フルイドレスポンシブ）とは?
ブラウザのビューポートのサイズ変更に合わせて、デザインがスケールします。
Client-Firstの柔軟なレスポンシブデザインとvwおよびvhのスケーリングの比較
ブラウザのビューポートがサイズを変更すると、デザインもそれに合わせてスケールします。
コンテンツを柔軟なレスポンシブデザインにするための一つの方法としてvwまたはvh単位を使用することができます。しかし、この方法には次のような問題点があります。
- レスポンシブデザインにしたい各要素に対してvwまたはvh単位を設定する必要がある
- vwとvhは線形にスケールするため、要素が急速に小さくなったり、大きくなったりする可能性がある
- ブラウザのズームはvwとvh単位の両方に影響を及ぼすことはできないため、アクセシビリティが損なわれる
- vwとvhでのWebflowプロジェクトの管理は、他のデベロッパーやクライアントにとって困難になる場合がある
そこで、Client-Firstでは「root-font scaling」を使用しています。
Root-font スケーリング
Client-Firstシステムでは、すべてのサイズにrem単位を使用します。rem単位は、HTMLのルートフォントサイズに基づいています。
Client-FirstのプロジェクトはすべてHTMLフォントサイズに対応しています。これにより、プロジェクト内のすべてのサイズをグローバルに管理することができます。
このサイズを変更することで、remが視覚的に「大きく」または「小さく」なるよう効果的に変更することができます。Client-Firstのビジュアルフルイドレスポンシブジェネレーターは、好みに合わせてルートフォントサイズを変更する大規模な計算の集まりによって機能しています。
生成されたCSSコードを追加することで、Webflowプロジェクトはカスタムサイズのスケーリングルールに従うようになります。ブレークポイント全体でHTMLフォントサイズを変更することで、フルイドレスポンシブスケーリングの究極のカスタマイズが可能になります。
メリット：
- Client-Firstを通常通りに使用することが可能です。レスポンシブサイトであるかないかによって特定のワークフローの変更が発生することはありません。
- レスポンシブデザイン戦略はオプショナルな追加機能です。プロジェクトに追加することも、追加しないこともできます。
- フルイドレスポンシブは、開発が完了した後ののプロジェクトの最後にも追加することができます。
- ブラウザは通常通りにズームすることができます。
- エンドユーザーが変更したブラウザのフォントサイズ設定は尊重されます。
- 固定のvwまたはvhベースのサイズ設定を持つプロジェクトよりも、remでWebflowプロジェクトを管理する方が容易です。
視覚的に構築する柔軟なレスポンシブデザイン
- 視覚的にフルイドレスポンシブスケーリングルールを設定します。
- CSSコードをClient-FirstのWebflowプロジェクトにコピーします。
- remで柔軟なレスポンシブサイトをお楽しみください。
NEXT