清須市商工会
スタイルガイド
大見出し：h3
中見出し：h4
本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。
本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。
中見出し：h4
本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。
本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。
小見出し：h5
本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。
アンカーリンク
ulに.anchor-list
本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。
表
.js-scrollable
thの横幅はセルを選択で表示されるセルセッティングで設定
| タイトル部分 | 表本文。MAX3行くらいまでにとどめることで、レイアウトバランスを保つことが可能に。表本文。MAX3行くらいまでにとどめることで、レイアウトバランスを保つことが可能に。表本文。MAX3行くらいまでにとどめることで、レイアウトバランスを保つことが可能に。表本文。 |
|---|---|
| 2022.01.01 | 表本文。投稿系のコンテンツでは、タイトル部分に日付が入ります。リンクタイトルはテキストカラーを変更 |
| タイトル部分 | 表本文。MAX3行くらいまでにとどめることで、レイアウトバランスを保つことが可能に。 |
| タイトル部分 | 表本文。MAX3行くらいまでにとどめることで、レイアウトバランスを保つことが可能に。 |
.js-scrollable .table-style02
| タイトル部分 | 表本文。MAX3行くらいまでにとどめることで、レイアウトバランスを保つことが可能に。表本文。MAX3行くらいまでにとどめることで、レイアウトバランスを保つことが可能に。表本文。MAX3行くらいまでにとどめることで、レイアウトバランスを保つことが可能に。表本文。タイトル部分 |
|---|---|
| タイトル部分 | 表本文。MAX3行くらいまでにとどめることで、レイアウトバランスを保つことが可能に。表本文。 |
| タイトル部分 | 表本文。MAX3行くらいまでにとどめることで、レイアウトバランスを保つことが可能に。表本文。 |
.js-scrollable .table-style03
| タイトル部分 | タイトル部分 |
|---|---|
| 表本文 | 表本文。MAX3行くらいまでにとどめることで、レイアウトバランスを保つことが可能に。表本文。MAX3行くらいまでにとどめることで、レイアウトバランスを保つことが可能に。表本文。MAX3行くらいまでにとどめることで、レイアウトバランスを保つことが可能に。表本文。 |
| 表本文 | 表本文。MAX3行くらいまでにとどめることで、レイアウトバランスを保つことが可能に。表本文。 |
| 表本文 | 表本文。MAX3行くらいまでにとどめることで、レイアウトバランスを保つことが可能に。表本文。 |
.js-scrollable .table-style04
| タイトル部分 | タイトル部分 | タイトル部分 | タイトル部分 |
|---|---|---|---|
| タイトル部分 | 表本文。MAX3行くらいまでにとどめることで、レイアウトバランスを保つことが可能に。表本文 | 表本文。MAX3行くらいまで | |
| タイトル部分 | 表本文。MAX3行くらいまで | 表本文。MAX3行くらいまで | |
| タイトル部分 | 表本文。MAX3行くらいまでにとどめることで、レイアウトバランスを保つことが可能に。表本文。 | ||
画像
ボタン
本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。本文テキストです。横幅は可変で、カラム数に合わせて調節させることも、任意の幅にすることも可能です。
.lonav
ボタンと.lonav-listをグループ化
その他パーツ
リストで上に余白がない場合、20px空けてください。
- リストですリストですリストですリストです本文中のテキストリンクは下線をつけてくださいリストですリストですリストですリストですリストですリストですリストですリストですリストですリストですリストですリストですリストですリストです
- リストですリストです
- リストですリストですリストですリストですリストですリストですリストです
- 番号付きリストです番号付きリストです番号付きリストです番号付きリストです番号付きリストです番号付きリストです番号付きリストです番号付きリストです番号付きリストです番号付きリストです番号付きリストです番号付きリストです
- 番号付きリストです番号付きリストです番号付きリストです
- 番号付きリストです番号付きリストです番号付きリストです番号付きリストです
.js-aco
- よくある質問のためのアコーディオン（質問）です。
- よくある質問のためのアコーディオン（回答）です。
回答の要点は見出し的扱いにし、要点を読むだけでも内容が理解できるように。＋補足説明をこのような形で入れ、詳細の理解も可能なように。回答の要点は見出し的扱いにし、要点を読むだけでも内容が理解できるように。＋補足説明をこのような形で入れ、詳細の理解も可能なように。
- よくある質問のためのアコーディオン（質問）です。
- よくある質問のためのアコーディオン（回答）です。
回答の要点は見出し的扱いにし、要点を読むだけでも内容が理解できるように。＋補足説明をこのような形で入れ、詳細の理解も可能なように。回答の要点は見出し的扱いにし、要点を読むだけでも内容が理解できるように。＋補足説明をこのような形で入れ、詳細の理解も可能なように。
iframe埋め込み
iframeの横幅と高さはwidth=”600″ height=”300″
コピー
コピーテキスト、コピーテキスト、コピーテキスト、コピーテキスト、コピーテキスト、コピーテキスト、コピーテキスト、コピーテキスト、コピーテキスト、コピーテキスト、コピーテキスト
注釈
.note
※1 ダミーテキストです。お申込みいただいた内容を理事会で審査させていただき、承認された後に会費をお支払いいただきます。
審査会は月に1度の頻度で開催しているため、お申し込みから承認までにお時間をいただく場合がございます。
.icon-nav
- 補助金関係
- ダミーテキストです。概要説明文が入ります。最大4行程度を想定。（恐らく3行程度になる見込み）ダミーテキストです。概要説明文が入ります。最大4行程度を想定。（恐らく3行程度になる見込み）
- 補助金関係
- ダミーテキストです。概要説明文が入ります。最大4行程度を想定。（恐らく3行程度になる見込み）ダミーテキストです。概要説明文が入ります。最大4行程度を想定。（恐らく3行程度になる見込み）
- 補助金関係
- ダミーテキストです。概要説明文が入ります。最大4行程度を想定。（恐らく3行程度になる見込み）ダミーテキストです。概要説明文が入ります。最大4行程度を想定。（恐らく3行程度になる見込み）
- 補助金関係
- ダミーテキストです。概要説明文が入ります。最大4行程度を想定。（恐らく3行程度になる見込み）ダミーテキストです。概要説明文が入ります。最大4行程度を想定。（恐らく3行程度になる見込み）
画像とテキスト
PCはWF通りのレイアウトにしてください。
SPで順番は.テキストにl-order-sm-1、画像に.l-order-sm-2
SPでのテキストと画像との余白は.u-mat20-sm
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。