Tailwind
人気のフレームワーク tailwind.css に含まれる margin および padding を利用可能です。
使用例
tailwind.css では、プロパティ、レベル、ブレイクポイントを組み合わせたクラスを表現します。
具体的には{プロパティ}-{レベル}の形式で記述します。
ブレイクポイントを指定する場合は、{ブレイクポイント}:{プロパティ}-{レベル}の形式になります。
以下に、いくつか例を記します。
| クラス名 | 備考 |
|---|---|
| .mt-4 | margin-top: 1rem |
| .my-10 | margin-top: 2.5rem margin-bottom: 2.5rem |
| .p-6 | padding: 1.5rem |
| .lg:mt-8 | ブラウザ幅992px以上のときに margin-top: 2rem |
| .mt-6.md:mt-10.lg:mt-12 |
ブラウザ幅によって余白を変更したい場合は、複数のクラスを同時に設定する。 margin-top: 1.5rem |
詳細は tailwind.css 公式ドキュメント参照。
プロパティ一覧
| プロパティ名 | 実際の値 |
|---|---|
| m | margin |
| mt | margin-top |
| mb | margin-bottom |
| mr | margin-right |
| ml | margin-left |
| mx | margin-left margin-right |
| my | margin-top margin-bottom |
| me | margin-inline-end |
| ms | margin-inline-start |
| p | padding |
| pt | padding-top |
| pb | padding-bottom |
| pr | padding-right |
| pl | padding-left |
| px | padding-left padding-right |
| py | padding-top padding-bottom |
| pe | padding-inline-end |
| ps | padding-inline-start |
レベル一覧
| レベル | 実際の値 | 1rem=16px の場合の値 |
|---|---|---|
| 0 | 0rem | 0px |
| 1 | 0.25rem | 4px |
| 2 | 0.5rem | 8px |
| 3 | 0.75rem | 12px |
| 4 | 1rem | 16px |
| 5 | 1.25rem | 20px |
| 6 | 1.5rem | 24px |
| 7 | 1.75rem | 28px |
| 8 | 2rem | 32px |
| 9 | 2.25rem | 36px |
| 10 | 2.5rem | 40px |
| 11 | 2.75rem | 44px |
| 12 | 3rem | 48px |
| 14 | 3.5rem | 56px |
| 16 | 4rem | 64px |
| 20 | 5rem | 80px |
| 24 | 6rem | 96px |
| 28 | 7rem | 112px |
| 32 | 8rem | 128px |
| 36 | 9rem | 144px |
| 40 | 10rem | 160px |
| 44 | 11rem | 176px |
| 48 | 12rem | 192px |
| 52 | 13rem | 208px |
| 56 | 14rem | 224px |
| 60 | 15rem | 240px |
| 64 | 16rem | 256px |
| 72 | 18rem | 288px |
| 80 | 20rem | 320px |
| 96 | 24rem | 384px |
ブレイクポイント一覧
| ブレイクポイント | 実際の値 |
|---|---|
| sm | 576px |
| md | 768px |
| lg | 992px |
| xl | 1200px |
| xxl | 1400px |