Nishiki Pro：margin/paddingなど、クラスを追加するだけで値が適用できる CSS ユーティリティ一覧

Nishiki(Pro)

これから Nishiki Pro
テーマを使うなら1度は確認しよう！

Nishiki テーマおすすめ設定 テーマおすすめ設定を見る
  1. ホーム
  2. マニュアル
  3. Nishiki(Pro)
  4. Nishiki Pro：margin/paddingなど、クラスを追加するだけで値が適用できる CSS ユーティリティ一覧

Nishiki Pro バージョン 1.0.249 から、汎用性の高い CSS クラスを用意しました。ウェブサイト制作などに活用ください（長いので、目次を使いながら読んでください）。

目次

margin

全方向

クラス名適用されるプロパティ
.m-0margin:0;
.m-1margin:0.25rem;
.m-2margin:0.5rem;
.m-3margin:0.75rem;
.m-4margin:1rem;
.m-5margin:1.25rem;
.m-6margin:1.5rem;
.m-7margin:1.75rem;
.m-8margin:2rem;
.m-9margin:2.25rem;
.m-10margin:2.5rem;

全方向（ネガティブ）

クラス名適用されるプロパティ
.-m-0margin:0;
.-m-1margin:-0.25rem;
.-m-2margin:-0.5rem;
.-m-3margin:-0.75rem;
.-m-4margin:-1rem;
.-m-5margin:-1.25rem;
.-m-6margin:-1.5rem;
.-m-7margin:-1.75rem;
.-m-8margin:-2rem;
.-m-9margin:-2.25rem;
.-m-10margin:-2.5rem;

左右（X軸）

クラス名適用されるプロパティ
.mx-0margin-left:0;
margin-right:0;
.mx-1margin-left:0.25rem;
margin-right:0.25rem;
.mx-2margin-left:0.5rem;
margin-right:0.5rem;
.mx-3margin-left:0.75rem;
margin-right:0.75rem;
.mx-4margin-left:1rem;
margin-right:1rem;
.mx-5margin-left:1.25rem;
margin-right:1.25rem;
.mx-6margin-left:1.5rem;
margin-right:1.5rem;
.mx-7margin-left:1.75rem;
margin-right:1.75rem;
.mx-8margin-left:2rem;
margin-right:2rem;
.mx-9margin-left:2.25rem;
margin-right:2.25rem;
.mx-10margin-left:2.5rem;
margin-right:2.5rem;

左右（X軸：ネガティブ）

クラス名適用されるプロパティ
.-mx-0margin-left:0;
margin-right:0;
.-mx-1margin-left:-0.25rem;
margin-right:-0.25rem;
.-mx-2margin-left:-0.5rem;
margin-right:-0.5rem;
.-mx-3margin-left:-0.75rem;
margin-right:-0.75rem;
.-mx-4margin-left:-1rem;
margin-right:-1rem;
.-mx-5margin-left:-1.25rem;
margin-right:-1.25rem;
.-mx-6margin-left:-1.5rem;
margin-right:-1.5rem;
.-mx-7margin-left:-1.75rem;
margin-right:-1.75rem;
.-mx-8margin-left:-2rem;
margin-right:-2rem;
.-mx-9margin-left:-2.25rem;
margin-right:-2.25rem;
.-mx-10margin-left:-2.5rem;
margin-right:-2.5rem;

上下（Y軸）

クラス名適用されるプロパティ
.my-0margin-top:0;
margin-bottom:0;
.my-1margin-top:0.25rem;
margin-bottom:0.25rem;
.my-2margin-top:0.5rem;
margin-bottom:0.5rem;
.my-3margin-top:0.75rem;
margin-bottom:0.75rem;
.my-4margin-top:1rem;
margin-bottom:1rem;
.my-5margin-top:1.25rem;
margin-bottom:1.25rem;
.my-6margin-top:1.5rem;
margin-bottom:1.5rem;
.my-7margin-top:1.75rem;
margin-bottom:1.75rem;
.my-8margin-top:2rem;
margin-bottom:2rem;
.my-9margin-top:2.25rem;
margin-bottom:2.25rem;
.my-10margin-top:2.5rem;
margin-bottom:2.5rem;

