フォントサイズの指定

「.h1_pc」等でPCサイズのみ適用
「.h1_tb」等でタブサイズのみ適用
「.h1_sp」等でSPサイズのみ適用

基本ボタン

このボタンは、各メニューにも利用できます。「setting/_design-*.scss」で、各メニューに使用するボタンを選択します。
選択したデザインは、それぞれ「.btn-*」で個別に変更できます。

• .btn-def ※.btn-def は下記a-zのいずれかを継承。HTMLコーディング時に利用推奨。
• .btn-a
• .btn-b
• .btn-c
• .btn-d
• .btn-e
• .btn-f
• .btn-g
• .btn-h
• .btn-i
• .btn-j
• .btn-k
• .btn-l
• .btn-m
• .btn-n
• .btn-o
• .btn-p
• .btn-q
• .btn-r
• .btn-s
• .btn-t
• .btn-u
• .btn-v
• .btn-w
• .btn-x
• .btn-yボタンY
• .btn-zボタンZ

基本ボタンのサイズ・位置の変更

• .btn-a + w-100p

  サンプル

• .btn-a + .w-100p + .f-jc-center

  サンプル

  ※ボタンは基本的に inline-flex なので、.f-jc-center 等で位置合わせ

• .btn-a + .w-100p + .f-jc-center + .h3

  サンプル

基本ボタンとアイコンの組合せ

• .btn-x > .icon{アイコン名}

  home HOME

• .btn-icon + .btn-a > .title{アイコン名}

  home home HOME

  ※.btn-iconはメニューなどでアイコンだけ表示したい時にも有効

• .btn-icon + .btn-c .bdr-radius-50p > .title{アイコン名}

  home home HOME

• .btn-q + .btn-icon > .title{アイコン名}

  home HOME

• .btn-icon-2 + btn-a + icon-facebook
  ※汎用ver2系のアイコンを利用

  Sample facebook

• .btn-a > .icon-instagram
  ※汎用ver2系のアイコンを利用

  instagram

基本ボタンと画像の組合せ

.img-left、.img-right、.img-top、.img-bottom は、「_pc」「_tb」「_sp」の分岐があります。

• .btn-a

  サンプル

• .btn-a + img-right

  サンプル

• .btn-a + img-top

  サンプル

• .btn-a + img-bottom

  サンプル

基本ボタンとカードの組合せ

.img-left、.img-right、.img-top、.img-bottom は、「_pc」「_tb」「_sp」の分岐があります。

• .btn-q + .btn-card

  サンプル

• .btn-r + .btn-card + .img-right

  サンプル

• .btn-x + .btn-card + .img-top

  サンプル

• .btn-s + .btn-card + .img-bottom

  サンプル

• .btn-b + .btn-card + .hvr-shadow

  サンプル

グローバルナビの表示切替ボタン

このボタンは、各メニュー等どこでも利用できます。WordpressカスタムメニューのCSSに「btn-open-nav」を指定してください。
「setting/_design-*.scss」で、デザインなどを変更できます。
複数設置も可能ですが、各デバイスサイズで１つの設置が推奨されます。

合わせて「.scroll-fit」を追加するとスクロールに追従します。
これは、メニュー全体がスクロールに追従してる時は動作しません。
ボタンのみ単独で追従したい時に利用します。これも複数設定できますが、各デバイスサイズで１つの設置が推奨されます。

※「.scroll-fit」は、position:fixedが設定されます。fixedは、親要素にz-indexが設定されていると、最前面に配置できません。 親要素にアニメーションCSSを設定すると、z-indexを指定していなくても重なり順を持つため、最前面に配置できません。
自動パララックスを利用し親要素にアニメーションCSSが追加されている場合「.no-effect」でアニメーションCSSをキャンセルできます。

.btn-open-nav

検索窓の表示切替ボタン

このボタンは、各メニュー等どこでも利用できます。デザイン要素はないので、基本ボタンと組合せて利用します。
「.description」の文言はサブミットボタンの名称にも利用されます。

.open-search

search search SEARCH search けんさく

アコーディオン

基本はPCサイズではマウスオーバー、TBサイズ以下ではクリックで隣接する要素が開閉します。
マウスオーバーは親要素が必須になります。

タブメニュー

セレクトボタン

※「target="_blank"」等も指定できます。

文字スタイル

「.text-minchou」明朝体の指定

「.text-gothic」ゴシック体の指定

「.text-english」欧文フォントの指定

「.text-bold」太字のサンプル。「<strong>」太字のサンプル

「.text-italic」イタリックのサンプル。

「.text-w-100」文字の太さ。
フォントが対応しているならば 100～900 まで指定可

「.text-normal」スタイルなしのサンプル（装飾を削除）

アイコン

アイコンは基本的にGoogleマテリアルアイコンを使用

