スタティックモジュールは、端末の状態(スクリーンの幅など)に影響されず、常に固定の効果を提供します。主に特に基本的でシンプルなショートハンド的なモジュールが含まれます。
文字組み
| モジュール名称 | 用途 | サンプル |
|---|---|---|
| .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 |