[HTML・CSS・JavaScriptのコーディング不要!?]ノーコードの１つWebflowの使い方についてまとめてみた　~Basicについて~

#はじめに

今回は前回の記事の続きです。

[[HTML・CSS・JavaScriptのコーディング不要!?]ノーコードの１つWebflowの使い方についてまとめてみた　~Layoutsについて~](https://qiita.com/renesisu727/items/3b5d778eefa4647d8d5a)

頑張っていきましょう。

# 要素の配置 Basicについて


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/a454ad50-049f-022a-78b4-c6a3940a22cb.png)

Basicを順番にまとめていきましょう。 最初は`div Block`からです。

##div Blockについて

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/fb8e0066-8a2e-d243-ae42-a4fbe3893fa4.png)

div Blockは普通のdiv Blockなので、今回は割愛します。[こちら](https://university.webflow.com/lesson/div-block?utm_source=element-panel)の記事を御覧ください。

## listについて
細かい解説は[こちら](https://university.webflow.com/lesson/lists?utm_source=element-panel)の記事を確認してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/666ce40d-58de-f001-7f9c-ec52a2c8ba68.png)

###箇条書きリスト・数値リスト・点なしリスト

右のパネルの歯車マークのList Setingsから、リストのスタイルを変更することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/0f83e675-61e6-1706-2e41-ee13ab16546b.png)

Typeの部分をOrderedに変更すると、リストの点が数字に変わります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/93dc81be-2b5b-198e-6954-828aa856a721.png)

また、Styleを`No Bullets`に変更するとリストの点(Orderdの場合は数字)が無くなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/6bfa0ef1-1360-2bdc-82d2-688ec6f67f77.png)

###全てのlist-itemsのスタイルを変更
list-itemを選択し、その後に`All List items`を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/f8ccc645-371c-86bb-6730-e1a646497de5.png)

この状態でlist-itemのスタイルに変更を加えると、全てのリストスタイルに同時に変更が行われるようになります。

## Link Blockについて
細かい設定は[こちら](https://university.webflow.com/lesson/link-block?utm_source=element-panel)から確認してください。
Link Blockを設置してみましょう。Link Blockは、中の要素にリンクを付け加えることができるdiv要素です。実はdivブロックを設定した後にLink Blockに変更することもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/4e73598a-4e80-e2be-a613-c2aad0b2f91f.png)

この中に、imageを設定してみましょう。以下のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/f72cd270-c033-9a9a-7c0c-c123f2a52071.png)

この状態でLink Blockの横の歯車をクリックすると、リンク先を設定することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/e993e408-8743-6d19-a5e0-8789c7a787a8.png)

この設定から、URLで他のサイトに飛ばしたり、サイト内の他のページに飛ばしたり、Emailや電話をさせたりすることも可能です。

##Buttonについて
Buttonの細かい使い方は[こちら]()の記事を参考にしてください。

実際に使用すると以下のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/21b25d10-1278-6656-8642-a495f94c10f8.png)

###ボタンのフォントとスタイルの変更
ボタンのフォントと全てのタイポグラフィ(中の文字)のスタイルは、Body(All Pages)タグから継承されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/22e26181-6a30-3a5c-89b2-d52ff80ae76b.png)

つまり、`Body(All Pages)`を選択して設定を変更すると、全てのボタンのフォントとタイポグラフィを変更することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/cb4ea71c-c56b-e0a4-451d-1d98c1207afb.png)

クラスに`Button(All Pages)`を選択してタイポグラフィからフォントサイズとフォントスタイルを変更しました。

このようにすると、新しいボタンを設置するときに最初から設定したフォントになっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/fc1d1117-61e3-9d43-497e-d2c420e717aa.png)

###ボタンにリンクを設定
ボタンにリンクを設定することもできます。設定方法はlink blockと同じで、ボタンを選択した後に歯車をクリックするだけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/4c2aa4d6-f9cf-7f5a-911b-6afa8ede00e3.png)


外部のURLや内部のページのリンクを貼ることができます。

###ボタンのマージンやパディングの設定
他の要素と同じように、ボタンにパディングやマージンを設定することができます。

Altを押しながらドラッグすることで、上下や左右のパディングやマージンを同時に設定することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/5aa404fc-6cb8-ee51-9aa1-33131cff6a9a.png)

###ボタンのstateについて
ボタンタグはstateを設定できます。stateは右のパネルのセレクターから設定することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/a7df3f4b-4e13-91f1-6ed9-067287a89d72.png)

HoverやPressed、Focusedはお馴染みではないでしょうか。

ここで、hoverしたときにバックグラウンドカラーを変更することを考えてみましょう。

