PitaCSS 低水準クラスサンプル

このカードは.cardというクラスです。これはデモをわかりやすく見せるためのクラス(カード)です。 PitaCSSには内包されていません。.card

マージン・パディングクラス

マージンとパディングを使った例:

p10 mL10 mR10 が適用された要素

pY20 pX20 mT10 が適用された要素

w100 (幅100%)

w50 (幅50%)

fit-content + content-center

画面幅を変更して表示の変化を確認してください！モバイル(SP)では見えたり、パソコンでは見えなかったりなどします！

📱 hide-max768: 768px以下で非表示
（モバイル画面では見えません）

💻 hide-min768: 768px以上で非表示
（デスクトップ画面では見えません）

🖥️ hide-max1250: 1250px以下で非表示
（デスクトップでのみ表示）

📺 hide-min1250: 1250px以上で非表示
（デスクトップでは見えません）

text-xs: とても小さいテキスト(13px固定)

text-sm: 小さいテキスト(15px固定)

text-base: 基本サイズのテキスト(Clamp関数によりレスポンシブです)

text-lg: 大きいテキスト(Clamp関数によりレスポンシブです)

text-xl: より大きいテキスト(Clamp関数によりレスポンシブです)

text-2xl: 最大サイズのテキスト(Clamp関数によりレスポンシブです)

text-left: 左寄せテキスト

text-center: 中央寄せテキスト

text-right: 右寄せテキスト

サブタイトル

これは低水準クラスのみで構成されたコンテンツエリアです。

マージン、パディング、幅、フォントサイズなどの基本的なクラスを組み合わせて作成されています。