CSS ユーティリティ

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

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

padding
flex
justify-content
gap
writing-mode

padding

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

flex

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

justify-content

クラス名	スタイル
justify-start	justify-content: flex-start;
justify-end	justify-content: flex-end;
justify-center	justify-content: center;
justify-between	justify-content: space-between;
justify-around	justify-content: space-around;
justify-evenly	justify-content: space-evenly;
justify-stretch	justify-content: stretch;
justify-baseline	justify-content: baseline;
justify-normal	justify-content: normal;

gap

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

writing-mode

クラス名	スタイル
writing-horizontal-tb	writing-mode: horizontal-tb;
writing-vertical-lr	writing-mode: vertical-lr;
writing-vertical-rl	writing-mode: vertical-rl;
writing-sideways-rl	writing-mode: sideways-rl;
writing-sideways-lr	writing-mode: sideways-lr;