セレクターからhoverを設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/82ea0bed-c495-361e-0c52-d1c6cfdc2c58.png)

クラスを設定した後は、`Global swatch`を設定しましょう。`Clobal swatch`に設定すると、プロジェクトを通してこの変化を再利用することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/973400e9-fcd1-ff39-c921-c26bf0922e78.png)

以下のようになりました。

![temp.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/3f45d34e-aee2-2935-b8fb-46a6a14d8e1a.gif)

このように、擬似クラスである`hover`や`pressed`を設定した要素は、以下のように青色になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/88905a06-bcdc-2709-90f6-0843367e8156.png)

クリックしてResetを押せば、疑似要素を解除することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/46c1b47a-3161-3021-f96e-8bd2a6df4630.png)

### Radiusの設定
Borderプロパティで`Radius`を設定することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/ee56d950-4207-aacc-f5b2-3c3be49377d3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/fbb1430b-7cfa-2e84-64c2-8ab502e03e98.png)

### Box shadowsの設定
Box shadowを設定してみましょう。

Effectの`Box shadows`から設定することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/6946964f-13b2-0333-1489-4629482bba32.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/9a3a19d5-c78b-40a5-6492-294a4c328292.png)

`Outside`にすると影を外側に、`Inside`にすると影を内側に配置することができます。

`Angle`を変更することで、影の向きを変更することができます。

`Distance`を設定すると、影との距離を設定することができます。`Blur`を設定すると、影をぼかすことができます。

`Size`を設定すると、元の大きさに対して影の大きさをどれくらい変化させるかを決めることができます。

以下のようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/ac200b09-97b9-13f9-9a78-9439c175365b.png)


####box-shadowをhoverの組み合わせ
それでは、box-shadowとhoverを組み合わせてみましょう。

最初に、Selectorからhoverを設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/f4c19d4a-71cc-d9d3-4b24-67a56b86cd5e.png)

その状態で、box-shadowを追加しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/0ed929f5-21d8-4ae4-f9b2-d6226dc1a1ac.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/68977b19-9041-2101-297d-57990a080b55.png)


不透明度を20%にしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/5b4cd413-7f37-4807-808f-86a1edee956f.png)

以下のようになりました。

![temp1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/a8e2a688-8fe3-ee92-9f2f-51c089ef6316.gif)

#### アニメーションの追加
アニメーションを追加することで、hoverしたときの影の追加などを滑らかに行うことができます。

それでは、アニメーションを追加してみましょう。

Hoverセレクターを外して、Noneの状態でTransitionsを設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/dfaa6979-a30e-8d24-c8d2-4414661967b2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/5c198c7e-f4bf-1619-f639-482f437066b6.png)

Typeを`Background Color`に設定して、Dulationを1000MSに設定しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/b240ced2-f8cf-4669-2f45-897c37a8b3d7.png)

こうすることで、Background-colorを1000msかけて変更するといった設定をすることができました。

次に、hoverセレクターでBackground-colorを設定してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/e9ac5065-891e-c336-00a2-1087c08327f2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/4d6135f6-f493-ce4b-27c9-2dd315031baf.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/c4800c21-1dd9-ebfc-42d5-0e454550e280.png)

次のようになります。

![temp2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/72c645c5-b75c-ff2e-41d6-8115478fa334.gif)

このように、1000msかけてじっくりとBackground-colorを変更させることができました。

#Typographyについて
それではTypographyについてまとめていきましょう。

まずは、`Heading`からです。

## Headingについて
Headingについての詳しい解説は[こちら](https://university.webflow.com/lesson/heading?utm_source=element-panel)の記事を見てください。

実際殆ど解説することはなく、配置した際に`h1, h2, h3...`などを選べると言うだけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/26ddcd37-38ac-faa2-ad9f-a26f474e39b7.png)

Headingを設置した際に、上のようなTypeを選択する画面がでてくるので、そこで選択してください。


## Paragraphについて
それではParagraphについてまとめていきましょう。

###全てのParagraphのスタイルを編集
全てのParagraphのスタイルを編集してみましょう。

ParagraphのSelectorを選択して、`All Paragraph`を選択しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/42b56b39-909d-511e-7cb6-646f150c1566.png)


このスタイルに対して設定を行うと、全てのParagraph要素に対して同じスタイルを適用することができます。

###全てのテキスト要素に対してスタイルを適用
全てのテキスト要素のtypography属性に対して同様のスタイル(font size, font family)を適用したい場合は、bodyタグを選択して、`Body (All pages)`を編集しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/d1fd5c96-3921-7934-b319-a86838991c59.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/e1888939-cfd4-3396-e58a-1d52fbf692d4.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/430f41e5-08fe-4bfd-9556-6910b005963a.png)

