サイズ

以下は、CIP Web サイトや OP Web extension において、大きさを表すために使用しているサイズの一覧です。 これらのサイズにおけるルールを保つことで一貫性のある見た目やコードを維持し、ユーザーに対してより理解を深める一助になるでしょう。

このルールの重要な点は、一貫性を保つことです。多くのルールにおいては 4px または 8px の倍数を基準にしているため、デザインの一貫性を保つことができます。そのために本ページに記載している一定の基準の余白を使うことを推奨します。

利用方法

より具体的な利用方法はTailwind CSS のスペーシングスケールを参照してください。

実際は width を意味するw-や、padding を意味するp-などのクラス名として使用しています。 例えば、余白をつけた card を表示したいときに、以下のように記述すると、16px の余白がついた card が表示されます。

<div class="card p-4">padding: 1rem に相当します</div>

結果は以下のようになります。

padding: 1rem に相当します

また、width, padding, margin だけでなく、 flex や grid などのレイアウトにも使用しています。以下の例ではアイテム間の距離gap-を使って均等に配置しています。

<div class="grid grid-cols-3 bg-gray-200 p-4 gap-4">
  <div class="bg-primary-400 p-4">Item</div>
  <div class="bg-primary-400 p-4">Item</div>
  <div class="bg-primary-400 p-4">Item</div>
</div>

結果は以下のようになります。

Item
Item
Item

サイズ一覧

以下は数字、もしくはrel-が付いたトークンで説明していますが、実際は前述の例の通り、w-やp-などのユーティリティクラスと組み合わせて使用します。

  • 00px

  • 10.25rem

  • 20.5rem

  • 30.75rem

  • 41rem

  • 51.25rem

  • 61.5rem

  • 71.75rem

  • 82rem

  • 92.25rem

  • 102.5rem

  • 112.75rem

  • 123rem

  • 143.5rem

  • 164rem

  • 205rem

  • 246rem

  • 287rem

  • 328rem

  • 369rem

  • 4010rem

  • 4411rem

  • 4812rem

  • 5213rem

  • 5614rem

  • 6015rem

  • 6416rem

  • 7218rem

  • 8020rem

  • 9624rem

  • px1px

  • 0.50.125rem

  • 1.50.375rem

  • 2.50.625rem

  • 3.50.875rem

  • rel00px

  • rel10.25em

  • rel20.5em

  • rel30.75em

  • rel41em

  • rel51.25em

  • rel61.5em

  • rel71.75em

  • rel82em

  • rel92.25em

  • rel102.5em

  • rel112.75em

  • rel123em

  • rel143.5em

  • rel164em

  • rel205em

  • rel246em

  • rel287em

  • rel328em

  • rel369em

  • rel4010em

  • rel4411em

  • rel4812em

  • rel5213em

  • rel5614em

  • rel6015em

  • rel6416em

  • rel7218em

  • rel8020em

  • rel9624em

  • relpx1px

  • rel0.50.125em

  • rel1.50.375em

  • rel2.50.625em

  • rel3.50.875em