レスポンシブ対応について
「レスポンシブデザイン」とは「閲覧者の画面サイズまたはウェブブラウザに応じて表示の対応やサポートができるデザイン」のことです。
以前にレスポンシブデザインに取り組んだことがある人なら、この段階で少し困難になることがおわかりいただけるでしょう。
しかし、レスポンシブデザインの対応でもWebflowが活躍してくれます！
「Designer」 のトップバーの中央にある切り替えボタンを触り、Webサイトが様々なデバイスでどのように表示されるかプレビューを見ていきましょう。各ブレークポイントを切り替えて、画面の大きさがデザインにどのような影響を与えるかを確認してください。基本的なルールに従ってデザインすれば、Webflowは自動的にすべてをレスポンシブ化しようとします。
しかし、グリッド（縦横に分割したレイアウト）を使っている場合、縮小したり、移動させたりする必要がある場合もあります。
例では、タブレットモードやそれ以下のサイズでは、特集画像がずれて見えることがわかります。フォントサイズも少し大きく、コンテンツも端に寄りすぎています。
これらをすべて修正しましょう。
タブレットモードで行ったデザインの変更は、小さなサイズにも反映されます。
そのため、タブレットモードから始め、必要に応じて縮小していきます。
まず、特集画像の表示方法を修正することから始めます。
画像が右側に寄っていたのを、ヒーローセクション（一番目に付く場所）の一番下に移動させます。これを行うには、グリッドの編集をクリックします。これを行うには、そこから1行追加し、右クリックで特集画像がある左列を削除します。これは自動的に私たちの右列グリッド、その中に画像、作成した新しい最下行に強制されます。
そうしたら、Right Column Gridをクリックし、Justify centerをクリックして画像をdivの中央に移動させます。
そこから、Right Column Gridに上マージンを追加して、下に持っていきます。
それでは、モバイル用ランドスケープモードに移行してみましょう。
- まず、フォントサイズが大きすぎることがわかります。これを小さくしましょう。
- 次に、コンテンツを端から取り込みます。これを修正するには、グリッド全体が入っているコンテナを選択し、側面にパディングを追加します。
- 最後は、モバイルポートレートモードにしましょう。
ここもフォントが大きすぎますね。見出し、段落、ボタンのテキストを縮小してみましょう。これで完了です！
ご覧のとおり、下部のクライアントロゴはレスポンシブなまま、自ら縮小しています。しかし、ロゴを重ねたい場合は、ヒーローセクションのグリッドの場合とまったく同じ手順で行います。
Webflowで構築された、初めてのレスポンシブなホームページが完成しましたね。
ホームページ全体をコードで視覚的に開発したのです。
Webflowでビルドすることで、実際にコードを書くことなく、コードの力を体験することができました。
私たちが視覚的にデザインして完成したHTMLとCSSをご覧ください。
以上、Webflowの操作とレスポンシブ対応について紹介させて頂きました。
気になる事や質問があれば、お問い合わせ・相談フォームにてご自由にお送りください！