上下（Y軸：ネガティブ）

クラス名適用されるプロパティ
.-my-0margin-top:0;
margin-bottom:0;
.-my-1margin-top:-0.25rem;
margin-bottom:-0.25rem;
.-my-2margin-top:-0.5rem;
margin-bottom:-0.5rem;
.-my-3margin-top:-0.75rem;
margin-bottom:-0.75rem;
.-my-4margin-top:-1rem;
margin-bottom:-1rem;
.-my-5margin-top:-1.25rem;
margin-bottom:-1.25rem;
.-my-6margin-top:-1.5rem;
margin-bottom:-1.5rem;
.-my-7margin-top:-1.75rem;
margin-bottom:-1.75rem;
.-my-8margin-top:-2rem;
margin-bottom:-2rem;
.-my-9margin-top:-2.25rem;
margin-bottom:-2.25rem;
.-my-10margin-top:-2.5rem;
margin-bottom:-2.5rem;

上

クラス名適用されるプロパティ
.mt-0margin-top:0;
.mt-1margin-top:0.25rem;
.mt-2margin-top:0.5rem;
.mt-3margin-top:0.75rem;
.mt-4margin-top:1rem;
.mt-5margin-top:1.25rem;
.mt-6margin-top:1.5rem;
.mt-7margin-top:1.75rem;
.mt-8margin-top:2rem;
.mt-9margin-top:2.25rem;
.mt-10margin-top:2.5rem;

上（ネガティブ）

クラス名適用されるプロパティ
.-mt-0margin-top:0;
.-mt-1margin-top:-0.25rem;
.-mt-2margin-top:-0.5rem;
.-mt-3margin-top:-0.75rem;
.-mt-4margin-top:-1rem;
.-mt-5margin-top:-1.25rem;
.-mt-6margin-top:-1.5rem;
.-mt-7margin-top:-1.75rem;
.-mt-8margin-top:-2rem;
.-mt-9margin-top:-2.25rem;
.-mt-10margin-top:-2.5rem;

右

クラス名適用されるプロパティ
.mr-0margin-right:0;
.mr-1margin-right:0.25rem;
.mr-2margin-right:0.5rem;
.mr-3margin-right:0.75rem;
.mr-4margin-right:1rem;
.mr-5margin-right:1.25rem;
.mr-6margin-right:1.5rem;
.mr-7margin-right:1.75rem;
.mr-8margin-right:2rem;
.mr-9margin-right:2.25rem;
.mr-10margin-right:2.5rem;

右（ネガティブ）

クラス名適用されるプロパティ
.-mr-0margin-right:0;
.-mr-1margin-right:-0.25rem;
.-mr-2margin-right:-0.5rem;
.-mr-3margin-right:-0.75rem;
.-mr-4margin-right:-1rem;
.-mr-5margin-right:-1.25rem;
.-mr-6margin-right:-1.5rem;
.-mr-7margin-right:-1.75rem;
.-mr-8margin-right:-2rem;
.-mr-9margin-right:-2.25rem;
.-mr-10margin-right:-2.5rem;

下

クラス名適用されるプロパティ
.mb-0margin-bottom:0;
.mb-1margin-bottom:0.25rem;
.mb-2margin-bottom:0.5rem;
.mb-3margin-bottom:0.75rem;
.mb-4margin-bottom:1rem;
.mb-5margin-bottom:1.25rem;
.mb-6margin-bottom:1.5rem;
.mb-7margin-bottom:1.75rem;
.mb-8margin-bottom:2rem;
.mb-9margin-bottom:2.25rem;
.mb-10margin-bottom:2.5rem;

下（ネガティブ）

クラス名適用されるプロパティ
.-mb-0margin-bottom:0;
.-mb-1margin-bottom:-0.25rem;
.-mb-2margin-bottom:-0.5rem;
.-mb-3margin-bottom:-0.75rem;
.-mb-4margin-bottom:-1rem;
.-mb-5margin-bottom:-1.25rem;
.-mb-6margin-bottom:-1.5rem;
.-mb-7margin-bottom:-1.75rem;
.-mb-8margin-bottom:-2rem;
.-mb-9margin-bottom:-2.25rem;
.-mb-10margin-bottom:-2.5rem;

