スタイルガイド

カラー

ウェブサイトの原色とグレーの濃淡は、ウェブフローのバリアブル機能で管理される。

ブラック

グレー 1

グレー 2

ホワイト

ボタン

様々なスタイルのボタンがウェブサイト全体で利用可能です。

HTML見出し

HTML見出しタグ(H1-H6)のスタイル。

H1
すべてのH1見出し

見出し - H1

H2
すべてのH2見出し

見出し - H2

H3
すべてのH3見出し

見出し - H3

H4
すべてのH4見出し

見出し - H4

H5
すべてのH5見出し
見出し - H5
H6
すべてのH6見出し
見出し - H6
H1
見出しH1
見出しH1
H2
見出しH2
見出しH2
H3
見出しH3
見出しH3
H4
見出しH4
見出しH4
H5
見出しH5
見出しH5
H6
見出しH6
見出しH6
パラグラフ

さまざまなサイズの段落とテキスト・スタイルが利用可能です。

P
全段落

この記事では、そのような "曖昧さ "と "傲慢さ "に焦点を当てます。このような3つの要素から構成されています。Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.Nunc ut sem vitae risus tristique posuere.

P
テキスト・リード

この記事では、そのような "曖昧さ "と "傲慢さ "に焦点を当てます。このような3つの要素から構成されています。Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.Nunc ut sem vitae risus tristique posuere.

P
テキスト 小

この記事では、そのような "曖昧さ "と "傲慢さ "に焦点を当てます。このような3つの要素から構成されています。Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.Nunc ut sem vitae risus tristique posuere.

インライン・テキスト要素

一般的なインライン要素のスタイリング

P
テキストマーク

このように、ハイライトの 中に3つの要素が含まれている。

D
テキスト削除

このように、ハイライトの中に3つの要素が含まれている。

U
テキストアンダーライン

このように、ハイライトの中に3つの要素が含まれている。

B
テキスト太字

このように、ハイライトの中に3つの要素が含まれている。

I
イタリック体

そのハイライトは、3つの要素で構成されている。

テキストの整列

テキストをコンポーネントに再配置するために、テキストの配置スタイルが利用可能です。

テキスト左

テキスト左:Loremipsum dolor sit amet, consectetur adipiscing elit.

テキストセンター

テキストセンターテキスト・センター: 「Lorem ipsum dolor sit amet, consectetur adipiscing elit.

右テキスト

右のテキスト詳細はこちらをご覧ください。

ブロッククオート

ブロッククォートのスタイリング。

これはブロッククオートです。ロレムの快適さは、おそらくゲイチャンバーに達した彼の6つの減点に加えて。月明かりの新聞は、その楽しさに応じて同意するアップ。タイミングを合わせた声の共有は、騒々しい若者を広げるために彼を導いた。結婚式では、材料がの運動を行うが、笑って信じていた。仝壼い壼い壼い壼い壼い壼い壼い壼い壼い壼い壼い々Of acceptance insipidity remarkably is an invitation.
リスト・スタイル

順序付きリスト、順序なしリスト、スタイルなしリストのスタイリング。

  1. これは順序付きリストである。
  2. これは順序付きリスト内のリスト項目である。
  3. 各リスト項目をお好みのスタイルにする
  • これは順序なしリストである。
  • これは順序なしリスト内のリスト項目である。
  • 各リスト項目をお好みのスタイルにする
  • これはスタイルなしリスト
  • これはスタイルなしリスト内のリスト項目です。
  • これはスタイルのないリストなので、スタイルを設定する必要はありません。
リッチテキスト

リッチテキストエレメント(RTE)は、長文コンテンツの作成に使用します。高度なスタイリングについては、こちらをご覧ください。

これはリッチテキスト見出し

リッチテキストエレメントを使えば、見出し、段落、ブロッククォート、画像、動画を個別に追加してフォーマットする必要がなく、すべて一箇所で作成・フォーマットできます。ダブルクリックするだけで、簡単にコンテンツを作成できます。

  • これは順序なしリストである。
  • これは順序なしリスト内のリスト項目である。
  • 各リスト項目をお好みのスタイルにする
静的および動的コンテンツ編集

リッチテキスト要素は、静的コンテンツでも動的コンテンツでも使用できます。静的コンテンツの場合は、任意のページにドロップして編集を開始するだけです。動的コンテンツの場合は、任意のコレクションにリッチテキストフィールドを追加し、設定パネルでそのフィールドにリッチテキストエレメントを接続します。ほら!

リッチテキストごとに書式をカスタマイズする方法

見出し、段落、ブロック引用、図、画像、図のキャプションはすべて、「When inside of」入れ子セレクタ・システムを使ってリッチ・テキスト要素にクラスが追加された後にスタイルを設定することができます。

見出し、段落、ブロック引用、図、画像、図のキャプションはすべて、「When inside of」入れ子セレクタ・システムを使ってリッチ・テキスト要素にクラスが追加された後にスタイルを設定することができます。
フォーム

フォーム要素の一般的なスタイル。

インプット
テキストエリア
ラジオ
チェックボックス
選択
ありがとうございました!あなたの投稿は受理されました!
おっと!フォームの送信中に何か問題が発生しました。
容器

コンテナ幅の種類。

コンテナ満杯
コンテナ満杯
コンテナ
1460pxコンテナ
コンテナ ミディアム
1200pxコンテナ中
コンテナ 小
900pxコンテナ小
インナーコンテナ
800pxの内側コンテナ
インナーコンテナ 小
600px内コンテナ小
インナーコンテナ
800px コンテナ内左
セクション間隔

セクションに余裕を持たせ、すべてのセクションの間隔を均等に保つ。反応する場合は、間隔を狭める。

セクション間隔
パディングトップボトム150px
セクション間隔 トップ
パディングトップ150px
セクション間隔 ボトム
パディング・ボトム 150px
マージン

ヘルパー・マージン・クラスは、要素間にマージンを追加し、サイト全体でスペーシングの値を一貫して統一するために利用できます。

マージン下0px
マージンなし
マージン下4px
マージン 下位4位
マージン下8px
マージン・ボトム8
マージン下12px
マージン・ボトム12
マージン下16px
マージン 16位以下
マージン下20px
マージン 20位以下
マージン下24px
マージン・ボトム24
マージン下28px
マージン・ボトム28
マージン下32px
マージン・ボトム32
マージン下36px
マージン・ボトム36
マージン下40px
マージンボトム40
マージン下44px
マージン下44
マージン下48px
マージン・ボトム48
マージン下54px
マージン 下 54
マージン下60px
マージン・ボトム60
マージン下70px
マージン 70
マージン下80px
マージン下部80