スタティックモジュール

スタティックモジュールは、端末の状態(スクリーンの幅など)に影響されず、常に固定の効果を提供します。主に特に基本的でシンプルなショートハンド的なモジュールが含まれます。

文字組み

モジュール名称用途サンプル
.centerセンターぞろえにする。<p class="center">文字</p>
.left左揃えにする。<p class="left">文字</p>
.right右揃えにする。<p class="right">文字</p>

回り込み制御

モジュール名称用途サンプル
.fl左に回り込ませる。<p class="fl">文字</p>
.fr右に回り込ませる。<p class="fr">文字</p>
.fc回り込みを解除する。<p class="fc">文字</p>
.clearfix親要素を回り込みに対してフィットさせる。<div class="clearfix">
<div class="fl">回り込み</div>
<div class="fr">回り込み</div>
</div>

レイアウト制御

モジュール名称用途サンプル
.inlineインライン要素にする。<div class="inline">インライン要素にする。</div>
.blockブロック要素にする。<span class="block">ブロック要素にする。</span>

マージン制御

モジュール名称用途
.mt1em
要素の上方にem単位のマージンをつけます。pは小数点(point)を表します。.mt1p5emは、1.5em(1 point 5)です。
.mt1p5em
.mt2em
.mt0
要素の上方にマージンをつけます。(単位はpx)
.mt1
.mt2
.mt3
.mt4
.mt5
.mt6
.mt7
.mt8
.mt9
.mt10
.mt15
.mt20
.mt25
.mt30
.mb1em
要素の下方にem単位のマージンをつけます。pは小数点(point)を表します。.mb1p5emは、1.5em(1 point 5)です。
.mb1p5em
.mb2em
.mb0
要素の下方にマージンをつけます。(単位はpx)
.mb1
.mb2
.mb3
.mb4
.mb5
.mb6
.mb7
.mb8
.mb9
.mb10
.mb15
.mb20
.mb25
.mb30
.ml0
要素の左方にマージンをつけます。(単位はpx)
.ml1
.ml2
.ml3
.ml4
.ml5
.ml6
.ml7
.ml8
.ml9
.ml10
.ml15
.ml20
.ml25
.ml30
.mr0
要素の右方にマージンをつけます。(単位はpx)
.mr1
.mr2
.mr3
.mr4
.mr5
.mr6
.mr7
.mr8
.mr9
.mr10
.mr15
.mr20
.mr25
.mr30

パディング制御

モジュール名称用途
.pt1em
要素の上方にem単位のパディングをつけます。pは小数点(point)を表します。.pt1p5emは、1.5em(1 point 5)です。
.pt1p5em
.pt2em
.pt0
要素の上方にパディングをつけます。(単位はpx)
.pt1
.pt2
.pt3
.pt4
.pt5
.pt6
.pt7
.pt8
.pt9
.pt10
.pt15
.pt20
.pt25
.pt30
.pb1em
要素の下方にem単位のパディングをつけます。pは小数点(point)を表します。.pb1p5emは、1.5em(1 point 5)です。
.pb1p5em
.pb2em
.pb0
要素の下方にパディングをつけます。(単位はpx)
.pb1
.pb2
.pb3
.pb4
.pb5
.pb6
.pb7
.pb8
.pb9
.pb10
.pb15
.pb20
.pb25
.pb30
.pl0
要素の左方にパディングをつけます。(単位はpx)
.pl1
.pl2
.pl3
.pl4
.pl5
.pl6
.pl7
.pl8
.pl9
.pl10
.pl15
.pl20
.pl25
.pl30
.pr0
要素の右方にパディングをつけます。(単位はpx)
.pr1
.pr2
.pr3
.pr4
.pr5
.pr6
.pr7
.pr8
.pr9
.pr10
.pr15
.pr20
.pr25
.pr30

<前へ | 次へ>

次期バージョン Pickles 2 を公開しました。もっと詳しく