左

クラス名適用されるプロパティ
.ml-0margin-left:0;
.ml-1margin-left:-0.25rem;
.ml-2margin-left:-0.5rem;
.ml-3margin-left:-0.75rem;
.ml-4margin-left:-1rem;
.ml-5margin-left:-1.25rem;
.ml-6margin-left:-1.5rem;
.ml-7margin-left:-1.75rem;
.ml-8margin-left:-2rem;
.ml-9margin-left:-2.25rem;
.ml-10margin-left:-2.5rem;

左（ネガティブ）

クラス名適用されるプロパティ
.-ml-0margin-left:0;
.-ml-1margin-left:-0.25rem;
.-ml-2margin-left:-0.5rem;
.-ml-3margin-left:-0.75rem;
.-ml-4margin-left:-1rem;
.-ml-5margin-left:-1.25rem;
.-ml-6margin-left:-1.5rem;
.-ml-7margin-left:-1.75rem;
.-ml-8margin-left:-2rem;
.-ml-9margin-left:-2.25rem;
.-ml-10margin-left:-2.5rem;

padding

全方向

クラス名適用されるプロパティ
.p-0padding:0;
.p-1padding:0.25rem;
.p-2padding:0.5rem;
.p-3padding:0.75rem;
.p-4padding:1rem;
.p-5padding:1.25rem;
.p-6padding:1.5rem;
.p-7padding:1.75rem;
.p-8padding:2rem;
.p-9padding:2.25rem;
.p-10padding:2.5rem;

左右（X軸）

クラス名適用されるプロパティ
.px-0padding-left:0;
padding-right:0;
.px-1padding-left:0.25rem;
padding-right:0.25rem;
.px-2padding-left:0.5rem;
padding-right:0.5rem;
.px-3padding-left:0.75rem;
padding-right:0.75rem;
.px-4padding-left:1rem;
padding-right:1rem;
.px-5padding-left:1.25rem;
padding-right:1.25rem;
.px-6padding-left:1.5rem;
padding-right:1.5rem;
.px-7padding-left:1.75rem;
padding-right:1.75rem;
.px-8padding-left:2rem;
padding-right:2rem;
.px-9padding-left:2.25rem;
padding-right:2.25rem;
.px-10padding-left:2.5rem;
padding-right:2.5rem;

上下（Y軸）

クラス名適用されるプロパティ
.py-0padding-top:0;
padding-bottom:0;
.py-1padding-top:0.25rem;
padding-bottom:0.25rem;
.py-2padding-top:0.5rem;
padding-bottom:0.5rem;
.py-3padding-top:0.75rem;
padding-bottom:0.75rem;
.py-4padding-top:1rem;
padding-bottom:1rem;
.py-5padding-top:1.25rem;
padding-bottom:1.25rem;
.py-6padding-top:1.5rem;
padding-bottom:1.5rem;
.py-7padding-top:1.75rem;
padding-bottom:1.75rem;
.py-8padding-top:2rem;
padding-bottom:2rem;
.py-9padding-top:2.25rem;
padding-bottom:2.25rem;
.py-10padding-top:2.5rem;
padding-bottom:2.5rem;

上

クラス名適用されるプロパティ
.pt-0padding-top:0;
.pt-1padding-top:0.25rem;
.pt-2padding-top:0.5rem;
.pt-3padding-top:0.75rem;
.pt-4padding-top:1rem;
.pt-5padding-top:1.25rem;
.pt-6padding-top:1.5rem;
.pt-7padding-top:1.75rem;
.pt-8padding-top:2rem;
.pt-9padding-top:2.25rem;
.pt-10padding-top:2.5rem;

右

クラス名適用されるプロパティ
.pr-0padding-right:0;
.pr-1padding-right:0.25rem;
.pr-2padding-right:0.5rem;
.pr-3padding-right:0.75rem;
.pr-4padding-right:1rem;
.pr-5padding-right:1.25rem;
.pr-6padding-right:1.5rem;
.pr-7padding-right:1.75rem;
.pr-8padding-right:2rem;
.pr-9padding-right:2.25rem;
.pr-10padding-right:2.5rem;

