ヘルパークラス

レスポンシブの実装方法

ヘルパークラスに接頭辞を付与することで、デバイス幅に応じたスタイルを適用できます。

接頭辞	適用範囲	参考デバイス
なし	全てのウィンドウ幅	全てのウィンドウ幅
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とするとことで、margin上部のsm余白を適用することができます。また、レスポンシブの識別子を付与することで、レスポンシブに対応することができます。

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とするとことで、padding上部のsm余白を適用することができます。また、レスポンシブの識別子を付与することで、レスポンシブに対応することができます。

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）「表示されました！」

<p>常に表示（u-show）「<span class="u-show u-font-bold u-text-danger">表示されました！</span>」</p>
<p>画面幅640px以上で表示（sm:u-show）「<span class="sm:u-show u-font-bold u-text-danger">表示されました！</span>」</p>
<p>画面幅1280px以上で表示（xl:u-show）「<span class="xl:u-show u-font-bold u-text-danger">表示されました！</span>」</p>
<p>常に非表示（u-hidden）「<span class="u-hidden u-font-bold u-text-danger">表示されました！</span>」</p>
<p>画面幅640px以上で非表示（sm:u-hidden）「<span class="sm:u-hidden u-font-bold u-text-danger">表示されました！</span>」</p>
<p>画面幅1280px以上で非表示（xl:u-hidden）「<span class="xl:u-hidden u-font-bold u-text-danger">表示されました！</span>」</p>
<p>画面幅640px~1280pxで表示（sm:u-show xl:u-hidden）「<span class="sm:u-show xl:u-hidden u-font-bold u-text-danger">表示されました！</span>」</p>

アクセシビリティ

アルファベット大文字変換

大文字で表記するとスクリーンリーダーが英単語を正しく読み上げないことがあるため、アクセシビリティの観点から小文字で表記し、スタイルで大文字にすることが推奨されている

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>

カスタムTailwind CSS

clearfix

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

<div class="c-layout u-clearfix" data-config="float-left">
<figure class="c-layout_image">
<img src="https://picsum.photos/600/400" alt="" width="600" height="400" loading="lazy">
<figcaption class="c-layout_caption">キャプションがある場合は入りますキャプションがある場合は入ります。</figcaption>
</figure>
<div class="c-layout_contents">
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
</div>
</div>

clamp

u-w-minmax-[200px,700px,sm,lg]は、画面幅sm（640px）からmd（1024px）の間で、要素の幅が200pxから700pxの範囲に変更されます。画面幅は、u-w-minmax-[300px,500px,640px,1280px]のように、数値で指定することも可能です。値を入れる角括弧の中にはスペースを入れないよう注意してください。

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

<p class="u-w-minmax-[200px,700px,sm,lg]">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p class="u-w-minmax-[200px,700px,640px,1280px] u-mt-xs">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

overflow-wrap

overflow-wrap: normal;

overflow-wrap: break-word;

overflow-wrap: anywhere;

<p class="u-wrap-normal">overflow-wrap: normal;</p>
<p class="u-wrap-break-word">overflow-wrap: break-word;</p>
<p class="u-wrap-anywhere">overflow-wrap: anywhere;</p>

writing-mode

writing-mode: horizontal-tb;

writing-mode: vertical-rl;

writing-mode: vertical-lr;

<p class="u-writing-horizontal-tb">writing-mode: horizontal-tb;</p>
<p class="u-writing-vertical-rl">writing-mode: vertical-rl;</p>
<p class="u-writing-vertical-lr">writing-mode: vertical-lr;</p>

text-orientation

text-orientation: mixed;

text-orientation: upright;

text-orientation: sideways-right;

text-orientation: sideways;

text-orientation: use-glyph-orientation;

<p class="u-orientation-mixed">text-orientation: mixed;</p>
<p class="u-orientation-upright">text-orientation: upright;</p>
<p class="u-orientation-sideways-right">text-orientation: sideways-right;</p>
<p class="u-orientation-sideways">text-orientation: sideways;</p>
<p class="u-orientation-glyph">text-orientation: use-glyph-orientation;</p>

text-overflow

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

<p class="u-text-overflow-[3]">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

grid auto-fill auto-fit

グリッドページを参照