ヘルパークラス
レスポンシブの実装方法
ヘルパークラスに接頭辞を付与することで、デバイス幅に応じたスタイルを適用できます。
| 接頭辞 | 適用範囲 | 参考デバイス |
|---|---|---|
| なし | 全てのウィンドウ幅 | 全てのウィンドウ幅 |
| xs: | 375px以上 | スマホ（360px～639px想定） |
| sm: | 640px以上 | タブレット（640~1279px想定） |
| md: | 768px以上 | タブレット（640~1279px想定） |
| lg: | 1024px以上 | タブレット（640~1279px想定） |
| xl: | 1280px以上 | PC |
| 2xl: | 1536px以上 | PC |
| 3xl: | 1920px以上 | フルHD・4K |
接頭辞によるレスポンシブの実装方法
sm:u-underlinexl:u-underlineのようにヘルパークラスの前に接頭辞を付与してください。全画面幅でアンダーラインが適用（u-underline）
画面幅640px以上でアンダーラインが適用（sm:u-underline）
画面幅1280px以上でアンダーラインが適用（xl:u-underline）
<div class="u-underline">全画面幅でアンダーラインが適用（u-underline）</div>
<div class="sm:u-underline">画面幅640px以上でアンダーラインが適用（sm:u-underline）</div>
<div class="xl:u-underline">画面幅1280px以上でアンダーラインが適用（xl:u-underline）</div> 接頭辞によるレスポンシブの最大幅指定
max-widthのように最大幅を指定したい場合は、接頭辞の前にmax-を付与してください。画面幅640px未満でアンダーラインが適用（max-sm:u-underline）
画面幅1280px未満でアンダーラインが適用（max-xl:u-underline）
<div class="max-sm:u-underline">画面幅640px未満でアンダーラインが適用（max-sm:u-underline）</div>
<div class="max-xl:u-underline">画面幅1280px未満でアンダーラインが適用（max-xl:u-underline）</div> 余白
下記表は、各識別子に対応する余白サイズの範囲を示しています。 例えば「xs」の場合、画面幅が640pxのときに余白サイズが8px、1280pxのときに余白サイズが16pxとなります。各識別子において、指定された画面幅の範囲内では、余白サイズは画面幅に比例して滑らかに変化します。
| 識別子 | 余白サイズ範囲 | レスポンシブ幅 |
|---|---|---|
| xs | 8px~16px | 640px~1280px |
| sm | 16px~24px | 640px~1280px |
| md | 24px~32px | 640px~1280px |
| lg | 32px~48px | 640px~1280px |
| xl | 48px~80px | 640px~1280px |
| 2xl | 80px~128px | 640px~1280px |
margin
下記表は、ヘルパークラスの役割を表しています。ヘルパークラス列にある識別子は識別子表を参照してください。
| ヘルパークラス | 備考 |
|---|---|
| u-m-識別子 | margin左右上下の余白を設定 |
| u-mt-識別子 | margin上部の余白を設定 |
| u-mb-識別子 | margin下部の余白を設定 |
| u-mr-識別子 | margin右側の余白を設定 |
| u-ml-識別子 | margin左側の余白を設定 |
| u-mx-識別子 | margin左右の余白を設定 |
| u-my-識別子 | margin上下の余白を設定 |
使用法
u-mt-sm
xl:u-mt-sm（画面幅1280px以上の場合に余白適用）
<div class="u-mt-sm">u-mt-sm</div>
<div class="xl:u-mt-sm">xl:u-mt-sm（画面幅1280px以上の場合に余白適用）</div> イレギュラーなmarginの調整
イレギュラーな調整が必要な場合、以下marginで調整することできます。※ただし、まずは識別子を利用した余白を優先的に使用することを検討してください。
方向別マージンヘルパークラス（
u-mtu-mru-mbu-mlu-mxu-my）は、0から160pxまで4px刻みで設定可能です。例: u-mt-0, u-mt-4px, u-mt-8px, ..., u-mt-160px
また、レスポンシブの識別子を付与することで、レスポンシブに対応することができます。
u-mt-24px
xl:u-mt-24px（画面幅1280px以上の場合に余白適用）
<div class="u-mt-24px">u-mt-24px</div>
<div class="xl:u-mt-24px">xl:u-mt-24px（画面幅1280px以上の場合に余白適用）</div> padding
下記表は、ヘルパークラスの役割を表しています。ヘルパークラス列にある識別子は識別子表を参照してください。
| ヘルパークラス | 備考 |
|---|---|
| u-p-識別子 | padding左右上下の余白を設定 |
| u-pt-識別子 | padding上部の余白を設定 |
| u-pb-識別子 | padding下部の余白を設定 |
| u-pr-識別子 | padding右側の余白を設定 |
| u-pl-識別子 | padding左側の余白を設定 |
| u-px-識別子 | padding左右の余白を設定 |
| u-py-識別子 | padding上下の余白を設定 |
使用法
u-pt-sm
xl:u-pt-sm（画面幅1280px以上の場合に余白適用）
<div class="u-pt-sm">u-pt-sm</div>
<div class="xl:u-pt-sm">xl:u-pt-sm（画面幅1280px以上の場合に余白適用）</div> イレギュラーなpaddingの調整
イレギュラーな調整が必要な場合、以下paddingで調整することできます。※ただし、まずは識別子を利用した余白を優先的に使用することを検討してください。
方向別マージンヘルパークラス（
u-ptu-pru-pbu-plu-pxu-py）は、0から160pxまで4px刻みで設定可能です。例: u-pt-0, u-pt-4px, u-pt-8px, ..., u-pt-160px
また、レスポンシブの識別子を付与することで、レスポンシブに対応することができます。
u-pt-24px
xl:u-pt-24px（画面幅1280px以上の場合に余白適用）
<div class="u-pt-24px">u-pt-24px</div>
<div class="xl:u-pt-24px">xl:u-pt-24px（画面幅1280px以上の場合に余白適用）</div> 幅の指定
幅の共通指定
u-w-autoで自動幅指定、u-w-fullで幅100%指定可能u-w-auto（自動幅）
u-w-full
<div class="u-w-auto u-mt-xs u-p-8px u-text-white u-bg-primary">u-w-auto（自動幅）</div>
<div class="u-w-full u-mt-xs u-p-8px u-text-white u-bg-primary">u-w-full</div> 幅のパーセント指定
u-w-5%~u-w-100%まで5%刻みで設定可能u-w-15%
u-w-30%
u-w-50%
u-w-85%
<div class="u-w-15% u-mt-xs u-p-8px u-text-white u-bg-primary">u-w-15%</div>
<div class="u-w-30% u-mt-xs u-p-8px u-text-white u-bg-primary">u-w-30%</div>
<div class="u-w-50% u-mt-xs u-p-8px u-text-white u-bg-primary">u-w-50%</div>
<div class="u-w-85% u-mt-xs u-p-8px u-text-white u-bg-primary">u-w-85%</div> 幅のカラム指定
u-w-1/2, u-w-2/2, u-w-1/3, u-w-2/3, ..., u-w-11/12, u-w-12/12まで設定可能u-w-1/2
u-w-2/2
u-w-1/3
u-w-2/3
u-w-11/12
u-w-12/12
<div class="u-w-1/2 u-mt-xs u-p-8px u-text-white u-bg-primary">u-w-1/2</div>
<div class="u-w-2/2 u-mt-xs u-p-8px u-text-white u-bg-primary">u-w-2/2</div>
<div class="u-w-1/3 u-mt-xs u-p-8px u-text-white u-bg-primary">u-w-1/3</div>
<div class="u-w-2/3 u-mt-xs u-p-8px u-text-white u-bg-primary">u-w-2/3</div>
<div class="u-w-11/12 u-mt-xs u-p-8px u-text-white u-bg-primary">u-w-11/12</div>
<div class="u-w-12/12 u-mt-xs u-p-8px u-text-white u-bg-primary">u-w-12/12</div> デバイス表示の出し分け
常に表示（u-show）「表示されました！」
画面幅640px以上で表示（sm:u-show）「表示されました！」
画面幅1280px以上で表示（xl:u-show）「表示されました！」
常に非表示（u-hidden）「表示されました！」
画面幅640px以上で非表示（sm:u-hidden）「表示されました！」
画面幅1280px以上で非表示（xl:u-hidden）「表示されました！」
画面幅640px~1280pxで表示（sm:u-show xl:u-hidden）「表示されました！」
<div>常に表示（u-show）「<span class="u-show u-font-bold u-text-danger">表示されました！</span>」</div>
<div>画面幅640px以上で表示（sm:u-show）「<span class="sm:u-show u-font-bold u-text-danger">表示されました！</span>」</div>
<div>画面幅1280px以上で表示（xl:u-show）「<span class="xl:u-show u-font-bold u-text-danger">表示されました！</span>」</div>
<div>常に非表示（u-hidden）「<span class="u-hidden u-font-bold u-text-danger">表示されました！</span>」</div>
<div>画面幅640px以上で非表示（sm:u-hidden）「<span class="sm:u-hidden u-font-bold u-text-danger">表示されました！</span>」</div>
<div>画面幅1280px以上で非表示（xl:u-hidden）「<span class="xl:u-hidden u-font-bold u-text-danger">表示されました！</span>」</div>
<div>画面幅640px~1280pxで表示（sm:u-show xl:u-hidden）「<span class="sm:u-show xl:u-hidden u-font-bold u-text-danger">表示されました！</span>」</div> アクセシビリティ
アルファベット大文字変換
大文字で表記するとスクリーンリーダーが英単語を正しく読み上げないことがあるため、アクセシビリティの観点から小文字で表記し、スタイルで大文字にすることが推奨されている
news
<span class="u-uppercase">news</span> スクリーンリーダー対応
表示なし／読み上げあり：「このテキストは、スクリーンリーダーで読み上げられます。」
<p>表示なし／読み上げあり：「<span class="u-sr-only">このテキストは、スクリーンリーダーで読み上げられます。</span>」</p> セキュリティ
@マーク記号をCSSで付与
xxxxgmail.com
<p><span class="u-mail">xxxx</span>gmail.com</p>