• Subscribe to RSS

Webflowを使ってみよう! 実践編

2020.10.22

クメ

今回は「Webflowを使って見よう 実践編」と題して、Webflowでのスタイルシートの設定の仕方をご説明します。

デザイナーのクメです。
近頃社内では、よりスピードが求められる案件に対応するため、ノーコードに関心が高くなっています。これまでデザイナーがコーディングを担当する機会はあまりなかったのですが、徐々にデザイン&サイト構築を担当する案件が増えてきました。
前回の「概要編」では、操作パネルの紹介、メリット、学習方法などについて紹介しました。
今回は「Webflowを使って見よう 実践編」と題して、Webflowでのスタイルシートの設定の仕方をご説明します。

スタイルシートの設定の基本

Webflowでのスタイルシートの設定の仕方を解説します。
私自身ちょっと分かりにくかった部分でもあるので、こちらを頭の片隅においてから制作に入ってもらうとよいかと思います!

(1)HTMLタグのスタイル設定

例えばbodyタグに下記のようなスタイルを設定したい場合、

body {
  background-color: #eee;
  font-family: 'Noto Sans JP', sans-serif;
  color: #333;
  font-size: 14px;
  line-height: 24px;
}

まず、ナビゲーターパネルで「Body」を選択した状態で「Style」パネルのプラスアイコンをクリックし、
「Body(All Pages)」を選択します。
img 01

img 02

その状態でフォント(ファミリー、サイズ、カラー等)と背景色を設定します。img-5
プロパティを指定すると文字が青色になります。

続けてH2のスタイルを設定してみましょう。先ほどと同様にAddパネルから「H2 Headings 2」を配置し、「Style」パネルのプラスボタンから「All H2 Headings」を選択します。

H2には以下のようなスタイルを設定したいです。

h2 {
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 30px;
  line-height: 40px;
  font-weight: 700;
}

スタイルパネルでプロパティを指定します。
11

H2では、

  • margin-top
  • margin-bottom
  • font-family
  • font-weight
  • font-size
  • line-height

を指定したので、その部分が青字になっていますね。

ここで注目したいのは「Color」です。オレンジ色になっています。
先ほどbodyで指定した「color:#333」を引き継いでいるため、その印としてオレンジ色になっています。
試しに「Color」の文字をクリックすると下記のように表示され、ここのプロパティは「Body(All Pages)」を引き継いでいる事がわかります。

12
Value is inherited from:Body(All Pages)

これでこのようにスタイルが変わりました。
h2スタイル

(2)class名のスタイル設定

H2の色違いのデザインを作成してみましょう。オレンジ色のh2見出しにします。
先ほどのようにAddパネルから新たに「H2 Headings 2」を配置します。
noorange

この「H2 Headings 2」を選択した状態で、スタイルパネルのプラスアイコン横のスペースに任意の名前を入力してみましょう。ここでは「orange」と入力します。
そして「Create」をクリックします。
img 03

この状態で新たなプロパティを設定します。
20

Colorを「#e99d23」とします。
img 04

このように見た目が変わりました。
orange

実際のソースコードは下記のように書き出されます。

Html

<h2 class="orange">Heading</h2>

CSS

.orange {
  color: #e99d23;
}

最後にスタイル設定パネルについて補足します。
もうお分かりかと思いますが、色の違いには以下のような意味があります。

s
背景色ピンク・・・HTMLタグのスタイル設定
背景色ブルー・・・class名のスタイル設定

スタイル設定の解説は以上になります。
ノーコードとはいえ、きれいなCSSが書けるようにしたいものですね!