マージントップ10px「.mt-10」
要素の外側上部に 10px の余白を与えたいときに使います
- 赤い要素の外側上部に 10px の余白を与えます。
マージントップ20px「.mt-20」
要素の外側上部に 20px の余白を与えたいときに使います
- 赤い要素の外側上部に 20px の余白を与えます。
マージンレフト5px「.ml-5」
要素の外側左部に 5px の余白を与えたいときに使います
- 赤い要素の外側左部に 5px の余白を与えます。
マージンレフト10px「.ml-10」
要素の外側左部に 10px の余白を与えたいときに使います
- 赤い要素の外側左部に 10px の余白を与えます。
マージンライト5px「.mr-5」
要素の外側右部に 5px の余白を与えたいときに使います
マージンライト5px
マージン無し
- 赤い要素の外側右部に 5px の余白を与えます。
マージンライト10px「.mr-10」
要素の外側右部に 10px の余白を与えたいときに使います
マージンライト10px
マージン無し
- 赤い要素の外側右部に 10px の余白を与えます。
パディングレフト10px「.pl-10」
要素の内側左部に 10px の余白を与えたいときに使います
パディングレフト10px
パディング無し
- 赤い要素の内側左部に 10px の余白を与えます。
パディングライト10px「.pr-10」
要素の内側右部に 10px の余白を与えたいときに使います
パディングライト10px
パディング無し
- 水色の要素の内側右部に 10px の余白を与えます。
幅15%「.wd-15」
要素の幅を 15% にしたいときに使います。
| 幅15% | ... |
|---|
| 幅指定無し | ... |
|---|
- 例：テーブルのth（見出し列）やdivなど指定してレイアウト調整が行う。
幅20%「.wd-20」
要素の幅を 20% にしたいときに使います。
| 幅20% | ... |
|---|
| 幅指定無し | ... |
|---|
幅150px「.wd-150px」
要素の幅を 150px にしたいときに使います。
| 幅150px | ... |
|---|
| 幅指定無し | ... |
|---|
- 例：テーブルのth（見出し列）やdivなど指定してレイアウト調整が行う。
幅225px「.wd-225px」
要素の幅を 225px にしたいときに使います。
| 幅225px | ... |
|---|
| 幅指定無し | ... |
|---|
- 例：テーブルのth（見出し列）やdivなど指定してレイアウト調整が行う。
幅335px「.wd-335px」
要素の幅を 335px にしたいときに使います。
| 幅335px | ... |
|---|
| 幅指定無し | ... |
|---|
- 例：テーブルのth（見出し列）やdivなど指定してレイアウト調整が行う。
文字寄せ（左）「.align-L」
ブロック要素内のインライン要素を左揃えにしたいときに使います
左揃え
左揃え指定無し
- デフォルトが左揃えなので同じように表示されます。
文字寄せ（中央）「.align-C」
ブロック要素内のインライン要素を中央揃えにしたいときに使います
中央揃え
中央揃え指定無し
文字寄せ（右）「.align-R」
ブロック要素内のインライン要素を右揃えにしたいときに使います
右揃え
右揃え指定無し
フロート（左）「.float-L」
要素のボックスを左に寄せて、その反対側に後続の内容を流し込ませたい場合に使用します。
フロートフロートフロートフロートフロートフロートフロート
フロート指定無しフロート指定無しフロート指定無し
フロート（右）「.float-R」
要素のボックスを右に寄せて、その反対側に後続の内容を流し込ませたい場合に使用します。
フロートフロートフロートフロートフロートフロートフロート
フロート指定無しフロート指定無しフロート指定無し
クリアフィックス「.cf」
フロートを解除したい場合に使用します。
- 2つめの div にクリアフィックスが指定されていないため、高さが 0 となり表示が崩れてしまいます。
文字寄せ縦位置（上）「.valign-T」
テーブルセルや行の中で、縦位置の文字寄せを上部に配置したい場合、使用します。
| 1 2 3 |
見出し（指定あり） | 見出し(指定なし) |
|---|---|---|
| 1 2 3 |
内容（指定あり） | 内容（指定なし） |
文字寄せ縦位置（中）「.valign-M」
テーブルセルや行の中で、縦位置の文字寄せを中央部に配置したい場合、使用します。
| 1 2 3 |
見出し（指定あり） | 見出し(指定なし) |
|---|---|---|
| 1 2 3 |
内容（指定あり） | 内容（指定なし） |
文字寄せ縦位置（下）「.valign-B」
テーブルセルや行の中で、縦位置の文字寄せを下部に配置したい場合、使用します。
| 1 2 3 |
見出し（指定あり） | 見出し(指定なし) |
|---|---|---|
| 1 2 3 |
内容（指定あり） | 内容（指定なし） |
折り返しあり（単語途中折り返し）「.break-all」
ブロック要素、または表示要素の横幅に合わせて自動的に改行されます。このため単語の途中で改行されることもあります。
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcde abcde abcde abcde abcde abcde abcde abcde abcde
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcde abcde abcde abcde abcde abcde abcde abcde abcde
折り返しなし（改行なし）「.nowrap」
ブロック要素、または表示要素の横幅があっても、自動的に改行されません。連続する半角スペース・タブ・改行を、1つの半角スペースとして表示します。
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcde abcde abcde abcde abcde abcde abcde abcde abcde
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
abcde abcde abcde abcde abcde abcde abcde abcde abcde
- 連続1バイト文字は、nowrapの指定に関わらず、自動で折り返しをしません。横幅にあわせて折り返しをしたい場合は、.break-allを指定します。