この状態でTypography属性を変更すれば、全てのテキストに対して同様のスタイルを適用することができます。試しに適当に変更してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/61b1eaa8-8cd2-a357-73b5-e4aa54ebfa02.png)

以下のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/90eb9b41-cc19-3ac9-ef8d-4b9154381ca2.png)

##Text Lingについて
それではText Linkについてまとめていきましょう。

詳しくは[こちら](https://university.webflow.com/lesson/add-and-nest-text-links-in-webflow)の記事を確認してください。

設置した後に設定をいじると、URLなどを指定することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/b0a03229-ecbc-a92a-9332-4c27f9ce2729.png)

###テキストの一部にハイパーリンクを設定
それではテキストの一部にハイパーリンクを設定してみましょう。

まず、適当にテキストを準備してした後、その一部をドラッグしてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/e362045d-95b7-79ec-d1b0-4a999708bff8.png)

この状態で、上のクリップみたいなところをクリックすると、以下のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/04d64f3f-865b-ac23-fcc9-640f59b43422.png)

これは`Text Link`なので、好きなようにリンクを設定することができます。

###全てのText Linkのスタイルを変更
全てのText Linkのスタイルを変更することができます。

任意のText Linkを選択して、Selectorの部分を弄ってみましょう。

この部分から、`All Links`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/1c911a1e-b2fc-22b8-8e9e-0528c61815d2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/79f170c7-d71a-3bb7-3d06-dedf64c96af0.png)

この状態でスタイルを変更すると、それは全てのText Linkに反映されます。

## Text Blockについて
それではText Blockについてまとめていきましょう。

詳しくは[こちら](https://university.webflow.com/lesson/use-text-blocks-in-webflow)の記事をご覧ください。

まず最初に、`Heading`と`Paragraph`と`Text Block`の違いを意識しましょう。以下の図です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/ad2881b3-3f82-c921-b953-83b25d982375.png)

`Heading`と`Paragraph`と`Text Block`を使い分ける理由は、ブラウザや検索エンジンにページ上のどのテキストがどのように構成されているかを教えるためです。

ちなみに、`Text Block`とは内部に直接テキストを入れたdivブロックであると考えることもできます。


## Block Quoteについて
詳しくは[こちら](https://university.webflow.com/lesson/add-a-block-quote-to-your-page)の記事を確認してみてください。

`Block Quote`とは、本や記事からの抜粋などの引用をウェブサイトで使用できるようにブロック引用を追加し、スタイルを設定する要素です。

通常、本や記事からの抜粋などの外部ソースからの引用を追加したり、スタイルを整えたりします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/5537727a-00b2-3b4b-a0b7-ffe6b7186c99.png)

デフォルトで上下左右のパディングと左のボーダーを持ちます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/ebdc690a-15c8-aa4f-f6e5-07e09fe09a73.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/984ff26f-3cbe-1fbb-73c5-c3a3ddcadbea.png)

### Block Quoteの全ての要素に対してスタイルを適用
Selectorから`All Block Quotese`タグを選択すると、全ての要素に対してスタイルを適用することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/c3b5446a-681e-febf-fab9-677dcad0f9dc.png)

##Rich Textについて
Rich Textはブログ記事やアバウトページ、伝記などの長文コンテンツを作成するのに最適な要素です。

詳しくは[こちら](https://university.webflow.com/lesson/rich-text?utm_source=element-panel)の記事を確認してください。

実際にRich Textを使うと以下のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/efeaaad8-293e-62b9-3cb9-ee8ab80d4ada.png)

### Heading要素を追加
要素をドラッグすると、Heading要素を選べます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/334d1b33-620d-ff73-1d44-1695bbba499e.png)

###キーボードショートカットについて

+ Shift + Space　改行しないスペース(&nbsp)
+ Shift + Enter  改行を挿入(br)
+ Ctrl + B テキストを太字
+ Ctrl + i テキストをイタリック
+ Ctrl + K ハイパーリンクを挿入

###画像・動画・音楽・リストの挿入
テキストカーソルを改行すると、プラスボタンが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/a808b060-ec3e-0aa5-a1be-16a0e6de0e90.png)

これをクリックすると、以下の画面が表れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411258/c1e0efaf-95af-469b-01c6-21e0b188b419.png)

ここで、画像や動画などを挿入することができます。

ここの部分の機能が割と細かいので、[こちら](https://university.webflow.com/lesson/rich-text?utm_source=element-panel)の記事を確認すると良いです。