コンポーネント集

通常テキスト
h◯（見出し）
リスト Type◯
表（table）
画像埋込み
ボタン
少しだけ上に隙間を空けたい（margin）
少しだけ上に隙間を空けたい（margin）
少しだけ上に隙間を空けたい（padding）
少しだけ下に隙間を空けたい（padding）
コンテンツを左右or中央に寄せたい
PCにだけ表示させたい
スマホにだけ表示させたい
テキストにアンダーラインを引きたい
テキストを太字にしたい

通常テキスト

web表示

コラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキスト

Sample Code

<p class="_mb-s">
コラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキストコラムダミーテキスト
</p>

※ pタグの中にテキストを記述します。

h◯（見出し）

※hタグはclassにcssがあたっているので、h2などに書き換えても問題ない

web表示

[h2] ダミーテキスト。大タイトルテキストが入ります。

Sample Code

<h2 class="under_ttl2">
  [h2] ダミーテキスト。大タイトルテキストが入ります。
</h2>

h◯（見出し）

※hタグはclassにcssがあたっているので、h2などに書き換えても問題ない

web表示

[h3] ダミーテキスト。中タイトルテキストが入ります。

Sample Code

<h3 class="under_ttl3 _mt-l">
  [h3] ダミーテキスト。中タイトルテキストが入ります。
</h3>

h◯（見出し）

※hタグはclassにcssがあたっているので、h2などに書き換えても問題ない

web表示

[h4] ダミーテキスト。小タイトルテキストが入ります。

Sample Code

<h4 class="under_ttl4 _mt-m">
  [h4] ダミーテキスト。小タイトルテキストが入ります。
</h4>

リスト Type1

web表示

ダミーテキスト。ダミーテキスト。
ダミーテキスト。ダミーテキスト。
ダミーテキスト。ダミーテキスト。

Sample Code

  <ol class="under_numberli _mt-s">
    <li>ダミーテキスト。ダミーテキスト。</li>
    <li>ダミーテキスト。ダミーテキスト。</li>
    <li>ダミーテキスト。ダミーテキスト。</li>
  </ol>

※ liの数だけナンバリングを先頭に自動付与

リスト Type2

web表示

ダミーテキスト。ダミーテキスト。
ダミーテキスト。ダミーテキスト。
ダミーテキスト。ダミーテキスト。

Sample Code

  <ul class="under_list _mt-s">
    <li>ダミーテキスト。ダミーテキスト。</li>
    <li>ダミーテキスト。ダミーテキスト。</li>
    <li>ダミーテキスト。ダミーテキスト。</li>
  </ul>

※ liの先頭に●を自動付与

表（table）

web表示

発症タイミング	動作の特徴	注意点
ベッドから起き上がる瞬間	上体を急に起こす	ゆっくり横向きになってから起き上がる
朝のトイレから立ち上がる瞬間	前かがみから急に立ち上がる	手すりを使ってゆっくり立ち上がる
朝、顔を洗うとき	前かがみの姿勢をとる	膝を軽く曲げて腰への負担を軽減
着替えの際	片足立ちや前かがみの姿勢	椅子に座って着替える

Sample Code

<div class="table-wrap _mt-xs js-scrollable">
<table class="table-style">
<thead>
<tr>
<th>発症タイミング</th>
<th>動作の特徴</th>
<th>注意点</th>
</tr>
</thead>
<tbody>
<tr>
<td>ベッドから起き上がる瞬間</td>
<td>上体を急に起こす</td>
<td>ゆっくり横向きになってから<br>起き上がる</td>
</tr>
<tr>
<td>朝のトイレから立ち上がる瞬間</td>
<td>前かがみから急に立ち上がる</td>
<td>手すりを使ってゆっくり立ち上がる</td>
</tr>
<tr>
<td>朝、顔を洗うとき</td>
<td>前かがみの姿勢をとる</td>
<td>膝を軽く曲げて腰への負担を軽減</td>
</tr>
<tr>
<td>着替えの際</td>
<td>片足立ちや前かがみの姿勢</td>
<td>椅子に座って着替える</td>
</tr>
</tbody>
</table>
</div>
</div>

※ スマホレイアウト表示時に横幅をはみ出すサイズの場合、横スクロール表示

画像埋込み

web表示

Sample Code

<figure class="_center img-wrap _mt-m">
  <img decoding="async" src="/assets/column/images/demoimg3.png" alt="画像の説明を記載"><br>
