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

2020.10.22

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

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

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

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

（１）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)」を選択します。

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

続けて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;
}

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

H2では、

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

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

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

Value is inherited from:Body(All Pages)