下

クラス名指定されるプロパティ
.pb-0padding-bottom:0;
.pb-1padding-bottom:0.25rem;
.pb-2padding-bottom:0.5rem;
.pb-3padding-bottom:0.75rem;
.pb-4padding-bottom:1rem;
.pb-5padding-bottom:1.25rem;
.pb-6padding-bottom:1.5rem;
.pb-7padding-bottom:1.75rem;
.pb-8padding-bottom:2rem;
.pb-9padding-bottom:2.25rem;
.pb-10padding-bottom:2.5rem;

左

クラス名適用されるプロパティ
.pl-0padding-left:0;
.pl-1padding-left:0.25rem;
.pl-2padding-left:0.5rem;
.pl-3padding-left:0.75rem;
.pl-4padding-left:1rem;
.pl-5padding-left:1.25rem;
.pl-6padding-left:1.5rem;
.pl-7padding-left:1.75rem;
.pl-8padding-left:2rem;
.pl-9padding-left:2.25rem;
.pl-10padding-left:2.5rem;

position

クラス名適用されるプロパティ
.staticposition:static;
.fixedposition:fixed;
.absoluteposition:absolute;
.relativeposition:relative;
.stickyposition:sticky;

top

クラス名適用されるプロパティ
.top-0top:0;
.top-1top:0.25rem;
.top-2top:0.5rem;
.top-3top:0.75rem;
.top-4top:1rem;
.top-5top:1.25rem;
.top-6top:1.5rem;
.top-7top:1.75rem;
.top-8top:2rem;
.top-9top:2.25rem;
.top-10top:2.5rem;
.-top-0top:0;
.-top-1top:-0.25rem;
.-top-2top:-0.5rem;
.-top-3top:-0.75rem;
.-top-4top:-1rem;
.-top-5top:-1.25rem;
.-top-6top:-1.5rem;
.-top-7top:-1.75rem;
.-top-8top:-2rem;
.-top-9top:-2.25rem;
.-top-10top:-2.5rem;
.top-1/2top:calc( 100% * 1 / 2 );
.top-1/3top:calc( 100% * 1 / 3 );
.top-2/3top:calc( 100% * 2 / 3 );
.top-1/4top:calc( 100% * 1 / 4 );
.top-2/4top:calc( 100% * 2 / 4 );
.top-3/4top:calc( 100% * 3 / 4 );
.-top-1/2top:calc( -100% * 1 / 2 );
.-top-1/3top:calc( -100% * 1 / 3 );
.-top-2/3top:calc( -100% * 2 / 3 );
.-top-1/4top:calc( -100% * 1 / 4 );
.-top-2/4top:calc( -100% * 2 / 4 );
.-top-3/4top:calc( -100% * 3 / 4 );

right

クラス名適用されるプロパティ
.right-0right:0;
.right-1right:0.25rem;
.right-2right:0.5rem;
.right-3right:0.75rem;
.right-4right:1rem;
.right-5right:1.25rem;
.right-6right:1.5rem;
.right-7right:1.75rem;
.right-8right:2rem;
.right-9right:2.25rem;
.right-10right:2.5rem;
.-right-0right:0;
.-right-1right:-0.25rem;
.-right-2right:-0.5rem;
.-right-3right:-0.75rem;
.-right-4right:-1rem;
.-right-5right:-1.25rem;
.-right-6right:-1.5rem;
.-right-7right:-1.75rem;
.-right-8right:-2rem;
.-right-9right:-2.25rem;
.-right-10right:-2.5rem;
.right-1/2right:calc( 100% * 1 / 2 );
.right-1/3right:calc( 100% * 1 / 3 );
.right-2/3right:calc( 100% * 2 / 3 );
.right-1/4right:calc( 100% * 1 / 4 );
.right-2/4right:calc( 100% * 2 / 4 );
.right-3/4right:calc( 100% * 3 / 4 );
.-right-1/2right:calc( -100% * 1 / 2 );
.-right-1/3right:calc( -100% * 1 / 3 );
.-right-2/3right:calc( -100% * 2 / 3 );
.-right-1/4right:calc( -100% * 1 / 4 );
.-right-2/4right:calc( -100% * 2 / 4 );
.-right-3/4right:calc( -100% * 3 / 4 );

