スタイルガイド

カラム

<div class="c-col c-sp-col--2 c-sp-col--gutter10 c-col--3 c-col--gutter30">
    <div class="c-col__item">c-col__item</div>
    <div class="c-col__item">c-col__item</div>
    <div class="c-col__item">c-col__item</div>
    <div class="c-col__item">c-col__item</div>
    <div class="c-col__item">c-col__item</div>
    <div class="c-col__item">c-col__item</div>
</div>

見出し・テキスト

MAIN

見出し左線

四角見出し

<h2 class="c-heading-main">MAIN</h2>
<h2 class="c-heading-a">見出し左線</h2>
<h2 class="c-heading-b">四角見出し</h2>

• テキストテキスト
• テキストテキスト
• テキストテキスト
• テキストテキスト

• テキストテキスト
• テキストテキスト
• テキストテキスト

テキストテキスト

<ul class="c-list-disc">
<li>テキストテキスト</li>
<li><a>テキストテキスト</a></li>
<li><a>テキストテキスト</a></li>
<li><a>テキストテキスト</a></li>
</ul>
<ul class="c-list-icon">
<li><a href="#.pdf">テキストテキスト</a></li>
<li><a href="#.xls">テキストテキスト</a></li>
<li><a href="#.doc">テキストテキスト</a></li>
</ul>
<a href="">テキストテキスト</a>

ボタン

テキストリンク

テキストリンク

テキストリンク

テキストリンク

<p><a href="#">テキストリンク</a></p>
<p><a href="#.pdf">テキストリンク</a></p>
<p><a href="#.xls">テキストリンク</a></p>
<p><a href="#.doc">テキストリンク</a></p>
<div class="c-btn-container">
  <a href="#" class="c-btn-a">資料ダウンロード</a>
  <a href="#" class="c-btn-b">
	<h2 class="c-btn-b__ttl">投稿内でのページリンク</h2>
	<p class="c-btn-b__txt">観光に関連する事業を営む皆さまをサポートする保証制度です。</p>
  </a>
  <a href="#" class="c-btn-c">白背景用のページリンクです</a>
  <a href="#.pdf" class="c-btn-icon">個人情報の提供に関する同意書【残高照会・事前相談用】（2021年4月改訂）</a>
  <a href="#.doc" class="c-btn-icon">個人情報の提供に関する同意書【残高照会・事前相談用】（2021年4月改訂）</a>
  <a href="#.xls" class="c-btn-icon">個人情報の提供に関する同意書【残高照会・事前相談用】（2021年4月改訂）</a>
</div>

//classに--moveをつけると動きのないボタンが動きます。

メディアクエリ

//スマートフォンに適用
@include sp {
...
}

//PCに適用
@include pc {
...
}

フォントサイズ・vw

px から em に変換します。

// ()の中にピクセルサイズを入れてください
@include fz()

//例 13pxのフォントサイズにする場合
@include fz(13)

//pxをvwに自動計算する機能
width:vw(500);   //1920pxの幅で500pxになるサイズ
font-size:vw(16);   //1920pxの幅で16pxになる文字サイズ

フォントファミリー

// Font Awesome
font-family :$ff-awesome;
//ゴシック
font-family :$ff-go;

utility

//文字色変える
.u-color-white {
  color: #fff !important;
}
.u-color-red {
  color: #f00 !important;
}
//テキスト位置
.u-ta-l {
  text-align: left !important;
}
.u-ta-c {
  text-align: center !important;
}
.u-ta-r {
  text-align: right !important;
}
//スマホのみ
  .u-sp-ta-l {
  text-align: left !important;
  }
  .u-sp-ta-c {
    text-align: center !important;
  }
  .u-sp-ta-r {
    text-align: right !important;
  }
//PCのみ
  .u-pc-ta-l {
  text-align: left !important;
  }
  .u-pc-ta-c {
    text-align: center !important;
  }
  .u-pc-ta-r {
    text-align: right !important;
  }

//マージン、パディング0
.u-mt-0 { margin-top: 0 !important;}
.u-mb-0 { margin-bottom: 0 !important;}
.u-mb-1em { margin-bottom: 1em !important;}
.u-mb-2em { margin-bottom: 2em !important;}
.u-mb-3em { margin-bottom: 3em !important;}
.u-pt-0 { padding-top: 0 !important;}
.u-pb-0 { padding-bottom: 0 !important; }
//スマホのみ
  .u-sp-mt-0 { margin-top: 0 !important; }
  .u-sp-mb-0 { margin-bottom: 0 !important; }
  .u-sp-pt-0 { margin-top: 0 !important; }
  .u-sp-pb-0 { margin-bottom: 0 !important; }
//PCのみ
  .u-pc-mt-0 { margin-top: 0 !important; }
  .u-pc-mb-0 { margin-bottom: 0 !important; }
  .u-pc-pt-0 { margin-top: 0 !important; }
  .u-pc-pb-0 { margin-bottom: 0 !important; }
}

ショートコード

//template-partsに格納したPHPファイルをショートコードで呼び出す
[myphp file='newspost-pro']
//同カテゴリのお知らせ表示
[myphp file='cat-itiran']
//お知らせ子カテゴリリンク
[myphp file='cat-page']

boxと背景色

//グレーのboxと背景色
<div class="c-box">
テキストテキスト
</div>
//c-inner外で使えば横幅いっぱいに広がります。
<div class="c-bg">
テキストテキスト
</div>

テーブル

thを揃えるmodifyを作成しました。tableブロックにw10~40のclassを指定してください。 下記参照

募集要項

//table
<div class="c-table-a">
<table>
        <thead>
            <tr>
            <th>テーブルヘッダー</th>
            <th>テーブルヘッダー</th>
            <th>テーブルヘッダー</th>
            <th>テーブルヘッダー</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <th>テーブルヘッダー</th>
        <td colspan="3">
        テーブルのデータテーブルのデータテーブルのデータテーブルのデータ
        </td>
        </tr>
        <tr>
            <th>テーブルヘッダー</th>
            <td colspan="3">テーブルのデータテーブルのデータテーブルのデータテーブルのデータ</td>
        </tr>
        <tr>
            <th>テーブルヘッダー</th>
            <td colspan="3">テーブルのデータテーブルのデータテーブルのデータテーブルのデータ</td>
        </tr>
        <tr>
            <th>テーブルヘッダー</th>
            <td colspan="3">テーブルのデータテーブルのデータテーブルのデータテーブルのデータ
            </td>
        </tr>
        <tr>
            <th>テーブルヘッダー</th>
                <td colspan="3">テーブルのデータテーブルのデータテーブルのデータテーブルのデータ
                </td>
            </tr>
            <tr>
                <th>テーブルヘッダー</th>
                <td colspan="3">
                    テーブルのデータテーブルのデータテーブルのデータテーブルのデータ
                </td>
            </tr>
        </tbody>
    </table>
</div>

略語

//youtube埋め込みは下記参照
<div class="c-youtube u-ta-c">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b8rxrnwsfvw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>