🌐

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

2021/01/10に公開

はじめに

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

ステップ1
ステップ3
ステップ4

チュートリアル

Step2

StyleパネルでCSSとClassの使い方をみていきましょう

Headding要素の見た目を変更します

まずはHeadding要素をクリックします。

そして、右のTypograpyのエリアの数値を変更すると、Headding要素の見た目を変更する事ができます。
今回は試しにSizeを80pxにしてみましょう。

そうすると、Headdingの要素の文字の大きさが変わったと思います。
また、右のパネルは要素の見た目(レイアウト、サイズ、間隔、背景、境界線など)を編集する事ができます。

次はclassについて学習していきます

画面を下にスクロールをすると、紺色の背景が見えるのでそこでストップします。
そして、ボタンをクリックして右側のパネルを見てみます。

するとSelectorのエリアに、「Primary Button」というclassが選択されていると思います。
このボタンには「Primary Button」というclassが適応されている事がわかります。

試しのこの「Primary Button」のclassに適応されているCSSを変更してみましょう。
チュートリアルではボタンのPaddingを変更します。
Paddingとは、要素の内余白を指定する事ができます。
内余白があるということは、もちろん外余白もあります。
外余白はMarginというのですが、どんな違いがあるかはここでは端折ります。
実際にMarginとPaddingの値を変更してみるとイメージがしやすいと思います。
チュートリアルでは、ボタンの左右のPaddingを36pxに変更してみましょう。

20という数値をドラッグして値を設定することもできますし、20という数値をクリックしてpxを入力することもできます。

paddingの値を編集すると、他のボタン余白も変わった事に気がついたでしょうか。
チュートリアルでは「Primary Button」というclassは複数のボタンに設定されており、その大元のclassが編集されたため、他のボタンも一括でレイアウトが変更されます。

それでは上にスクロールをして、先ほど自分で追加したボタンにも「Primary Button」のclassを設定してみましょう。

ボタンをクリックして、右のパネルを見てみます。

先ほどはSelectorに「Primary Button」が設定されていたのですが、今は設定されていません。

Selectorに「Pri」を入力してみます。
そうするとリストが表示されて「Primary Button」がリストに表示されると思うので、それをクリックして設定します。

そうすると、自分が追加したボタンにclassをつける事ができました。