bottom

クラス名適用されるプロパティ
.bottom-0bottom:0;
.bottom-1bottom:0.25rem;
.bottom-2bottom:0.5rem;
.bottom-3bottom:0.75rem;
.bottom-4bottom:1rem;
.bottom-5bottom:1.25rem;
.bottom-6bottom:1.5rem;
.bottom-7bottom:1.75rem;
.bottom-8bottom:2rem;
.bottom-9bottom:2.25rem;
.bottom-10bottom:2.5rem;
.-bottom-0bottom:0;
.-bottom-1bottom:-0.25rem;
.-bottom-2bottom:-0.5rem;
.-bottom-3bottom:-0.75rem;
.-bottom-4bottom:-1rem;
.-bottom-5bottom:-1.25rem;
.-bottom-6bottom:-1.5rem;
.-bottom-7bottom:-1.75rem;
.-bottom-8bottom:-2rem;
.-bottom-9bottom:-2.25rem;
.-bottom-10bottom:-2.5rem;
.bottom-1/2bottom:calc( 100% * 1 / 2 );
.bottom-1/3bottom:calc( 100% * 1 / 3 );
.bottom-2/3bottom:calc( 100% * 2 / 3 );
.bottom-1/4bottom:calc( 100% * 1 / 4 );
.bottom-2/4bottom:calc( 100% * 2 / 4 );
.bottom-3/4bottom:calc( 100% * 3 / 4 );
.-bottom-1/2bottom:calc( -100% * 1 / 2 );
.-bottom-1/3bottom:calc( -100% * 1 / 3 );
.-bottom-2/3bottom:calc( -100% * 2 / 3 );
.-bottom-1/4bottom:calc( -100% * 1 / 4 );
.-bottom-2/4bottom:calc( -100% * 2 / 4 );
.-bottom-3/4bottom:calc( -100% * 3 / 4 );

left

クラス名適用されるプロパティ
.left-0left:0;
.left-1left:0.25rem;
.left-2left:0.5rem;
.left-3left:0.75rem;
.left-4left:1rem;
.left-5left:1.25rem;
.left-6left:1.5rem;
.left-7left:1.75rem;
.left-8left:2rem;
.left-9left:2.25rem;
.left-10left:2.5rem;
.-left-0left:0;
.-left-1left:-0.25rem;
.-left-2left:-0.5rem;
.-left-3left:-0.75rem;
.-left-4left:-1rem;
.-left-5left:-1.25rem;
.-left-6left:-1.5rem;
.-left-7left:-1.75rem;
.-left-8left:-2rem;
.-left-9left:-2.25rem;
.-left-10left:-2.5rem;
.left-1/2left:calc( 100% * 1 / 2 );
.left-1/3left:calc( 100% * 1 / 3 );
.left-2/3left:calc( 100% * 2 / 3 );
.left-1/4left:calc( 100% * 1 / 4 );
.left-2/4left:calc( 100% * 2 / 4 );
.left-3/4left:calc( 100% * 3 / 4 );
.-left-1/2left:calc( -100% * 1 / 2 );
.-left-1/3left:calc( -100% * 1 / 3 );
.-left-2/3left:calc( -100% * 2 / 3 );
.-left-1/4left:calc( -100% * 1 / 4 );
.-left-2/4left:calc( -100% * 2 / 4 );
.-left-3/4left:calc( -100% * 3 / 4 );

width

