CSS ユーティリティ

  1. ホーム
  2. マニュアル
  3. ブロックテーマ
  4. CSS ユーティリティ

Hakoniwa で使用できる CSS ユーティリティを紹介しています。

例えば、追加したブロックの高度な設定の「追加 CSS クラス」にクラス名を追加するだけでスタイルを適用できます。

padding

クラス名スタイル
p-1padding: calc( var( –wp–custom–padding ) * 1 );
p-2padding: calc( var( –wp–custom–padding ) * 2 );
p-4padding: calc( var( –wp–custom–padding ) * 4 );
p-6padding: calc( var( –wp–custom–padding ) * 6 );
p-8padding: calc( var( –wp–custom–padding ) * 8 );
px-1padding-left: calc( var( –wp–custom–padding ) * 1 ); padding-right: calc( var( –wp–custom–padding ) * 1 );
px-2padding-left: calc( var( –wp–custom–padding ) * 2 ); padding-right: calc( var( –wp–custom–padding ) * 2 );
px-4padding-left: calc( var( –wp–custom–padding ) * 4 ); padding-right: calc( var( –wp–custom–padding ) * 4 );
px-6padding-left: calc( var( –wp–custom–padding ) * 6 ); padding-right: calc( var( –wp–custom–padding ) * 6 );
px-8padding-left: calc( var( –wp–custom–padding ) * 8 ); padding-right: calc( var( –wp–custom–padding ) * 8 );
py-1padding-top: calc( var( –wp–custom–padding ) * 1 ); padding-bottom: calc( var( –wp–custom–padding ) * 1 );
py-2padding-top: calc( var( –wp–custom–padding ) * 2 ); padding-bottom: calc( var( –wp–custom–padding ) * 2 );
py-4padding-top: calc( var( –wp–custom–padding ) * 4 ); padding-bottom: calc( var( –wp–custom–padding ) * 4 );
py-6padding-top: calc( var( –wp–custom–padding ) * 6 ); padding-bottom: calc( var( –wp–custom–padding ) * 6 );
py-8padding-top: calc( var( –wp–custom–padding ) * 8 ); padding-bottom: calc( var( –wp–custom–padding ) * 8 );
pt-1
padding-top: calc( var( –wp–custom–padding ) * 1 );
pt-2padding-top: calc( var( –wp–custom–padding ) * 2 );
pt-4padding-top: calc( var( –wp–custom–padding ) * 4 );
pt-6padding-top: calc( var( –wp–custom–padding ) * 6 );
pt-8padding-top: calc( var( –wp–custom–padding ) * 8 );
pb-1padding-bottom: calc( var( –wp–custom–padding ) * 1 );
pb-2padding-bottom: calc( var( –wp–custom–padding ) * 2 );
pb-4padding-bottom: calc( var( –wp–custom–padding ) * 4 );
pb-6padding-bottom: calc( var( –wp–custom–padding ) * 6 );
pb-8padding-bottom: calc( var( –wp–custom–padding ) * 8 );
pl-1
padding-left: calc( var( –wp–custom–padding ) * 1 );
pl-2padding-left: calc( var( –wp–custom–padding ) * 2 );
pl-4padding-left: calc( var( –wp–custom–padding ) * 4 );
pl-6padding-left: calc( var( –wp–custom–padding ) * 6 );
pl-8padding-left: calc( var( –wp–custom–padding ) * 8 );
pr-1
padding-right: calc( var( –wp–custom–padding ) * 1 );
pr-2padding-right: calc( var( –wp–custom–padding ) * 2 );
pr-4padding-right: calc( var( –wp–custom–padding ) * 4 );
pr-6padding-right: calc( var( –wp–custom–padding ) * 6 );
pr-8padding-right: calc( var( –wp–custom–padding ) * 8 );

flex

クラス名スタイル
flex-rowflex-direction:row;
flex-row-reverseflex-direction:row-reverse;
flex-colflex-direction:column;
flex-col-reverseflex-direction:column-reverse;

gap

クラス名スタイル
gap-1gap: calc( var( –wp–custom–gap ) * 1 );
gap-2gap: calc( var( –wp–custom–gap ) * 2 );
gap-4gap: calc( var( –wp–custom–gap ) * 4 );
gap-6gap: calc( var( –wp–custom–gap ) * 6 );
gap-8gap: calc( var( –wp–custom–gap ) * 8 );

このページをシェアする

著者

imamuraのアバター
imamura
株式会社 AnimaGate の代表をやっています。ウェブ制作/ウェブシステム開発/EC サイト構築/運営/ウェブ制作会社向け技術講師などを主な業務としています。ワードプレステーマ Hakoniwa/Nishiki Pro 開発者です。