【日本語】WebflowチュートリアルStep2(画像付き)
はじめに
この記事は「WebflowチュートリアルStep1(画像付き)」の続きになります。
このチュートリアルは2021年1月10日に書いたものです。
現在のチュートリアルとは違う箇所があるかもしれませんが、ご容赦下さい。
また、画像が多いため、Step毎にチュートリアルの記事を分けようと思います。
チュートリアル
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をつける事ができました。
これでステップ2のチュートリアルは終了です。
Discussion