クラス名適用されるプロパティ
.w-fullwidth:100%;
.w-autowidth:auto;
.w-0width:0;
.w-1width:0.25rem;
.w-2width:0.5rem;
.w-3width:0.75rem;
.w-4width:1rem;
.w-5width:1.25rem;
.w-6width:1.5rem;
.w-7width:1.75rem;
.w-8width:2rem;
.w-9width:2.25rem;
.w-10width:2.5rem;
.w-1/2width:calc( 100% * 1 / 2 );
.w-1/3width:calc( 100% * 1 / 3 );
.w-2/3width:calc( 100% * 2 / 3 );
.w-1/4width:calc( 100% * 1 / 4 );
.w-2/4width:calc( 100% * 2 / 4 );
.w-3/4width:calc( 100% * 3 / 4 );
.w-1/4width:calc( 100% * 1 / 4 );
.w-2/4width:calc( 100% * 2 / 4 );
.w-3/4width:calc( 100% * 3 / 4 );
.w-1/5width:calc( 100% * 1 / 5 );
.w-2/5width:calc( 100% * 2 / 5 );
.w-3/5width:calc( 100% * 3 / 5 );
.w-4/5width:calc( 100% * 4 / 5 );
.w-1/6width:calc( 100% * 1 / 6 );
.w-2/6width:calc( 100% * 2 / 6 );
.w-3/6width:calc( 100% * 3 / 6 );
.w-4/6width:calc( 100% * 4 / 6 );
.w-5/6width:calc( 100% * 5 / 6 );
.w-1/12width:calc( 100% * 1 / 12 );
.w-2/12width:calc( 100% * 2 / 12 );
.w-3/12width:calc( 100% * 3 / 12 );
.w-4/12width:calc( 100% * 4 / 12 );
.w-5/12width:calc( 100% * 5 / 12 );
.w-6/12width:calc( 100% * 6 / 12 );
.w-7/12width:calc( 100% * 7 / 12 );
.w-8/12width:calc( 100% * 8 / 12 );
.w-9/12width:calc( 100% * 9 / 12 );
.w-10/12width:calc( 100% * 10 / 12 );
.w-11/12width:calc( 100% * 11 / 12 );

height

クラス名適用されるプロパティ
.h-fullheight:100%;
.h-autoheight:auto;
.h-0height:0;
.h-1height:0.25rem;
.h-2height:0.5rem;
.h-3height:0.75rem;
.h-4height:1rem;
.h-5height:1.25rem;
.h-6height:1.5rem;
.h-7height:1.75rem;
.h-8height:2rem;
.h-9height:2.25rem;
.h-10height:2.5rem;
.h-1/2height:calc( 100% * 1 / 2 );
.h-1/3height:calc( 100% * 1 / 3 );
.h-2/3height:calc( 100% * 2 / 3 );
.h-1/4height:calc( 100% * 1 / 4 );
.h-2/4height:calc( 100% * 2 / 4 );
.h-3/4height:calc( 100% * 3 / 4 );
.h-1/4height:calc( 100% * 1 / 4 );
.h-2/4height:calc( 100% * 2 / 4 );
.h-3/4height:calc( 100% * 3 / 4 );
.h-1/5height:calc( 100% * 1 / 5 );
.h-2/5height:calc( 100% * 2 / 5 );
.h-3/5height:calc( 100% * 3 / 5 );
.h-4/5height:calc( 100% * 4 / 5 );
.h-1/6height:calc( 100% * 1 / 6 );
.h-2/6height:calc( 100% * 2 / 6 );
.h-3/6height:calc( 100% * 3 / 6 );
.h-4/6height:calc( 100% * 4 / 6 );
.h-5/6height:calc( 100% * 5 / 6 );
.h-1/12height:calc( 100% * 1 / 12 );
.h-2/12height:calc( 100% * 2 / 12 );
.h-3/12height:calc( 100% * 3 / 12 );
.h-4/12height:calc( 100% * 4 / 12 );
.h-5/12height:calc( 100% * 5 / 12 );
.h-6/12height:calc( 100% * 6 / 12 );
.h-7/12height:calc( 100% * 7 / 12 );
.h-8/12height:calc( 100% * 8 / 12 );
.h-9/12height:calc( 100% * 9 / 12 );
.h-10/12height:calc( 100% * 10 / 12 );
.h-11/12height:calc( 100% * 11 / 12 );

display

クラス名適用されるプロパティ
.blockdisplay:block;
.inline-blockdisplay:inline-block;
.hiddendisplay:hidden;
.flexdisplay:flex;
.inline-flexdisplay:inline-flex;
.inlinedisplay:inline;
.tabledisplay:table;
.table-celldisplay:table-cell;
.table-columndisplay:table-column;
.table-captiondisplay:table-caption;
.griddisplay:grid;