Googleマテリアルアイコンの一覧はこちら
フォントの種類は、outlined, round, sharp, two-tone から、１つを「/scss/setting/_design-*.scss」で指定。
two-tone は、colorプロパティで色変更ができない。filterを使用する必要あり。
次のいずれを指定しても同じ設定になります。
.icon, .material-icons, .material-icons-outlined, .material-icons-round, .material-icons-sharp, .material-icons-two-tone
searchsearch

一部、追加アイコンの利用も可能

追加アイコンの一覧はこちら
追加のアイコンはVer2と同様の仕様になります。

インデント

「.text-indent-1」一文字目を右にずらす。サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

「.text-indent-0」text-indent:0;を指定。

※「.text-kome」一文字目を左にずらす。サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

home「.text-kome-icon」アイコンの一文字目を左にずらす。サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

折り返しの指定

「.text-wrap-nowrap」改行させない。「_pc」「_tb」「_sp」の分岐あり。

「.text-wrap-balance」バランス良く改行させる。「_pc」「_tb」「_sp」の分岐あり。

「.text-wrap-pretty」レイアウト優先でバランス良く改行させる。「_pc」「_tb」「_sp」の分岐あり。

「.text-wrap」デフォルトの改行。「_pc」「_tb」「_sp」の分岐あり。

クラス指定「.br」改行する。「_pc」「_tb」「_sp」の分岐あり。サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

word-break

「_pc」「_tb」「_sp」の分岐あり。

テキストリンク

通常のテキストリンク

→リンク色を基本の文字色に変更　→リンク色を基本の文字色に変更
※親要素に 「.text-link-bodycolor」を設定した場合、子要素の全てのaタグが対象

→リンク色を基本の文字色に変更
※aタグ個々に 「.text-link-bodycolor」を設定も可

文字サイズ

「<small>」小さな文字。
「.text-size-80p」80%指定。<small>と同じサイズ 「.text-size-s」小さな文字。
「.text-size-ss」さらに小さな文字。
「.text-size-120p」120%指定。

「.h1」「.h2」「.h3」「.h4」「.h5」「.h6」で、h1～h6と同じサイズを指定可。

※class指定は「_pc」「_tb」「_sp」の分岐あり。

文字を囲む

「.text-encircle」文字を囲む。合わせて背景色かボーダーを指定 サンプル

文字を縁取る

• .fuchidori-primary
• .fuchidori-accent
• .fuchidori-primary-l
• .fuchidori-accent-l
• .fuchidori-sub
• .fuchidori-sub2
• .fuchidori-bodybg
• .fuchidori-bodycolor

１文字を四角で囲む

「.text-shikaku」

あいうえお

１文字を丸で囲む

「.text-maru」

あいうえお

マーカー

• .marker-primary　あいうえお
• .marker-primary-l　あいうえお
• .marker-accent　あいうえお
• .marker-accent-l　あいうえお
• .marker-sub　あいうえお
• .marker-sub2　あいうえお
• .marker-bodybg　あいうえお
• .marker-bodycolor　あいうえお

強調ドット

「.text-dot」
※「after-bg-*」で色の変更可

あいうえおかきく

「.text-dot-shikaku」
※「after-bg-*」で色の変更可

あいうえおかきく

文字の均等割付（文字横幅を統一）

「.js-justify」「data-justify-c」に何文字で合わせたいかを設定。
住所…サンプルサンプル
会社概要…サンプルサンプル
FAX番号…サンプルサンプル
e-mail…サンプルサンプル

文字の均等割付（親ボックスに内の文字の始点と終点を合わせる）

「.text-justify」で text-align: justify; text-justify: inter-character; text-align-last: justify;を設定。
「&.dist」または「.text-justify .dist」で text-justify: distribute;（単語の間隔で調整）を設定

文字の縦書き　※「_pc」「_tb」「_sp」あり

IE11で縦書きを指定した要素は、高さを指定しないと画面と同じ高さになる

リストマークの色指定

「.rows-3 > *」は3分割の1ブロック。
「.rows-3 > .col-2」は3分割の2ブロック。
「.rows-3 > .col-3」は3分割の3ブロック。
上記のルールで10分割まで
「.rows」は１行に数は問わず横並び。「.col-*」は効かない。２行にはならない。
「.rows-*」は全サイズに適用。
「.rows-*_sp」はSPサイズのみ適用。
「.rows-*_tb」はTBサイズのみ適用。
「.rows-*_pc」はPCサイズのみ適用。

3分割

3分割（2：1）

2分割（並び順を指定）

「.rows」は１行に数は問わず横並び。「.col-*」は効かない。２行にはならない。

.colの並び方（横・縦）

• 1
  高さ違い
• 2
• 3
• 4
• 5
• 6
  高さ違い

横並び

縦並び

グリッドのパディングを削除・変更する方法

.rowsに「.gutters-0」「.gutters-05」「.gutters-1」を指定する

※「.no-gutters」は、廃止

