テスト用ページ

各コンポーネントのサンプルにはdivタグを使用していますが、その場に適したHTMLタグを使用するようにしてください。

特に見出しに関して、文書のアウトラインに注意してください。

記述の長いものに関してはEmmet記法で書いています。エディタ上で展開してください。

<div class="c-heading-2"></div> <div class="c-heading-3"></div> <div class="c-heading-4"></div> <div class="c-heading-5"></div>

リスト要素の子には、リストアイテムのみ設置可能です。

.c-list>.c-list__item*3

ul要素に適用可。項目が順番を示すものでない（並び替えても意味が通る）場合、olではなくul要素を利用してください。

.c-order-list>.c-order-list__item*3

文章中にリンクが存在する場合のスタイル。

途中で改行が入った場合、文字数の
多いリンクは途中で折り返されます

<div class="c-button"></div> <div class="button" data-size="auto"></div> <div class="c-button-2"></div>

通常のリンク

PDFへのリンク

新規タブのリンク

新規タブで開くPDFへのリンク

サイズはテキスト量に応じて自動で変化します。ボタン内のテキストが長い場合は、コンテナの最大幅で折り返します。アイコンが終端になった場合折り返しが少々おかしくなりますが、任意改行と組み合わせてうまく対応してください。

このボタンは、href="**.pdf" または target="_blank" が属性に含まれる場合、それぞれ自動でアイコンを追加します。
両方設定されている場合、PDFアイコンが優先されます。

table>thead>tr>th*5^^tbody>tr*5>th+td*4 <div class="c-box">...</div> <div class="c-box" data-skin="1">...</div> <div class="c-box" data-skin="2">...</div>

本サイトでは、汎用余白サイズを以下のように定義します。

0px以上576px未満（xs）を基本サイズとし、以下のようにブレークポイントを定義します。

スペーサー

要素同士の余白を、空のdivタグで設定することができます。
data-size属性に0~16の値を設定することで、余白の大きさを設定可能です。デフォルト値は5（20px）です。

<div class="c-spacer"></div> <div class="c-spacer" data-size="10"></div> <div class="c-spacer" data-size="5 md:10"></div>

ブレークポイント名をプレフィックスとして付与することで、ブレークポイントごとの余白サイズを変更できます。

半角スペース区切りで複数指定も可能です。その際は、デフォルトサイズを先頭に書く必要があります。

<div class="c-spacer" data-size="1 sm:4 lg:8"></div>

余白を付けたい要素に直接CSSクラスを追加し、任意の余白を設定できます。（上方向のみ）

サイズ名、ブレークポイントは共通です。

<p class="u-mt-5">余白を付けたい要素</p> <p class="u-mt:5 u-mt-md:10">余白を付けたい要素</p>

ページ内でコンテンツをカラム分けするには、グリッドを使用します。グリッド間の余白は、サイト共通余白を使用します。

.l-grid[data-column="2" data-gap="6"]>.l-grid__container>.l-grid__item*8 .l-grid[data-column="md:2 lg:3" data-gap="6 lg:8"]>.l-grid__container>.l-grid__item*8