
デザイナーのクメです。
近頃社内では、よりスピードが求められる案件に対応するため、ノーコードに関心が高くなっています。これまでデザイナーがコーディングを担当する機会はあまりなかったのですが、徐々にデザイン&サイト構築を担当する案件が増えてきました。
前回の「概要編」では、操作パネルの紹介、メリット、学習方法などについて紹介しました。
今回は「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)」を選択します。
その状態でフォント(ファミリー、サイズ、カラー等)と背景色を設定します。
プロパティを指定すると文字が青色になります。
続けて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)
これでこのようにスタイルが変わりました。
(2)class名のスタイル設定
H2の色違いのデザインを作成してみましょう。オレンジ色のh2見出しにします。
先ほどのようにAddパネルから新たに「H2 Headings 2」を配置します。
この「H2 Headings 2」を選択した状態で、スタイルパネルのプラスアイコン横のスペースに任意の名前を入力してみましょう。ここでは「orange」と入力します。
そして「Create」をクリックします。
この状態で新たなプロパティを設定します。
Colorを「#e99d23」とします。
このように見た目が変わりました。
実際のソースコードは下記のように書き出されます。
Html
<h2 class="orange">Heading</h2>
CSS
.orange {
color: #e99d23;
}
最後にスタイル設定パネルについて補足します。
もうお分かりかと思いますが、色の違いには以下のような意味があります。
背景色ピンク・・・HTMLタグのスタイル設定
背景色ブルー・・・class名のスタイル設定
スタイル設定の解説は以上になります。
ノーコードとはいえ、きれいなCSSが書けるようにしたいものですね!