横スクロール

.rowに「.rows-scroll-x」を指定する

可変テーブル

レスポンシブテーブル（横スクロール）

レスポンシブテーブル（横スクロール・一行目・一列目固定）

小さなテーブル

もっと小さなテーブル

ボーダーなしテーブル

「::before」や「::after」を追加する

「data-before="文字列"」で指定した文字を
「.add-before」「.add-before_pc」「.add-before_tb」「.add-before_sp」のいずれかで追加できる

「data-after="文字列"」で指定した文字を
「.add-after」「.add-after_pc」「.add-after_tb」「.add-after_sp」のいずれかで追加できる

※「table」等での使用を想定していますが、何にでも利用できます。「content:」の文字をHTMLで指定したい時に、ご利用ください。

テーブルレイアウトの変更

「.table-lyaout-auto」「.table-lyaout-fixed」で、table-layoutをそれぞれに変更できる
「_pc」「_tb」「_sp」の分岐あり

「.box-section」 セクションのマージントップ
margin-top: var(--s-box-section);

「.box-section-pd」 セクションのパディングトップ
padding-top: var(--s-box-section);

「.box-section-pd-y」 セクションの上下パディング
padding-top: var(--s-box-section);
padding-bottom: var(--s-box-section);

※「.shadow」は、テキストや画像・SVGなどにも利用可

※「.fukidashi」は、フォントサイズ指定（.h1）で三角の大きさが変更可

※「.fukidashi」の三角の色は、親要素の背景色を引き継ぎ。「.after-bg-*」で三角の色だけを変更可

※「.bg-maru」「.bg-shikaku」色は、「.after-bg-*」でを変更可。（親要素は未指定推奨）

※「.fukidashi」「.bg-maru」「.bg-shikaku」は、併用不可

POINT 4

YOUTUBE

.container

「.container-*」は画面幅により、最大横幅が指定されます。
※「.container-lg」も画面幅が576px以下の時は、最大横幅540pxが指定される
※例外として「.container-fluid」は常に100%

横サイズ

縦サイズ

例「.m-t-0」「.m-t-0_pc」「.p-t-0」「.p-t-0_sp」

※サイズのpx数は、標準フォントサイズを16pxに設定した場合の参考値。

※マージンは上下左右はマイナスも指定可（.m-t--10など）

※パディングトップ（.p-t-*）のみ、Googleマップ用にパーセントの設定あり。詳細はGoogleマップを参考。

「_pc」「_tb」「_sp」の分岐あり

overflow

ボックスからはみ出たの内容の扱い

object-fit

コンテナーにどのようにはめ込むか

pointer-events

イベントの扱い

※「_pc」「_tb」「_sp」あり

Speech Reader

音声ブラウザ用のclass

内部リンク

内部リンクターゲット

.anchor
<a id="#a01" class="anchor"> と指定。固定のヘッダーメニュー分を考慮したclass。
リンクテストはクリック

内部リンクボタン

.link-inside
<a id="#a01" class="link-inside"> と指定。スクロール位置でボタンに「.on」を追加。

カレントの時「.on」を追加する

.on-check
<a href="/smp_template.html" class="on-check">
カレントの時、Javascriptで「.on」を追加する。
HTMLで掲載したメニューボタン等への使用を想定。ハッシュ・クエリは無視されます。

カレントの時「.on」を追加

電話番号リンク

デバイスやブラウザを問わず、同じ処理になります。iPhone等の電話番号の自動リンクは無効になります。

印刷用：改ページの指定

カスタムメニュー

各メニューボタンのCSS class (オプション)を指定することで、次のような機能を利用できます。

• 「hidden_sp」「hidden_tb」「hidden_pc」を指定すると、それぞれのサイズでの表示を切り替えられます。
• 「btn-open-nav」を指定すると、開閉ボタンを設置できます。
• 「logo」「logo_sp」「logo_tb」「logo_pc」を指定すると、ロゴを設置できます。
• 「btn-*」を指定すると、ボタンのデザインを変更できます。
• 「btn-icon」を指定した場合、ナビゲーションラベルに Googleマテリアルアイコンのアイコン名を指定します。
  アイコン名の例）home、search など
• 「btn-icon-2」は汎用Ver2系のアイコンを利用する場合に指定します。
  CSS指定の例）btn-icon-2 icon-facebook など
• 「btn-img」は画像のみ掲載できます
• 「accordion」「accordion_tb」「accordion_pc」など、アコーディオン関係のclassも有効です。
  また、タイトルの属性にグループのIDを指定すれば、 ID内では１つのアコーディオンしか開かないようにできます。
  ※１つアコーディオンを開いた状態で、２つ目を開くと、１つ目は閉じる
• 「open-search」も利用できます。

その他

• トップ画像・コンテンツ画像は、SP・TB・PC用を指定できますが、１枚だけ指定する場合は、SP用を指定します。