aspect-ratio

クラス名適用されるプロパティ
.aspect-ratio-1-1aspect-ratio: 1/1;
.aspect-ratio-3-2aspect-ratio: 3/2;
.aspect-ratio-4-3aspect-ratio: 4/3;
.aspect-ratio-16-9aspect-ratio: 16/9;

backdrop-filter

クラス名適用されるプロパティ
.backdrop-blur-nonebackdrop-filter: blur(0);
.backdrop-blur-smbackdrop-filter: blur(4px);
.backdrop-blurbackdrop-filter: blur(8px);
.backdrop-blur-mdbackdrop-filter: blur(12px);
.backdrop-blur-lgbackdrop-filter: blur(16px);
.backdrop-blur-xlbackdrop-filter: blur(24px);
.backdrop-blur-2xlbackdrop-filter: blur(40px);
.backdrop-blur-3xlbackdrop-filter: blur(64px);

クラス名の頭に「pseudo-」をつけると擬似要素 before に対してプロパティが適用されます（例：「.pseudo-backdrop-blur-sm」）。ただし、擬似要素が効く要素のみ使用できます。 

justify-content

クラス名適用されるプロパティ
.justify-startjustify-content: flex-start;
.justify-endjustify-content: flex-end;
.justify-centerjustify-content: center;
.justify-betweenjustify-content: space-between;
.justify-aroundjustify-content: space-around;
.justify-evenlyjustify-content: space-evenly;
.justify-baselinejustify-content: baseline;
.justify-normaljustify-content: normal;

align-items

クラス名適用されるプロパティ
.items-startalign-items: flex-start;
.items-endalign-items: flex-end;
.items-centeralign-items: center;
.items-baselinealign-items: baseline;
.items-stretchalign-items: stretch;

flex-direction

クラス名適用されるプロパティ
.flex-rowflex-direction: row !important;
.flex-row-reverseflex-direction: row-reverse !important;
.flex-colflex-direction: column !important;
.flex-col-reverseflex-direction: column-reverse !important;

box-decoration-break

クラス名適用されるプロパティ
.outside-leftbox-decoration-break: clone;
.box-decoration-slicebox-decoration-break: slice;

レスポンシブ対応

デスクトップ、タブレット、スマートフォンそれぞれで値を柔軟に変更したい場合は、以下の例のようにクラスを指定してください。

※今のところ、レスポンシブ対応できるクラスは以下の通りです。他のプロパティでは使用できませんのでご注意ください。

レスポンシブ対応できるクラス一覧

  • margin
  • padding
  • position
  • top
  • right
  • left
  • bottom
  • width
  • height
  • display

タブレット（例）

クラス名に「md:」を追加してください。タブレットサイズ以下では「m-3」クラスの値が適用されます。

<div class="m-1 md:m-3">...</div>

スマートフォン（例）

クラス名に「sm:」を追加してください。スマートフォンサイズ以下では「pb-5」クラスの値が適用されます。

<div class="py-3 sm:pb-5">...</div>

共存もできます（例）

タブレットサイズ以上では「m-8」、タブレットサイズ以下では「m-5」、スマートフォンサイズ以下では「m-3」クラスの値が適用されます。

<div class="m-8 md:m-5 sm:m-3">...</div>

WordPress テーマ Nishiki Pro

「ウェブサイト運営に本当に必要とされる機能」をテーマ内にまとめて搭載したワードプレステーマです。

ブロックエディター機能を強化し、これまでのワードプレスでは難しかったコンテンツが簡単に作れます。

ブログ、ポートフォリオ、コーポレートサイト、ビジネスサイト、オンラインショップなど、様々な目的のウェブサイトに対応できるテーマです。

デモサイトを見る
ダウンロードする

最新情報をチェック！

サポトピアを運営する 株式会社 AnimaGate の 公式 X、公式 YouTube では、以下の情報を中心に配信しています。ぜひフォローしてください。

  • リリース情報
  • 新機能の紹介
  • 便利な使い方
  • 開発中の機能紹介
  • オンライン勉強会のお知らせ
  • 導入事例

など