エントリー内の以下の場所で利用できます。すべての既存クラスを上書きします。
- テキストユニット
- ランディングページ用ユニット
- 追加クラス
- 追加属性
- 見出し（span要素などのインライン要素のみ）
- テキスト
- フォームの設定 > 入力画面の文章
装飾用クラスを活用する
zeroichi_jpには、SMACSSの概念を採用した、本格的なCSSフレームワークが含まれています。
この中の装飾用クラスを利用することで、ランディングページのデザインを更に細かく調整できます。
このページでは、主要なもののみ解説します。すべてのクラス解説は、スタイルガイドの「utility」カテゴリーを参照ください。
カスタムユニットの背景色を変更する
| クラス | 説明 |
|---|---|
| bg-(色の種類) | 背景色を指定した色に変更します。色の種類は first, second, third, info, important です。文字色は白になります（対応できないパーツもあります）。 |
| bg-(色の種類) bg-mild | 背景色を、指定した色よりもコントラストを弱めた色に変更します。 |
| bg-(色の種類) bg-fade | 背景色を、指定した色を薄めた色で網掛けします。 |
テキストの色を変更する
| クラス | 説明 |
|---|---|
| text-(色の種類) | 文字色を指定した色に変更します。色の種類は first, second, third, info, important です。 |
| text-(色の種類) text-mild | 文字色を指定した色よりも薄い色に変更します。 |
テキストの大きさを変更する
| クラス | 説明 |
|---|---|
| text-(サイズ) | 文字サイズを、現在の文字サイズからの相対で変更します。サイズは xs, sm, lg, xl です。大きすぎるとスマートフォンで見たときにバランスが悪くなることがあります。 |
| text-md | 文字サイズを、HTMLファイルの標準文字サイズにリセットします。 |
文字の寄せ方向を変更する
| クラス | 説明 |
|---|---|
| line-(方向) | 行内の文字の寄せ方向を変更します。方向は l が左、 c が中央、 r が右です。長文に左以外を使用すると、スマートフォンでの可読性が落ちることがあります。 |
余白の大きさを変更する
| クラス | 説明 |
|---|---|
| p-t | 上余白を一行分空けます。 |
| p-t-(サイズ) | 上余白を指定した大きさに変更します。サイズは 0, xs, sm, lg, xl, xxl です。大きすぎるとスマートフォンで見たときにバランスが悪くなることがあります。 |
| p-b | 下余白を一行分空けます。 |
| p-b-(サイズ) | 下余白を指定した大きさに変更します。 |
画面サイズで表示・非表示を切り替える
| クラス | 説明 |
|---|---|
| hidden-sm-down | 画面サイズがスマートフォン（iPhone 8 Plus）以下のときに非表示になります。br要素に使用すると、長文をタブレット以上で途中改行させることができます。 |
| hidden-md-up | 画面サイズがスマートフォン（iPhone 8 Plus）を超えるときに非表示になります。br要素に使用すると、文字数が多い見出しをスマートフォンで途中改行させることができます。 |