</figure>

※ 画像掲載（中央寄せ）

画像のアップロードはWordPress管理画面のメディアから行います。

ボタン

web表示

ボタンのテキスト

Sample Code

<div class="btn2 _mt-m _center">
  <a href="リンク先のURLを記入" class="btn_nomal btn_under">ボタンのテキスト</a>
</div>

その他：少しだけ上に隙間を空けたい（margin）

web表示

上に少しだけ隙間を作る（極小）

上に少しだけ隙間を作る（小）

上に少しだけ隙間を作る（中）

上に少しだけ隙間を作る（大）

上に少しだけ隙間を作る（特大）

Sample Code

<div class="_mt-xs">
上に少しだけ隙間を作る（極小）
</div>
<div class="_mt-s">
上に少しだけ隙間を作る（小）
</div>
<div class="_mt-m">
上に少しだけ隙間を作る（中）
</div>
<div class="_mt-l">
上に少しだけ隙間を作る（大）
</div>
<div class="_mt-xl">
上に少しだけ隙間を作る（特大）
</div>

その他：少しだけ下に隙間を空けたい（margin）

web表示

下に少しだけ隙間を作る（極小）

下に少しだけ隙間を作る（小）

下に少しだけ隙間を作る（中）

下に少しだけ隙間を作る（大）

下に少しだけ隙間を作る（特大）

Sample Code

<div class="_mb-xs">
下に少しだけ隙間を作る（極小）
</div>
<div class="_mb-s">
下に少しだけ隙間を作る（小）
</div>
<div class="_mb-m">
下に少しだけ隙間を作る（中）
</div>
<div class="_mb-l">
下に少しだけ隙間を作る（大）
</div>
<div class="_mb-xl">
下に少しだけ隙間を作る（特大）
</div>

その他：少しだけ上に隙間を空けたい（padding）

web表示

上に少しだけ隙間を作る（極小）

上に少しだけ隙間を作る（小）

上に少しだけ隙間を作る（中）

上に少しだけ隙間を作る（大）

上に少しだけ隙間を作る（特大）

Sample Code

<div class="_pt-xs">
上に少しだけ隙間を作る（極小）
</div>
<div class="_pt-s">
上に少しだけ隙間を作る（小）
</div>
<div class="_pt-m">
上に少しだけ隙間を作る（中）
</div>
<div class="_pt-l">
上に少しだけ隙間を作る（大）
</div>
<div class="_pt-xl">
上に少しだけ隙間を作る（特大）
</div>

その他：少しだけ下に隙間を空けたい（padding）

web表示

下に少しだけ隙間を作る（極小）

下に少しだけ隙間を作る（小）

下に少しだけ隙間を作る（中）

下に少しだけ隙間を作る（大）

下に少しだけ隙間を作る（特大）

Sample Code

<div class="_pb-xs">
下に少しだけ隙間を作る（極小）
</div>
<div class="_pb-s">
下に少しだけ隙間を作る（小）
</div>
<div class="_pb-m">
下に少しだけ隙間を作る（中）
</div>
<div class="_pb-l">
下に少しだけ隙間を作る（大）
</div>
<div class="_pb-xl">
下に少しだけ隙間を作る（特大）
</div>

その他：コンテンツを左右or中央に寄せたい

※block要素のみ

web表示

左に寄せる

右に寄せる

中央に寄せる

Sample Code

<div class="_left">
左に寄せる
</div>
<div class="_right">
右に寄せる
</div>
<div class="_center">
中央に寄せる
</div>

その他：PCにだけ表示させたい

※文章中に入れる場合はspanなどを使用

web表示

PCにだけ表示される

Sample Code

<div class="_sp-none">
PCにだけ表示される
</div>

その他：スマホにだけ表示させたい

※文章中に入れる場合はspanなどを使用

web表示

スマホにだけ表示される

Sample Code

<div class="_pc-none">
スマホにだけ表示される
</div>

その他：テキストにアンダーラインを引きたい

※文章中に入れる場合はspanなどを使用

web表示

テキストにアンダーラインを引きたい

Sample Code

<span class="_text-underline">テキストにアンダーラインを引きたい</span>

その他：テキストを太字にしたい

※文章中に入れる場合はspanなどを使用

web表示

テキストを太字にしたい

Sample Code

<span class="_text-bold">テキストを太字にしたい</span>