🌐

【日本語】WebflowチュートリアルStep3(画像付き)

2021/01/10に公開

nocode

webflow

ノーコード

tech

はじめに

この記事は「WebflowチュートリアルStep2(画像付き)」の続きになります。
このチュートリアルは2021年1月10日に書いたものです。
現在のチュートリアルとは違う箇所があるかもしれませんが、ご容赦下さい。
また、画像が多いため、Step毎にチュートリアルの記事を分けようと思います。

ステップ1
ステップ2
ステップ4

チュートリアル

Step3

レスポンシブデザインを設定する

レスポンシブデザインとは、1つのサイトでパソコンにもタブレットにもスマホにも対応しているデザインのことをいいます。
具体的には、パソコンやスマホによって文字の大きさが違うと思うので、そういう設定ができます。

上にあるバーに注目していきます。
それぞれアイコンがありますが、「パソコン」「タブレット」「スマホ(横)」「スマホ(縦)」のアイコンです。
ここをクリックすることで、サイトの大きさを切り替えてデザインする事ができます。
また、パソコンで設定したデザインは、タブレット、スマホにも共通して反映されます。

試しにHeaddingの要素の色を変えてみましょう。

チュートリアルでは色を「#f1b522」にします。
色を変える事ができたら上のバーから、タブレット、スマホ(横)、スマホ(縦)でもHeaddingの色が変わっている事が確認できると思います。

また、パソコンにも画面の解像度がありますが、1280px以上のデザインは、カスケードアップ(1280px以上のデザインに共通してデザインの変更が反映される)、パソコンアイコン以下のデザインはカスケードダウン(タブレット、スマホに共通してデザインが反映される)です。
また、タブレットでデザインを変更した場合は、タブレット以下(スマホ)のデザインに共通して反映されます。
少し難しいかもしれませんが、チュートリアルが終わった後に実際にwebflowを触ってみて下さい。

今回は、その特性を生かして、デザインを上書きしてみましょう。